刚学完CSS，写个简历，有点丑的哈哈哈，主要是为了kunkun写的。

jianli.html如下：（图片自己替换啊）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历制作my Dong</title>
    <link rel="stylesheet" href="jianli.css">
</head>
<body>

<!-- 先定一个大的容器 -->
<div class="container">
    <div class="topline" >
        <div class="top_left" ></div>
        <div class="top_right">
            <p>个人简历</p>
        </div>
    </div>

    <div class="mid">

        <div class="ikun" >
            <img src="images/ikun.png" >
            <div class="ikun_mid">
                <h3><span>蔡徐坤</span>
                    <br>
                    <p style="color: #4088A5">求职意向:个人练习生</p></h3>
            </div>

            <div class="ikun_right">
                <div class="ikun_r1">
                    <p>24岁</p>
                    <img src="images/1.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>

                <div class="ikun_r2">
                    <p>15812345678</p>
                    <img src="images/2.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>

                <div class="ikun_r3">
                    <p>1632461234@qq.com</p>
                    <img src="images/3.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>

                <div class="ikun_r4">
                    <p>湖南省长沙市</p>
                    <img src="images/4.svg" width="30px" height="30px" style="transform: translate(5px,10px)">
                </div>

            </div>

        </div>

        <div class="edu">
            <h3 style="margin-bottom: -8px;"><span style="border-bottom: 3px solid black">教育背景</span></h3>
            <hr>
            <div class="normal">
                <p>2002.07~2006.07</p>
                <p style="margin-left: 100px">中南大学</p>
                <p style="margin-left: 100px">篮球专业（专科）</p>
            </div>
            <p style="margin-top: -10px">主修课程：唱、跳、RAP、打篮球</p>
        </div>


        <div class="work">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">实习经验</span></h3>
            <hr>
            <div class="normal">
                <p>2012.04~至今</p>
                <p style="margin-left: 100px">中南哇唧唧哇本科生院</p>
                <p style="margin-left: 100px">预备Idol</p>
            </div>
            <ul style="margin-top: -10px;margin-left: -15px">
                <li>主修课程：唱、跳、RAP、打篮球</li>
                <li>为了爱与正义，为了世界和平，我们ikun要站出来；</li>
                <li>我就是中南之光。</li>
            </ul>
            <div class="normal">
                <p>2010.03~2012.03</p>
                <p style="margin-left: 100px">中南哇唧唧哇研究生院</p>
                <p style="margin-left: 100px">预备Idol研究生</p>
            </div>
            <ul style="margin-top: -10px;margin-left: -15px">
                <li>主修课程：唱、跳、RAP、打篮球</li>
                <li>为了爱与正义，为了世界和平，我们ikun要站出来；</li>
                <li>我就是中南之光。</li>
            </ul>
            <br>

        </div>

        <div class="school">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">校园经历</span></h3>
            <hr>
            <div class="normal">
                <p>2009.03~2011.06</p>
                <p style="margin-left: 100px">中南大学</p>
                <p style="margin-left: 100px">校园形象大使</p>
            </div>
            <ul style="margin-top: -10px;margin-left: -15px">
                <li>带领自己的团队完成练习计划；</li>
                <li>为了爱与正义，为了世界和平，我们ikun要站出来；</li>
                <li>我就是中南之光。</li>
            </ul>
        </div>

        <div class="tech">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">技能证书</span></h3>
            <hr>
                <p>中南大学校园十佳歌手；</p>
                <p>中南大学舞蹈最佳solo；</p>
                <p>中南大学篮球比赛最有价值球员MVP。</p>
        </div>

        <div class="self">
            <h3 style="margin-bottom: -8px"><span style="border-bottom: 3px solid black">自我评价</span></h3>
            <hr>
            <p>
                大家好，我是练习时长两年半的个人练习生，我深耕中南十余载，历尽千辛万苦，终学得一技之长，希望我能为我的粉丝们带来快乐，
                跟着我左手右手一个慢动作，右手左手慢动作重播。
            </p>
             </div>

    </div>
    <div class="topline" >
        <div class="top_left1" ></div>
        <div class="top_right">
        </div>
    </div>

</div>
</body>
</html>

jianli.css如下： 

/* 容器为栅格布局 */
.container{
    display: grid;
    box-shadow: 0px 10px 50px 10px lightgrey;  /*简历周围阴影*/
    width: 900px;
    margin: 100px auto;
    /*background: red;*/

}
/* 简历上方线条 */
.topline{
    display: flex;
    flex-direction: row;
}
.top_left{
    background-color: #248CB1;
    height: 30px;
    width: 30px;
    /*transform: translate(-30px,0);  !*  向左偏移  *!*/
}
.top_left1{
    background-color: #248CB1;
    height: 30px;
    width: 200px;
    /*transform: translate(-30px,0);  !*  向左偏移  *!*/
}

.top_right{
    background-color: black;
    height: 30px;
    width: 100%;
    /*transform: translate(-30px,0);*/
    margin-bottom: 20px;
}
.top_right p{
    transform: translate(0,-10px);
    color: whitesmoke;
    font-weight: bold;  /*  粗体  */
}

/*   mid  */
.mid{
    margin-left: 30px;
}


/*照片*/
.ikun{
    display: flex;
    flex-direction: row;
    align-items: end;
}
.ikun_mid{
    margin-left: 50px;
    display: flex;
    flex-direction: column;

}
.ikun_mid span{
    font-size: 40px;
}

.ikun_right{
    display: flex;
    flex-direction: column;
    margin-left: 230px;
    align-items: flex-end;
}
.ikun_r1,.ikun_r2,.ikun_r3,.ikun_r4{
    display: flex;
    flex-direction: row;
    margin-bottom: -15px;
}

.normal{
    display: flex;
    flex-direction: row;
    font-weight: bold;
}

效果如下： 

# html5 # css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL全文索引源码剖析之Insert语句执行过程

avatar 华为云开发者联盟
cover

openGauss - 向量化执行引擎 - distinct分组聚合的实现

avatar 华为云开发者联盟
cover

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

avatar 华为云开发者联盟