1.效果圖：

2.Example Source Code

<h3><a?href="http://www.52css.com/">我愛CSS畫廊</a></h3>
<ul>
????<li>
????????<a?href="http://www.52css.com/default.asp">
????????<img?src="1.jpg"?alt="1"?/>
????????<span>用css網站布局之十步實錄</span>
????????</a>
????</li>
????<li>
????????<a?href="http://www.52css.com/default.asp?cateID=3">
????????<img?src="2.jpg"?alt="2"?/>
????????<span>CSS網頁布局中form表單的語義結構探討</span>
????????</a>
????</li>
????<li>
????????<a?href="http://www.52css.com/default.asp?cateID=9">
????????<img?src="3.jpg"?alt="3"?/>
????????<span>52CSS衣柜?一款圖片為主的ul列表?</span></a>
????</li>
????<li>
????????<a?href="http://www.52css.com/default.asp?cateID=5">
????????<img?src="4.jpg"?alt="4"?/>
????????<span>書寫高效的CSS?-?漫談CSS的渲染效率</span>
????????</a>
????</li>
????<li>
????????<a?href="http://www.52css.com/default.asp?cateID=6">
????????<img?src="5.jpg"?alt="5"?/>
????????<span>老生常談CSS網頁布局的意義與副作用</span>
????????</a>
????</li>
????<li>
????????<a?href="http://www.52css.com/default.asp?cateID=7">
????????<img?src="6.jpg"?alt="6"?/>
????????<span>HTML頁面中標簽的語義與使用位置</span>
????????</a>
????</li>
????<div?style="clear:both;"></div>
</ul>

　　下面我們開始修改CSS樣式定義，請在學習以下代碼時，注意理解相關尺寸的定義的技巧，尺寸的計算和設置在CSS網頁布局編碼中，是非常重要的。
　　另外需要注意li的樣式定義中display:inline屬性的設置是為了消除IE6雙倍邊距了BUG。

css Example Source Code :

body,h3,ul?{?
????margin:0;?
????padding:0;
}
h3?{?
????width:426px;?
????height:30px;?
????margin:20px?auto?0?auto;?
????font-size:14px;
????text-indent:10px;?
????line-height:30px;?
????background:#E4E1D3;
}
h3?a?{?
????color:#c00;?
????text-decoration:none;
}
h3?a:hover?{?
????color:#000;
}
ul?{?
????width:405px;?
????margin:0?auto;?
????padding:10px?0?6px?15px;
????border:3px?solid?#E4E1D3;?
????border-width:0?3px?3px?3px;
}
ul?li?{?
????float:left;?
????margin:5px?15px?3px?0;?
????list-style-type:none;
????display:inline;
}
ul?li?a?{?
????display:block;?
????width:120px;?
????height:175px;?
????text-decoration:none;
}
ul?li?a?img?{?
????width:120px;?
????height:150px;?
????border:0;
}
ul?li?a?span?{?
????display:block;?
????width:120px;?
????height:23px;?
????line-height:20px;?
????font-size:12px;?
????text-align:center;?
????color:#333;?
????cursor:hand;?
????white-space:nowrap;?
????overflow:hidden;
}
ul?li?a:hover?span?{?
????color:#c00;
} 　　通過CSS樣式的設置，實現了這款CSS圖片列表的變化。六行一列式的結構，變成了兩行兩列式的結構。各元素間的邊距設置恰當，比較美觀。能適應網站應用的需要。

總結

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

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