该简历主要由bootstrap的栅格组成，其中掺杂了缩略图。
页眉最初是想用巨幕来做的，但做出来的效果不是很理想且代码量较多，因此放弃选用css来布局。个人信息中的小图标也是同理，如果用列表来承载的话则会多出很多步骤。
这个项目给我最大的感触就是：完成一个布局有很多种方式，其中没有正确的方法，只有最优的选择。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>个人简历</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="./css.css" />
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--巨幕会有很大程度的留白，做出来的页眉不紧凑，且设置的样式也很费代码
<div class="container">
<div class="row">
<div class="col-md-4" id="img_box">
<img src="./imges/logo.png" width="200px" height="auto">
</div>
<ul class="col-md-8">
<li><h2>Nancy</h2></li>
<li><h3>求职意向：前端工程师</h3></li>
<li><p>微信</p></li>
</ul>
</div>
</div>-->
<div class="container">
<div id="first_part">
<div class="row cv-container">
<div class="col-lg-3 col-md-3 col-xs-12 img_box">
<img src="./imges/2B.jpg" class="img-responsive img-thumbnail center-block">
</div>
<div class="col-lg-9 col-md-9 col-xs-12 text_box">
<div id="info_box">
<h1>Nancy</h1>
<h3>求职意向：前端工程师</h3>
<br><br>
<!--1.列表确实可以添加小图标；2.用列表会导致第一个li项的左边距过大。效果见图1
<h4>
<ul>
<li class="glyphicon glyphicon-user"> 1982 </li>
<li class="glyphicon glyphicon-comment"> 微信：bchen1998 </li>
<li class="glyphicon glyphicon-envelope"> 邮箱：binch@haorenao.cn</li>
</ul>
</h4>
-->
<h4>
<!--1.h4用于增大字体大小;2.1982等字样前面的空格是用来与小图标分隔开的;3. 是空格的占位符。效果见图2-->
<span class="glyphicon glyphicon-user"></span> 1982
<span class="glyphicon glyphicon-comment"></span> 微信：bchen1998
<span class="glyphicon glyphicon-envelope"></span> 邮箱：binch@haorenao.cn
</h4>
</div>
</div>
</div>
</div>
<div id="second_part">
<!--第二部分第一段-->
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-12">
<p class="left-side">教育背景</p>
</div>
<div class="col-lg-9 col-md-9 col-xs-12 second-border">
<!--第二部分第一段右侧第一行-->
<div class="row">
<p class="col-lg-4 col-md-4 col-xs-4 fonts">2018.6-现在</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">程序园儿童编程</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">前端学习</p>
</div>
<!--第二部分第一段右侧第二行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">主修课程:HTML、CSS、JavaScript、jQuery等</p>
</div>
<!--第二部分第一段右侧第三行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">以上课程均顺利完成并掌握</p>
</div>
</div>
</div>
<!--第二部分第二段-->
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-12">
<p class="left-side">项目经验</p>
</div>
<div class="col-lg-9 col-md-9 col-xs-12 second-border">
<!--第二部分第二段右侧第一行-->
<div class="row">
<p class="col-lg-4 col-md-4 col-xs-4 fonts">2018.08-现在</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">动态网页</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">程序员</p>
</div>
<!--第二部分第二段右侧第二行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">项目介绍：学会了JavaScript,我的网页能和别人互动了！！！！</p>
</div>
<!--第二部分第二段右侧第三行-->
<div class="row">
<p class="col-lg-4 col-md-4 col-xs-4 fonts">2018.07-2018.08</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">静态网页</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">程序员</p>
</div>
<!--第二部分第二段右侧第四行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">项目介绍：学会了CSS，调了一天样式，才把网页弄得比较好看，但还是土里土气的。</p>
</div>
<!--第二部分第二段右侧第五行-->
<div class="row">
<p class="col-lg-4 col-md-4 col-xs-4 fonts">2018.06-2018.07</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">网页框架</p>
<p class="col-lg-4 col-md-4 col-xs-4 fonts">程序员</p>
</div>
<!--第二部分第二段右侧第六行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">项目介绍：用刚学会的超文本语言(HTML)写了一个简单的页面，只有两个词"Hello World"。</p>
</div>
</div>
</div>
<!--第二部分第三段-->
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-12">
<p class="left-side">个人介绍</p>
</div>
<div class="col-lg-9 col-md-9 col-xs-12 second-border">
<!--第二部分第三段右侧第一行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">「程序媛计划」创始人。前微软公司程序员。</p>
</div>
<!--第二部分第三段右侧第二行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">RoboCup2017 Koov赛团队金牌。</p>
</div>
<!--第二部分第三段右侧第三行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">儿童编程专家。好热闹茶市，橙旭园儿童编程创始人。</p>
</div>
</div>
</div>
<!--第二部分第四段-->
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-12">
<p class="left-side">个人技能</p>
</div>
<div class="col-lg-9 col-md-9 col-xs-12 second-border">
<!--第二部分第四段右侧第一行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">熟悉使用office办公软件（Word、Excel、PowerPoint）</p>
</div>
<!--第二部分第四段右侧第二行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">编程语言：HTML 和 JavaScript</p>
</div>
<!--第二部分第四段右侧第三行-->
<div class="row">
<p class="col-lg-12 col-md-12 col-xs-12 textRight">编程环境：Visual Studio Code</p>
</div>
</div>
</div>
<!--第二部分第五段-->
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-12">
<p class="left-side">作品展示</p>
</div>
<div class="col-lg-9 col-md-9 col-xs-12 second-border data">
<!--第二部分第五段右侧第一行-->
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6 thumbnail">
<img src="./imges/web1.jpg">
<div class="image_text">
<h3>静态页面1</h3>
<p class="alice">Alice的自我介绍</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 thumbnail">
<img src="./imges/web3.png">
<div class="image_text">
<h3>静态页面2</h3>
<p class="alice">她和他的故事</p>
</div>
</div>
</div>
<!--第二部分第五段右边第二行-->
<br>
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-6 thumbnail">
<img src="./imges/web3.png" class="img-reponsive center-block">
<div class="image_text">
<h3>静态页面3</h3>
<p class="alice">她和他的故事</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-6 thumbnail">
<img src="./imges/web1.jpg" class="img-reponsive center-block">
<div class="image_text">
<h3>静态页面4</h3>
<p class="alice">Alice的自我介绍</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="third_part">
<div class="row">
<!--1.text-center可直接设置文本居中;2.此处不需要再单独指定栅格大小，-->
<div class="col-lg-12 col-md-12 col-xs-12 text-center footer">
<a href="https://weibo.com/haorenao">关注-微博</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*#img_box{
display: inline-block;
height: 350px;
background-color: rgb(134, 218, 218);
text-align: center;
}
img{
border: 1px solid;
border-radius: 10px;
padding: 15px;
margin-top: 70px;
background-color: antiquewhite;
}
ul{
display: inline-block;
list-style-type: none;
background-color: rgb(70, 122, 168);
height: 350px;
padding-top: 50px;
}
li{
line-height: 4;
}*/
/*页眉部分*/
.img_box{
background-color: #aad2ec;
height: 262.5px;
}
.text_box{
color: #fff;
background-color: #347ab6;
height: 262.5px;
}
h1{
font-size: 48px;
}
.img-responsive{
max-height: 202.5px;
margin-top: 30px;
background-color: #eee;
}
#info_box{
margin: 30px;
line-height: 18px;
}
.cv-container{
margin-top: 30px;
}
/*
ul{
list-style-type: none;
}
li{
display: inline;
}*/
/*中间左侧*/
.left-side{
width: 130px;
height: 60px;
padding: 10px;
font-weight: bold;
font-size: 23px;
color: #347ab6;
border:5px solid #347ab6;
text-align: center;
margin:50px auto;
}
/*中间右侧*/
.fonts{
font-size: 20px;
color: rgb(0, 0, 0);
}
.second-border{
border-bottom: 3px solid #347ab6;
margin-top: 50px;
}
.textRight{
color: #85888a;
font-size: 18px;
}
.image_text{
padding-left: 10px;
}
.alice{
font-size: 18px;
color: #161515;
}
/*为中间部分最后四张图片之间设置间距*/
.thumbnail{
width: 400px;
margin-left: 30px;
}
.footer{
margin:30px 0;
padding:50px;
/*height: 100px;直接设置内边距就可以把背景撑大，不需要再单独设置页脚的高度*/
background: #CCC;
font-size: 20px;
}
最终成果如下图：
nancy.png
网友评论