前端学习第三弹:利用div+css制作个人简历
2017-10-07 16:02
477 查看
尝试用纯html制作简历,但是显得过于死板,参数设置不灵活,由于刚刚接触这一块,从网上找了很多资源,先输出后输入,通过一个具体的例子查缺补漏,这样学起来更有劲头也更具效率。
具体代码如下,已经尽力做了注释:
其中涉及的具体标签或者定义形式将在下一节进行详解……
效果图如下:
具体代码如下,已经尽力做了注释:
<!DOCTYPE html> <html> <head> <title>个人简历</title> <meta charset=UTF-8 /> <style type=text/css> /*声明其内容为标准的css*/ *{ margin: 0; padding: 0; border: none; font-size: 12px; } /*”*“为通配符选择器,将所有的元素设置为外边距margin和内边距padding为0,无边框,字体大小为12像素*/ #resume{ width: 800px; margin: 0 auto; /*外边距上下为0,左右自适应,为了使DIV在浏览器中水平居中*/ border: solid 1px #DCDDDF; } #resume .one{ background: url(beijing.jpg); width: 800px; height: 90px; font-size: 30px; color: red; font-weight: bold; /*定义粗体字符*/ text-align: center; margin-bottom: 0; /*下外边框设置为0*/ line-height: 90px; } #resume ul{ width: 780px; margin-left: 13px; margin-top: 20px; } #resume ul li{ font-size: 20px; background: url(li.png) no-repeat;/*设置图片不重复*/ list-style: none; text-indent: 2em; /*规定文本块中首行文字的缩进,em为相对单位*/ line-height: 30px; /*行间距离为30像素*/ margin-bottom: 20px; border-bottom: 1px solid #DCDDDF; } #resume ul li.none1{ border-bottom: none; /*将id为resume中的ul 且class为none1的li去掉下边框*/ } #resume ul li p{ font-size: 15px; } /*将id为resume中的ul li 下的p标签的字体设置为15像素*/ </style> </head> <body> <div id="resume"> <div class="one">个人简历</div> <ul> <li>个人信息 <p> 姓名:李明; 性别:男; 籍贯:山东聊城; 年龄: 23; </p> <p> 手机:134xxxxxxxx; 学校:XXXX大学; 专业:XXXXXX; 学历:XX; </p> </li> <li>教育背景 <p> 2012.9-2016.6: XXXX大学XXX专业 </p> <p> 在这里学习到了…… </p> </li> <li>社会经历 <p> 2015.7-2016.5: xxx公司xxx岗位实习 </p> <p> 工作内容…… </p> </li> <li>专业技能 <p> 考取了XXX证书……获奖情况…… </p> </li> <li>相关资格证书 <p>计算机证书</p> <p>教师资格证书</p> <p>营养师证书</p> <p>英语竞赛证书</p> </li> <li class="none1">自我评价 <p> 中肯、客观的自我评定…… </p> </li> </ul> </div> </body> </html>
其中涉及的具体标签或者定义形式将在下一节进行详解……
效果图如下:
相关文章推荐
- DIV+CSS网页制作布局技巧学习
- java入门实例之小试牛刀--利用Scanner制作个人简历
- 从零开始前端学习[3]:css+div盒子模型
- DIV+CSS布局重新学习之使用A标签和CSS制作按钮
- 前端网页制作以HTML基础来学习DIV…
- CSS+DIV个人学习笔记
- 推荐一本前端学习的好书-《2天驾驭DIV+CSS》
- 如何使用利用LaTeX制作个人简历
- 新手如何学习DIV+CSS制作前台网页
- 利用DIV+CSS制作浮动广告,没有用到多少javascript,全是css
- 利用LaTeX制作个人简历的入门笔记
- 利用LaTex制作个人简历
- 网站建设设计前端开发需要学习html和div+css
- 前端学习-CSS-如何利用border画三角
- 学习DIV+CSS网页制作的流程及如何学习CSS?
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使
- DIV+CSS网页制作布局技巧学习
- 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节
- 前端学习笔记番外篇:仿WIN8 Metro UI DIV+CSS练习
- 【css学习笔记】理解利用css的border属性制作三角形的原理