源文件网址
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简历模型</title> <link rel="stylesheet" href="style_3.css"> </head> <body> <div class="resume"> <div class="header"> <h1>简历</h1> </div> <div class="content"> <div class="basic"> <div class="tit"><h2>基本信息</h2></div> <div class="basicInf"> <h5>姓名 张三</h5> <h5>性别 男</h5> <h5>应聘职位 Web前端工程师</h5> </div> </div> <div class="contact"> <div class="tit"><h2>联系方式</h2></div> <div class="contactInf"> <h5>手机 12312341234</h5> <h5>Email <a href="#">joinefe@baidu.com</a> </h5> <h5>个人主页 <a href="https://github.com/Freshman-996">Github</a> </h5> </div> </div> <div class="ability"> <div class="tit"><h2>能力描述</h2></div> <div class="abilityInf"> <div class="mid"> <h5 class="subtit">技术能力</h5> <h5>熟练掌握HTML,CSS,JavaScript</h5> </div> <div class="mid"> <h5 class="subtit">综合能力</h5> <h5>良好的沟通，主动积极，努力勤奋</h5> </div> </div> </div> <div class="education"> <div class="tit"><h2>教育经历</h2></div> <div class="educationInf"> <div class="mid"> <h5 class="subtit">本科</h5> <h5>百度前端技术学院小薇学院</h5> </div> <div class="mid"> <h5 class="subtit">研究生</h5> <h5>百度前端技术学院大斌学院</h5> </div> </div> </div> <div class="experience"> <div class="tit"><h2>项目经历</h2></div> <div class="experienceInf"> <div class="mid"> <h5 class="subtit">小度小度</h5> <h5>作为前端工程师角色参与了ABC组件的开发</h5> </div> <div class="mid"> <h5 class="subtit">SAN Doc</h5> <h5>作为文档工程师参与了SAN Doc编写</h5> </div> </div> </div> </div> </div> </body> </html>↓↓↓第一种：
* { margin: 0; padding: 0; } .tit { margin-top: 30px; } h5 { font-size: 16px; font-weight: normal; } .basicInf h5, .contactInf h5 { display: inline-block; margin: 10px 50px 0 0; } .subtit { margin-top: 20px; font-weight: bold; }↓↓↓第二种：
* { margin: 0; padding: 0; } .resume { height: 800px; width: 800px; } .tit { margin-top: 30px; } h5 { font-size: 16px; font-weight: normal; } .basicInf h5, .contactInf h5 { display: inline-block; margin: 10px 50px 0 0; } .subtit { margin-top: 20px; font-weight: bold; } .header { width: 200px; height: 800px; float: left; /*display: inline-block;*/ background-color: skyblue; } .header h1 { height: 50px; width: 80px; text-align: center; margin: 40px auto; color: #fff; } .content { width: 500px; /*display: inline-block;*/ float: left; margin-left: 20px; }↓↓↓第三种：
* { margin: 0; padding: 0; } .header h1 { height: 50px; width: 80px; text-align: center; margin-left: 40px; padding-top: 20px; color: #fff; } .content > div { height: 100px; width: 1200px; } .content > div > div { height: 100px; width: 998px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; float: left; } .content .tit { display: inline-block; width: 100px; height: 100px; text-align: center; background-color: #ccc; border-bottom: 1px solid #fff; } .tit h2 { margin-top: 35px; } .content div h5 { font-size: 16px; font-weight: normal; float: left; margin: 0 20px 0; } .content .subtit { font-weight: bold; } .content .mid { margin-left: 20px; height: 24px; width: 1000px; } .content .mid h5 { margin: 0; } .header { height: 100px; width: 1100px; background: #999; }