2018百度前端技术学院第五六课编码作业

一、课程题目

这节课给出了三份文字内容相同的简历，但是样式布局不一样。题目要求我们使用同一份HTML结构内容，三份不同的CSS代码分别实现图片所示的样式，达到HTML结构内容和CSS样式的解耦。

备注要求：

实现时必须保证布局的一致
字体、宽高、边距等不需要完全一致

二、HTML编写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/style_3.css"><title>百度前端技术学院-day5</title>
</head><body><h1>简历</h1><div class="info"><div class="header"><h2>基本信息</h2><div class="right"><span>姓名</span> &emsp;<p class="in">张三</p> &emsp;&emsp;<span>性别</span> &emsp;<p class="in">男</p> &emsp;&emsp;<span>应聘职位</span> &emsp;<p class="in">Web前端工程师</p></div></div><div class="header"><h2>联系方式</h2><div class="right"><span>手机</span> &emsp;<p class="in">12312341234</p> &emsp;&emsp;<span>Email</span> &emsp;<p class="in"><a href="#"> joinefe@baidu.com</a></p> &emsp;&emsp;<span>个人主页</span> &emsp;<p class="in"><a href="#">GitHub</a></p></div></div><div class="header"><h2>能力描述</h2><div class="right"><span>技术能力</span><p class="in2">熟练掌握HTML,CSS,JavaScript</p><br><span>综合能力</span><p class="in2">良好的沟通，主动积极，努力勤奋</p></div></div><div class="header"><h2>教育经历</h2><div class="right"><span>本科</span><p class="in2">百度前端技术学院小薇学院</p><br><span>研究生</span><p class="in2">百度前端技术学院大斌学院</p></div></div><div class="header"><h2>项目经历</h2><div class="right"><span>小度小度</span><p class="in2">作为前端工程师角色参与了ABC组件的开发</p><br><span>SAN Doc</span><p class="in2">作为文档工程师参与了SAN Doc编写</p></div></div></div></body></html>

三、简历一的CSS编写

.in{display: inline;
}span{font-weight: bold;
}

四、简历二的CSS编写

body,div,dl,dt,dd,ul,li,h1,input,form,a,p,text{margin:0;padding: 0;
}h1{background-color: #65A5FA;color: #ffffff;width: 180px;height: 700px;float: left;text-align: center;padding-top: 30px;
}.info{width: 900px;height: 650px;margin-left: 30px;float: left;}.in{display: inline;
}span{font-weight: bold;
}

五、简历三的CSS编写

body,div,dl,dt,dd,ul,li,h1,input,form,a,p,text{margin:0;padding: 0;
}span{font-weight: bold;
}.in{display: inline;
}.in2{display: inline;
}h1{width: 1060px;height: 100px;background-color: #858585;color: #ffffff;line-height: 100px;padding-left: 20px;
}.header{width: 1078px;height: 150px;border: #D6D6D6 solid 1px;
}h2{width: 148px;height: 148px;background-color: #D6D6D6;float: left;margin: 0px;text-align: center;line-height: 148px;}.right{float: left;margin-top: 10px;margin-left: 10px;
}

六、总结

先分析HTML内容，找出格式相同的内容，思考用什么样的元素组装。（在这一点上我做的很不好，一直觉得有更符合语义化的元素表达，但是始终想不到，大神有更好的方法可以评论区中指出）

再分析三个样式的共同点，寻找可以通用的盒子，最后再编码。

2018百度前端技术学院第五六课编码作业相关推荐

从2018百度前端技术学院看代码究竟应该怎么写(2)
任务描述参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE htm ...
2018年百度前端技术学院学习笔记
对百度前端技术学院心仪已久,今天开始正式学习了,特地开个博客记录今后的学习学了几个月的前端了,之前也做过一些百度前端学院的练习,终于等到2018年前端学院开始,在开头先立flag,本次前端学院的任务 ...
学计算机前端技术学院,百度前端技术学院(任务)
百度前端技术学院这一期高档班的标题列表在:ife/2015_spring/taskatmaster·baidu-ife/ife·GitHub下面的高档班(趁便吐槽一下知乎的链接无法识别URL中文锚点 ...
百度前端技术学院—斌斌学院题库转载 cristina-guan
Cristina_Guan https://github.com/CristinaGuan 博客园首页新随笔联系订阅管理随笔 - 34 文章 - 3 评论 - 2 百度前端技术学院-斌 ...
百度前端技术学院—斌斌学院题库
任务一:零基础JavaScript编码(一) 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理性,但即使如此,真正决 ...
百度前端技术学院--零基础--第二天给自己做一个在线简历吧
百度前端技术学院–零基础–第二天给自己做一个在线简历吧课程目标通过简单的实践,更加清楚地了解HTML是什么,HTML5是什么.学习基本的HTML标签,理解HTML语义化概念任务描述用code ...
百度前端技术学院—-小薇学院(HTML CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
沉迷百度前端技术学院的第一天
盼啊盼,终于等到了百度前端技术学院开课的日子,很激动,终于可以跟着学啦! 第一天,主要是了解前端,包括要学什么,用书签标记的方法,还有在codepen.GitHub.CSDN上注册账号,作为一个程序员 ...

2018百度前端技术学院第五六课编码作业

2018百度前端技术学院第五六课编码作业

一、课程题目

二、HTML编写

三、简历一的CSS编写

四、简历二的CSS编写

五、简历三的CSS编写

六、总结

2018百度前端技术学院第五六课编码作业相关推荐

最新文章

热门文章

2018百度前端技术学院 第五六课 编码作业

2018百度前端技术学院 第五六课 编码作业

一、课程题目

二、HTML编写

三、简历一的CSS编写

四、简历二的CSS编写

五、简历三的CSS编写

六、总结

2018百度前端技术学院 第五六课 编码作业相关推荐

最新文章

热门文章

2018百度前端技术学院第五六课编码作业

2018百度前端技术学院第五六课编码作业

2018百度前端技术学院第五六课编码作业相关推荐