先建立index页面

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>个人简历制作</title>

    <link rel="stylesheet" href="css/style.css">

</head>

 

<body>

    <div class="content">

        <div class="title">

            <h1>个人简历</h1>

        </div>

        <div class="message">

            <div class="name">姓名:</div>

            <div class="name1">小明 </div>

            <div class="sex">性别:</div>

            <div class="sex1">男</div>

            <div class="age">年龄:</div>

            <div class="age1">20</div>

        </div>

        <div class="picture">

            <img src="imgs/xiaoming.jpg" alt="xiaoming">

        </div>

        <div class="message1">

            <div class="xueli">学历：</div>

            <div class="xueli1">本科</div>

            <div class="jiatingzhuzhi">家庭住址：</div>

            <div class="jiatingzhuzhi1">河南省信阳市平桥区</div>

 

        </div>

        <div class="lianxi">

            <div class="career">专业</div>

            <div class="career1">软件工程</div>

            <div class="phonenumber">手机号</div>

            <div class="phonenumber1">13837681266</div>

 

        </div>

        <div class="special">

            <div class="special1" style="font-weight: 700;"> 特长:</div>

            <div class="special2">

                <ul>

                    <li>熟练掌握vue代码</li>

                    <li> 熟练精通spring boot基础</li>

                    <li> 熟练精通spring boot基础</li>

                </ul>

 

            </div>

        </div>

        <div class="hobby">

            <div class="hobby1">

                爱好：

            </div>

            <div class="hobby2">

                <ul>

                    <li>打羽毛球</li>

                    <li>打乒乓球</li>

                    <li>喜欢交朋友</li>

                </ul>

            </div>

        </div>

       <div class="evaluate">

           <h3>自我评价：</h3>

        <p>

            工作认负责，不推卸责任;能承受工作中的压力;工作上可以独当-面;

        </br>

            具有团队精神，能与同事,其它部门积极配合,公司利益至上;

        </br>

            服从性好,能与上司保持良好的沟通，重上司的安排;

        </br>

            为人诚实，正直;且好学上进，不断提高工作能力;

        </br>

            相信您的选择会让您我更加成功;

 

        </p>

       </div>

 

    </div>

 

</body>

 

</html>

 

 

建立CSS/style

* {

    margin: 0px;

    padding: 0px;

}

.content {

   border:3px solid gray;

    width: 800px;

    height: 1200px;

    background-color: rgb(103, 199, 199);

    margin: 100px auto;

}

.title {

   font-weight: 700;

   text-align: center;

   border-bottom: 3px solid gray;

 

}

.message{

    float: left;

 

}

.name ,.phonenumber,.career, .name1, .age ,.age1,.sex,.sex1,.xueli,.xueli1,.jiatingzhuzhi{

 

    float: left;

   

    border-bottom: 3px solid gray;

    border-right:3px solid gray ;

    width: 97px;

    height: 50px;

    text-align: center;

    line-height: 50px;

}

.age1{

    border-right: none;

}

.picture {

    float: right;

    width: 197px;

    height: 200px;

    border-left: 3px solid gray ;

    border-bottom: 3px solid gray ;

    border-right: 3px solid gray;

}

.jiatingzhuzhi1 {

    float: left;

    border-bottom: 3px solid gray;

  

    width: 297px;

    height: 50px;

    text-align: center;

    line-height: 50px;

}

.career1 {

    float: left;

    border-bottom: 3px solid gray;

    width: 197px;

    height: 50px;

    text-align: center;

    line-height: 50px;

    border-right: 3px solid gray ;

}

.phonenumber1 {

    float: left;

    border-bottom: 3px solid gray;

    width: 197px;

    height: 50px;

    text-align: center;

    line-height: 50px;

}

ul {

    margin: 20px;

    

}

.special2,.hobby {

    border-bottom: 3px solid gray ;

}

 

 

页面展示效果如下：

更多推荐

HTML5,CSS制作个人简历