1、DIVCSS5初始化模板
為了兼容各大瀏覽器，開發案例或項目建議下載使用。使用前先修改預先設置的樣式（DIVCSS5初始化模板）。

2、圖片素材
主要是使用PS切出所需內容圖片素材。（已經放入images文件夾）

三、案例詳細代碼與效果截圖 ? - ??TOP

1、CSS代碼

ul.imglist{?margin:0?auto;?width:536px;?overflow:hidden}?

ul.imglist?li{?float:left;?padding:4px?8px;?width:160px}?

ul.imglist?li?img{?display:block;?width:160px;?height:90px}?

ul.imglist?li?span{?display:block;?width:100%;?height:30px;?line-height:30px;?background:#F6F6F6}?

2、主要HTML代碼

<ul?class="imglist">?

<li>

<a?href="#"?target="_blank">

<img?src="images/i160x90.jpg"?/>

<span>自制快手糟黃瓜?吃完整個</span>

</a>

</li>?

?

<li>

<a?href="#"?target="_blank">

<img?src="images/i160x90-2.jpg"?/>

<span>標題內容?吃完整個</span>

</a>

</li>?

<li>

<a?href="#"?target="_blank">

<img?src="images/i160x90-3.jpg"?/>

<span>自制快手糟黃瓜?吃完整個</span>

</a>

</li>?

<li>

<a?href="#"?target="_blank">

<img?src="images/i160x90-2.jpg"?/>

<span>自制快手糟黃瓜?吃完整個</span>

</a>

</li>?

<li>

<a?href="#"?target="_blank">

<img?src="images/i160x90.jpg"?/>

<span>自制快手糟黃瓜?吃完整個</span>

</a>

</li>?

<li>

<a?href="#"?target="_blank">

<img?src="images/i160x90-2.jpg"?/>

<span>自制快手糟黃瓜?吃完整個</span>

</a>

</li>?

</ul>?

3、效果截圖

實際CSS圖文列表實例在瀏覽器中效果截圖

總結

以上是生活随笔為你收集整理的div css图片列表实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。