<div class="xiangce"> <ul>
<li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</a></li> <li><a href="#"><img src="images/pic4.gif" >产品名称</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中改数据、、、、
最终效果:
时间: 2024-10-08 21:58:22