Web网页开发之一页纸简历制作

1.先看效果图：

2.页面构成：
页面由五部分组成：
a)header
包括一个图片和三个图标以及三个图片对应的文字信息
代码如下：

<header>
   <div class="container">
   <div class="row"> 
   <div class="col-xs-4 col-md-4">

     </div>
   <div class="col-xs-8 col-md-8">
    <div class="col-xs-1 col-md-1">
    <div class="col">
     <img src="img/2.png" style="border: none;"/>
     <img src="./img/1.png" />
    </div>
    </div>
    <div class="col-xs-6 col-md-6" style="margin:10px;">
    <h4 class="font">12345678</h4>
    <h4 class="font">成都</h4>
   <!--img src="./img/1.png" /-->
    <h4 class="font">222222222222@qq.com</h4>
   </div>
   </div>
   </div>

b)section1
介绍基本信息，使用表格实现：

<section>
   <table class="table" style="border: o; width: 100%;">
    <tr>
     <td>&nbsp;姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：陈XX</td>
     <td>出生年月：1999-12-08</td>
     <td>性别：男</td>
    </tr>
    <tr>
     <td>求职意向：软件开发工程师</td>
     <td>毕业学校：重庆理工大学</td>
     <td>专业：软件工程</td>
    </tr>
    <tr>
     <td>政治面貌：团员</td>
     <td>籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：四川成都</td>
     <td>学历：本科</td>
    </tr>
   </table>
  </section>

c)section2
描述自我评价，代码如下：

<section style="margin: 0 0 20px;">
   <p class="p">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本人软件工程专业毕业，有三年校外工作经验，对C语言、C++、PHP、Python开发语言都有一定程度的熟悉。有责任心，在任职岗位期间认真负责，执行能力强，只要有任务都会在第一时间内完成。热爱本职工作，热衷于代码开发，有着良好的沟通能力及协调能力，肯吃苦耐劳，勇于进取。如能加入贵公司，我必定全力以赴。  
   </p>
  </section>

d)section3
介绍工作经历

  <p class="p">成都市东庭家政责任有限公司&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs