清除浮动 CSS书写规范 有序列表 无序列表 HTML5标签语义化-第二节 头部制作

首页 -下拉菜单 PSD文件下载：

链接: https://pan.baidu.com/s/1o9kAu1O

密码: 9e2j

1、网站标准色（主色）、辅色

2、HTML5标签语义化

3、标签认识 h1、header、div、img、a、ol、ul、li

4、有序列表，无序列表

5、父元素清除浮动

6、CSS书写规范、格式、命名

7、绝对定位、相对定位、元素显示隐藏

8、CSS新属性认识，重点，margin，padding，float

9、文件名规范

标签认识 h1、header、div、img、a、ol、ul、li

提取公共模块，建立公共的css文件，common.css

有序列表，无序列表

有序列表：就是有顺序的列表，即列表前面带个123或abc什么的。英文单词为“Ordered List”，标签为，作用是在网页中显示一个有顺序的列表。

第一个子集

第二个子集

第三个子集

第四个子集

第五个子集

无序列表：无序列表就是列表结构中的列表项没有先后顺序的列表形式。

第一个子集

第二个子集

第三个子集

第四个子集

第五个子集

父元素清除浮动

浮动会导致父元素高度无法撑开，这个问题对整个页面布局有很大的影响。浮动元素脱离了文档流，并不占据文档流的位置，自然父元素也就不能被撑开，所以没了高度。

第一种方法

第二种方法

增加：clearfix（类名）：清除浮动最佳实践

.clearfix:after { content: "."; /*加一段内容*/ display: block; /*让生成的元素以块级元素显示，占满剩余空间*/ height: 0; /*避免生成的内容破坏原有布局高度*/ clear: both; /*清除浮动*/ visibility: hidden; /*让生成的内容不可见*/}.clearfix { display: inline-block; }* html .clearfix { height: 1%; }.clearfix { display: block; }

CSS书写规范、格式、命名

详细请看这里

绝对定位、相对定位、元素显示隐藏

理解：绝对定位元素，根据父元素相对定位元素定位；

绝对定位元素

.green-box {padding: 50px;background-color: green;}.red-box {position: relative;padding: 50px;background-color: red;}.black-box {padding: 50px;background-color: black;}.position-box {position: absolute;left: 0;top: 0;height: 25px;padding: 10px;background-color: blue;line-height: 25px;color: #fff;}

元素显示、隐藏 display: none;display: block;

这个是显示的元素

这个是隐藏的元素

.display-block {display: block;background-color: yellow;color: black;}.display-none {display: none;background-color: gray;color: black;}