今天练习一下页面布局，就用自己的个人简历来练手。下面是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样式。
下面是做出来的效果图：
原文地址：https://www.cnblogs.com/weiweiwei233/p/9826443.html
时间： 2024-11-14 06:38:40