<div class="xiangce"> <ul>
<li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li>
<li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> <li><a href="#"><img src="images/pic4.gif" alt="">產品名稱</a></li> </ul>
</div>
這時一個div里面的列表圖標鏈接樣式，效果如下
a：用line-style：none，將無序列表樣式前符號；總是忘記用哪個元素，line-style：noneline-style：noneline-style：noneline-style：noneline-style：none
b：在實現水平排列前，將a元素的文字部分置於圖片的下方。
首先想到了用display設置成塊級元素block，剛開始只設置了文字，並沒有出現效果，於是將img也設置成block，然后就、、、好了、、、；通過text-align：center，讓文字處於圖片下方的中心；
c：最后對li設置float，讓其靠左浮動float：left；
隨后用margin調整在div的分布，現在只會在瀏覽器中，一邊調一遍看，找到合適的位置，再回css中改數據、、、、
最終效果：
