1.在设置一个div盒子时,body会有一个默认8像素的外边距。需要用margin:0;来清除标签默认样式。
2.fonts文件中的图标样式需要放在和css同级目录下;
引入fonts图表样式文件;
<link rel="stylesheet" href="./css/fonts/iconfont.css">
在所需要填加图表样式的地方,用i标签进行包裹一下;
<i class="iconfont icon-dingwei"></i> 河南
效果图:
3.阿里的字体图标在使用的时候,不需要去复制 @font-face,只需要把文件夹里边的 iconfont.css引入进来就可以了。
4.进行左右浮动:
float:left;
float: right;
5.快速进行无序列表的书写的快捷书写方式
ul>li*8
效果图:
6.清除li前面的黑色点
代码:
list-style: none;
效果:
7.清除ul的默认内外边距样式
清除前:
清除后:
ul{
margin:0;
padding:0;
}
8.把li中的文字变成在一行的显示
利用浮动
float:left;
效果:
9.文本垂直居中的实现
利用行高(line-height)和高(height)相等可以实现,其中也是继承的表现。
height: 30px;
line-height: 30px;
10.只设置边框右边线
border-right: 1px solid red;
11.去下划线
text-decoration: none;
12.设置边框和文本的间距
padding: 0 10px;
13.去掉第一个和第九个的右边框
用nth-child();样式
由下面代码可以看出,nth-child();可以针对单个进行设置样式,比较灵活。
/* 对第1个li中的a的右边框进行清除 */
.header .header_right ul li:nth-child(1) a:nth-child(1){
border-right: 0;
}
/* 对第9个li中的a的右边框进行清除 */
.header .header_right ul li:nth-child(9) a:nth-child(1){
border-right: 0;
}
效果图: