百度前端学院学习DAY05 and DAY06
第五天和第六天 三种简历
课程目标
通过阅读及一个小型练习，掌握 CSS 盒模型及通过Float进行简单的布局
课程描述
阅读
今天我们要学习非常重要的一些知识，这些知识会伴随着你的前端生涯.
首先我们先学习一下盒模型的概念
接下来我们了解一下浮动
编码
今天的任务，我们将不在codepen上来实现，打开你电脑本地的代码编辑器（如VSCode，Sublime或者其它），创建一个项目目录，在目录下创建一个resume.html，再创建一个css目录，在css目录下创建一个style_1.css文件。
然后基于上面的阅读学习，实现如下设计稿的一份简历页面，HTML内容写在resume.html中，样式写在style_1.css中。
实现过程中，请注意：
- 实现时必须保证布局的一致
- 字体、宽高、边距等不需要完全一致
阅读
在进行今天的第二个练习时，我们希望你首先阅读一些来自企业的HTML及CSS规范，比如下方的百度规范，你也可以自行搜索其他公司的编码规范
然后学习规范后，我们继续下一个编码任务
编码
依然还是使用resume.html，在css目录下创建style_2.css，然后在resume.html的CSS文件引用改为style_2.css。
参照下方设计稿进行页面实现。HTML代码请在上一个任务的基础上，根据样式需要进行调整。并在style_2.css中写入新样式。
编码
最后一个任务，我们把这个挑战极端一些。在css目录中创建style_3.css。把resume.html中引用的css改为style_3.css。
参照下方设计稿进行页面实现。HTML代码请在上一个任务的基础上，根据样式需要进行调整。并在style_3.css中写入新样式
编码
接下来，请你把resume.html中引用的css文件从style_3.css改回style_1.css或者style_2.css，看一下样式是否还健在？
如果没有，请对HTML或CSS代码进行相应调整，保证，无论是用 style_1.css 还是 style_2.css 或是 style_3.css，都可以保证页面按照设计稿的要求呈现。也就是说同一份HTML，可以在改变CSS代码的情况下，实现不同样式，达到HTML结构内容和CSS样式的解耦。
提交
把你的代码提交到 Github，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在Github中预览你的HTML代码，并提交预览地址。
验证
这两天的内容稍多，请反复确认你是否掌握了以下概念
- 盒模型的概念
- inline、block和inline-block的概念
- 内外边距，宽度，高度，box-sizing等属性
- 浮动，清除浮动
- 如何使用浮动进行布局
总结
学习用时：3h
收获：盒模型、float浮动、响应式布局（媒体查询）、怎样预览GitHub仓库里项目的demo。
今日的任务还是比较充实的，仔细阅读了CSS里的float以及清楚浮动的方法，填了很多之前不太明白的坑。我觉得学习大纲里贴的链接都很棒，很有针对性。
今日任务代码
HTML代码
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resume</title>
<link rel="stylesheet" href="../RESUME03/style_03.css">
</head>
<body>
<div class="tittle">
<h1>简历</h1>
</div>
<div class="mian">
<div class="basic">
<div class="left">
<h2>基本信息</h2>
</div>
<div class="right">
<p><strong>姓名</strong> 张三 <strong>性别</strong> 男 <strong>应聘职位</strong> Web前端工程师</p>
</div>
</div>
<div class="contact">
<div class="left">
<h2>联系方式</h2>
</div>
<div class="right">
<p><strong>手机</strong> 12312312312 <strong>Email</strong> <a href="[email protected]">[email protected]</a> <strong>个人主页</strong> <a href="[email protected]"">GitHub</a></p>
</div>
</div>
<div class="ability">
<div class="left">
<h2>能力描述</h2>
</div>
<div class="right">
<h4>技术能力</h4>
<p>熟练掌握HTML、CSS、JavaScript</p>
<h4>综合能力</h4>
<p>良好的沟通，主动积极，努力勤奋</p>
</div>
</div>
<div class="edu">
<div class="left">
<h2>教育经历</h2>
</div>
<div class="right">
<h4>本科</h4>
<p>百度前端技术学院小薇学院</p>
<h4>研究生</h4>
<p>百度前端技术学院大斌学院</p>
</div>
</div>
<div class="exp">
<div class="left">
<h2>项目经历</h2>
</div>
<div class="right">
<h4>小度小度</h4>
<p>作为前端工程师的角色参与ABC组件的开发</p>
<h4>SAN Doc</h4>
<p>作为文档工程师参与了SAN Doc编写</p>
</div>
</div>
</div>
</body>
</html>CSS代码
Resume01
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
margin-left: 2px;
}
h1,h2 {
margin-top: 20px;
margin-bottom: 20px;
}
h4 {
margin-bottom: 2px;
}
h4,p {
font-size: 18px;
}Resume02
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
.tittle {
float: left;
margin: 5px;
width: 200px;
height: 750px;
background-color: #00CCFF;
}
.tittle h1 {
margin-top: 60px;
margin-left: 80px;
color: #fff;
}
.main {
float: left;
margin-top: 20px;
margin-left: 20px;
}
h2 {
margin-top: 20px;
margin-bottom: 20px;
}
h4 {
margin-bottom: 2px;
}
h4,p {
font-size: 18px;
}Resume03
* {
margin: 0;
padding: 0;
font-family: "微软雅黑";
}
.tittle {
margin-top: 5px;
margin-left: 2px;
width: 100%;
height: 80px;
background-color: #777777;
}
.tittle h1 {
margin-left: 20px;
height: 80px;
font-size: 24px;
line-height: 80px;
color: #fff;
}
.basic,
.contact,
.ability,
.edu,
.exp {
margin-left: 2px;
width: 100%;
height: 151px;
border-bottom: 1px solid #AAAAAA;
}
.left {
float: left;
width: 150px;
height: 150px;
border-bottom: 1px solid #fff;
text-align: center;
background-color: #AAAAAA;
}
.right {
float: left;
margin-left: 20px;
}
h2 {
height: 150px;
font-size: 20px;
line-height: 150px;
color: #000;
}
h4,p {
font-size: 18px;
}
h4 {
margin-top: 18px;
}
.basic p,
.contact p {
height: 150px;
line-height: 150px;
font-size: 18px;
}Demo预览地址
Resume01:https://infrontofme.github.io/IFE_IN2018/005DAY-05%20and%20DAY-06/RESUME01/resume01.html
Resume02:https://infrontofme.github.io/IFE_IN2018/005DAY-05%20and%20DAY-06/RESUME02/resume02.html
Resume03:https://infrontofme.github.io/IFE_IN2018/005DAY-05%20and%20DAY-06/RESUME03/resume03.html
以上。