百度前端技术学院第二天-简历制作

效果图：

CSS：

 1 * {
 2             border: none;
 3             padding: 0;
 4             margin: 0;
 5             color: #2A7B88;
 6         }
 7         div#allPart {
 8             width: 800px;
 9             margin: 15px auto 0 auto;
10         }
11         hr {
12             height: 1px;
13             background-color: #2A7B88;
14             width: 600px;
15         }
16         div.name {
17             width: 100%;
18             height: 73px;
19             margin-top: 20px;
20         }
21         .name_cs,address {
22             margin-top: 3px;
23             margin-left: 50px;
24             margin-bottom: 3px;
25         }
26         .personalEsperience {
27             margin-left: 50px;
28             margin-bottom: 3px;
29         }
30         p {
31             font-size: 25px;
32         }
33         a {
34             text-decoration: none;
35         }
36         .name_adress {
37             margin-top: 5px;
38             height: 106;
39         }
40         .experience {
41             margin-top: 5px;
42             height: 136px;
43         }

HTML: 

 1 <div id="allPart">
 2     <header>
 3         <h1>简历</h1>
 4         <hr align="left">
 5     </header>
 6     <div class="name">
 7         <p><strong>姓名</strong></p>
 8         <p class="name_cs">程硕</p>
 9         <hr align="left">
10     </div>
11     <div class="name_adress">
12         <p><strong>联系方式与地址</strong></p>
13         <address>
14             <p>E-mail: <a href="mailto:[email protected]">[email protected]</a></p>
15             <p>Phone: 13647284153</p>
16         </address>
17         <hr align="left">
18     </div>
19     <div class="experience">
20         <p><strong>技能</strong></p>
21         <div class="personalEsperience">
22             <p>html、css、javascript的初步掌握</p>
23             <p>良好的人际交往能力</p>
24             <p>动手能力强，爱钻研，团意识强</p>
25         </div>
26         <hr align="left">
27     </div>
28 </div>