这几天写了一下易车网的一个纯html+css的网站进行了知识的巩固和练习，遇到了一些问题分享一下。

1.背景图的使用

美工给的icon图一般是放在一起的，因为以前自己都是一个小图标一个用的，这里的话就要用到背景图的使用，代码如下：background: url(//image.bitautoimg.com/2016/pc1200/shouye/sprites-5.png) -975px -1057px no-repeat;外层的容器给他一个宽高隐藏就可以将icon抠出来

2.熟练使用伪类

写的时候遇到很多这种后面带了线但是用边框线来写又不是很好的，这时候用before或者after伪类属性的话能够简单方便的解决，而且不容易出现其他奇奇怪怪的问题

代码如下：

.h_l>ul> li{

position:relative;

}

.h_r ul li:not(:first-child):before{

content: '';

width: 1px;

height: 14px;

background:#ccc;

left:0;

top:13px;

position: absolute;

}

一般这种导航栏都是ul li标签做的，所以给li一个相对定位，然后在给li加上一个伪类属性即可，至于是before和after需要自己斟酌，然后用css3去除掉第一个或者最后一个属性或者用溢出隐藏来使用

3.浮动使用以及清除

浮动使用的次数非常的多，所以要养成清除浮动的习惯，一般来说给浮动的元素的父级元素加一个超出隐藏可以实现，但是加上这个属性父元素需要一个高度所以会出现问题，在高度确定的情况下可以使用这个，不建议使用，我自己用的是在浮动的元素加一个同级的div空盒子，给他一个clear：both的属性可以清除，这个方法比较好用没碰到过问题，哈哈，或者使用上面说的伪类的属性，用：after来清除浮动也是一样的效果，好用。

4.css3使用过程中碰到的问题

.c_m1r>ul:first-child{

}

上面的这个css并不能选取到类名为ul1的那个元素，因为这个大盒子下面有3个子元素，而first-child这个属性会选取第一个子元素无法选取到第一个ul，这是css3的一个特性吧，所以用到这个属性的时候需要小心使用，因为会出现问题，大家要小心使用。

5.span元素

上面的截图第二个span换行了但是和第一个span是有一个空格的间距的，这个很容易忽略，我也是找了好久这个问题，因为span是内联样式，所以换行是有空格的

上面是个人碰到的一些问题，希望对大家有帮助