清除浮动 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;}

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180301G09MVI00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券