标签：
第一学习阶段已经结束了，针对HTML/CSS的训练，收获很多，现在对于CSS开始熟练，也享受一个漂亮的网页在手下诞生的满足感。今天再回过头去看看排行榜第一的各组的代码，继续学习。
任务一：使用了一些知道但很少用到的标签（可能也是因为以前练得太少了）
1、<figure>标签运用在在文档中插入图片，文档的内容与图片有关，是html5的新标签。使用<figcaption>元素为figure添加标题；
2、选择框<form><label>性别：</label><input type="ratio" name="gender" /></form>
<textarea row=‘5‘ col=‘20‘>多行输入框
3、表格 表格标题<caption>
<table>
<thead><tr><th>
<tbody><tr><td>
<tfoot>
<table>
4、边栏<aside>
任务二：在任务一的基础上增添样式
list-style-type:none 去掉列表前的点
border-collapse:collapse 设置表格的边框合并为一个单一的边框
任务三：三栏式布局
1、利用float
.left{width:200px;float:left;}
.rigth{width:200px;float:right;}
.middle{margin-left:210px;margin-right:210px;}
要注意的问题，自适应的模块在html中一定要放在最后
2、利用position
.wrapper{position:relative;}
.left,.right,.middle{position:absolute;}
.left{width:200px;}
.rigth{width:200px;right:20px;}
.middle{margin-left:210px;margin-right:210px;}
这种方法能够使三个模块正确摆放，但是要溢出父元素，即使父元素wrapper设置height:100%或者overflow:hidden也不行。而且中间模块不能达到自适应的目的
任务四：定位垂直居中
1、flex
.wrapper{display:flex;justify-content:center;align-items:center;}
2、position
.wrapper{width:500px;height:500px;left:50%;top:50%;margin-left:-250px;margin-top:-250px;}
.wrapper{left:50%;height:50%;transform:translate(-50%,-50%);}
3、table
.wrapper{display:table;}
.content{display:table-cell;vertical-align:middle;}
任务五：这个结合了前几个任务的知识点，不多说了
任务六：报纸排版
1、<hr> 标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
2、font-variant:small-caps;text-transform:capitalize;font-style:oblique
3、背景图片上添加蒙版时，要注意position
4、列表前的符号可以用list-style-image：url()设置自定义图标
任务八：响应式布局
这个就是bootstrap框架了，第一次接触，觉得好神奇，非常方便，这里就不赘述了
任务十：FlexBox的用法
链接：https://segmentfault.com/a/1190000002910324介绍得很详细
任务十一：移动页面布局
主要就是用flex布局还有百分比，真心好用，要注意的就是细节方面的
.wrapper:before,.wrapper:after{content:"";display:table;clear:both;}清除浮动
任务十二：CSS3新特性
慕课网的教程~挺喜欢@keyframe这个特性的
标签：
原文地址：http://www.cnblogs.com/bottlelove/p/5353106.html
