百度前端技术学院第二天-简历制作
效果图:
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:315891071@qq.com">315891071@qq.com</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>