相信大家在瀏覽網(wǎng)站時，經(jīng)常會看到一個新聞列表，每一列前面都有一個小圖標(biāo)，例如：


那么如何控制這些小圖標(biāo)的位置正好跟我們的新聞列的文字對齊呢？怎么樣能讓背景圖片定位到我們想要的位置呢？下面詳細(xì)給大家做個案例：
首先，我們先將html的布局寫好，內(nèi)容如下：
<div class="news">
         <ul>
                  <li><a href=”#”><span>2015/07/27</span>我們擁有國家系統(tǒng)集成3級資質(zhì)遠(yuǎn)程視頻會議系統(tǒng)</a></li>
                   <li><a href=”#”><span>2015/07/27</span>我們擁有國家系統(tǒng)集成3級資質(zhì)遠(yuǎn)程視頻會議系統(tǒng)</a></li>
                   <li><a href=”#”><span>2015/07/27</span>我們擁有國家系統(tǒng)集成3級資質(zhì)遠(yuǎn)程視頻會議系統(tǒng)</a></li>
                   <li><a href=”#”><span>2015/07/27</span>我們擁有國家系統(tǒng)集成3級資質(zhì)遠(yuǎn)程視頻會議系統(tǒng)</a></li>
                   <li><a href=”#”><span>2015/07/27</span>我們擁有國家系統(tǒng)集成3級資質(zhì)遠(yuǎn)程視頻會議系統(tǒng)</a></li>
         </ul>
</div>
其次我們把小圖標(biāo)命名為：

最后我們再將css樣式寫出來：
<style type="text/css">
body{ font-size:12px; font-family:'微軟雅黑'; margin:0 auto; padding:0px; color:#000; line-height:180%;}
ul,li{ list-style:none; margin:0px; padding:0px;}
a {text-decoration:none; color:#333333;}
a:hover{ text-decoration:none; color:#4ac5ee;}
.clear{ clear:both}
img{ border:none}
.news {width:415px; height:220px; float:left; margin:100px 300px;}
.news ul { line-height:40px;}
.news ul li { border-bottom:1px dashed #ccc; padding:2px 0 2px 17px; background:url(images/icon1.gif) no-repeat 6px 20px;}
.news ul li a { width:390px;  display:inline-block;}
.news ul li span { float:right;}
</style>
注意，我們今天要說的重點(diǎn)來了：background:url(images/icon1.gif) no-repeat 6px 20px; 這里的的背景圖片就是我們需要定位的小圖標(biāo)。第一個6px，指的是水平位置即圖片距離左側(cè)有多少個px；第二個20px，指的就是垂直位置即圖片距離頂部有多少個px。
最后我們來預(yù)覽一下效果：

看，做出來的效果是不是跟網(wǎng)站上的一模一樣？如果覺得這個小圖標(biāo)不夠美觀，還可以替換成其他圖片。