用html+css寫一下個人簡歷
阿新 • • 發佈：2018-10-31
今天練習一下頁面佈局，就用自己的個人簡歷來練手。下面是html部分：
1 <body> 2 <div class="content"> 3 <div class="head"> 4 <h1>web前端業務個人簡歷</h1> 5 </div> 6 7 <div class="essentialInformation"> 8 <div class="biaoti"> 9<p>基本資訊</p> 10 </div> 11 <div class="neirong"> 12 <span><strong>姓名：</strong>愛學習的wei丶</span> 13 <span><strong>性別：</strong>男</span> 14 <span><strong>電話：</strong>00000000000</span><br> 15 <span><strong>郵箱：</strong>[email protected]</span> 16 <span><strong>個人部落格：</strong><a target="_blank" href="http://www.cnblogs.com/weiweiwei233/" class="lianjie">wei's blogs</a></span><br> 17<span><strong>應聘職位：</strong>web前端工程師</span> 18 </div> 19 20 </div> 21 22 <div class="skill"> 23 <div class="biaoti"> 24 <p>專業技能</p> 25 </div> 26 <div class="neirong"> 27 <p>熟練掌握html+css的頁面佈局和JavaScript</p> 28 29 </div> 30 31 </div> 32 <div class="educationalBackground"> 33 <div class="biaoti"> 34 <p>教育背景</p> 35 36 </div> 37 <div class="neirong"> 38 <p>學歷：大學本科；</p> 39 <p>畢業院校：安徽財經大學；</p> 40 <p>專業：統計學；</p> 41 <p>畢業年份：2017年。</p> 42 </div> 43 44 </div> 45 <div class="projectExperience"> 46 <div class="biaoti"> 47 <p>專案經驗</p> 48 </div> 49 <div class="neirong"> 50 <ul>輪播圖</ul> 51 <li>在專案中負責使用JavaScript編碼實現輪播效果以及各個按鈕的功能</li> 52 <ul>淘寶星級評價</ul> 53 <li>在專案中負責實現五顆五角星的打分功能</li> 54 </div> 55 56 57 </div> 58 <div class="zwpj"> 59 <div class="biaoti"> 60 <p>自我評價</p> 61 </div> 62 <div class="neirong"> 63 <p>熱愛前端的工作，對於自身實現的每一個互動式效果或者完美的頁面佈局會有極大的成就感，這促使著我不斷的而又飢渴的汲取著前端的知識，希望自己能夠做的更好，這也使我對前端工作有極大的激情。</p> 64 </div> 65 66 </div> 67 </div> 68 69 </body> 70 </html>
下面是css樣式部分：
1 *{margin:0px;padding: 0;list-style: none;} 2 .content{ 3 width: 800px;margin: 20px auto; overflow: hidden; 4 } 5 .essentialInformation .skill .educationalBackground .projectExperience .zwpj {overflow: hidden;} 6 .head {text-align: center;width: 100%;height: 80px;background: #778899;float: left;line-height:80px;} 7 8 9 .biaoti {width: 160px;font-size: 20px;font-weight: 500;color: #000;background: #C0C0C0;float: left;height: 100px;line-height:100px;margin-top: 4px;text-align: center;} 10 .neirong { width: 639px;background:white;height: 98px;float: right;margin-top: 4px;border-top: 1px solid #C0C0C0;border-bottom: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0;} 11 .neirong p {vertical-align: middle;}
比較簡單，主要練習一下公共樣式的設定，和複習一下各種css樣式。
下面是做出來的效果圖：
