css一些常用技巧

margin在ie中解释出来会出现双倍的情况通常用display:inline来解决

 

实现下面这种效果背景框随着文字的增多而变长，随着文字的减少而变短。

html代码

<a href="" class="bgauto"><span class="txtauto">那夜 我还很年检很年检</span></a>

css代码

.bgauto{ background:url(comm.png) 0 3px no-repeat; float:left; text-decoration:none}
.txtauto{ background:url(comm.png) right 4px no-repeat; height:28px; line-height:28px; padding:0 15px 0 0; display:block; float:left;}//也可以不加float:left;

 

  下面这种效果

html代码

<h2>
<span style="background-position:0px -153px;"></span> 本周最热
</h2>

css代码

h2{ font-size:14px; line-height:20px; position:relative; zoom:1; font-weight:bold; padding:6px 10px; padding-left:42px; }
h2 span{ background:url(../images/bg.png) no-repeat; position:absolute; width:32px; height:32px; left:5px; top:2px; }