工作中遇到的CSS总结

1.一个图片img6hover.png按照position:relative显示，但有另一张图片img6.png按照position:absolute显示，正好盖住上一张图片img6hover.png，那么显示的是img6.png

<div><img src="img/home/img6hover.png" /><em  class="em6"></em><span></span><a href="cardstatistic.htm"></a></div>

em.em6{display:block; width:200px; height:230px; position:absolute; text-align:center;top:0px;left:0px; line-height:100px; font-family:Verdana;
　　font-style:normal; font-size:30px; color:#FFF; text-shadow:2px 1px 4px #000000;background:url(img/home/img6.png) no-repeat;}

2.选择器的权重

对于选择器中给定的各个ID属性值，加“0,1,0,0”。

对于选择器中给定的各个类属性值，属性选择或伪类，加"0,0,1,0"。

对于选择器中给定的各个元素为伪元素，加“0,0,0,1”。

结合符和通配符“*”以及":not()"没有任何的加分权。

对于行内样式，加为“1,0,0,0”

对于"!important"加分高于上面的一切，将变成“1,0,0,0,0”

3.一种tab样式的写法





像上面这样当前tab的下面框不存在，以前总不清楚怎么写，现在把学会的写法记录下来

思路是没有选择的tab有背景色，有border，但是border-bottom:none,选择的tab可以把它的背景色或者底边框颜色设为和下面内容的背景色一样的颜色，这个例子是#fff。

此外还要把选择的tab的高度设置大1px

ul{border-bottom:1px solid rgb(171,209,271);}
.tabs_tittle{cursor:pointer;display:block;float:left;margin-left:5px;padding-top:5px;border:1px solid rgb(171,209,271);border-bottom:none;

width:70px;border-top-left-radius:5px;border-top-right-radius:5px;background:url(img/common/li_bg.png) repeat;height:22px;}
.li_current_bg{background:white;height:23px;}

.li_current_bg{border-bottom:1px solid #fff;height:23px;}

<div class="tabs_tittle">
<ul>
<li class="tabs_tittle li_current_bg">即将过期</li>
<li class="tabs_tittle">已过期</li>
</ul>
</div>