CSS布局教程：如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示？_DIV+CSS實(shí)例

　　有朋友在QQ上問我一個(gè)關(guān)于CSS的問題，一個(gè)產(chǎn)品展示頁，有產(chǎn)品圖片與產(chǎn)品名稱，如何用CSS布局來實(shí)現(xiàn)，下面談?wù)勎业挠^點(diǎn)以及提出我的方法，大家可以討論，如有不當(dāng)，請大家在MB5U.com上評論或留言指出來，大家共同進(jìn)步。

　　從事網(wǎng)頁設(shè)計(jì)工作的朋友應(yīng)該有過很多這樣的案例，上面放置企業(yè)的產(chǎn)品圖片，下面放置產(chǎn)品的名字，點(diǎn)擊圖片或產(chǎn)品名字可以查看產(chǎn)品的具體資料。當(dāng)然，這樣的形式，在其它網(wǎng)站上也經(jīng)常出現(xiàn)，例如圖片新聞、寫真壁紙站等等。我們看效果圖片（可點(diǎn)擊放大）：


　　首先我們分析一下，這樣的形式每一組是類似的：上部一個(gè)圖片鏈接，下部一個(gè)文字鏈接，然后重復(fù)。進(jìn)行適應(yīng)的排列即可。我們可以將它們看作是一組無序列表的列表項(xiàng)，而一頁中的所有產(chǎn)品即是一個(gè)無序列表。

　　每一個(gè)列表項(xiàng)，包含了一張圖片并進(jìn)行鏈接，文字鏈接。我們用CSS對圖片與文字進(jìn)行適當(dāng)?shù)目刂疲�即可�?shí)現(xiàn)這樣的效果。然后讓每一個(gè)列表項(xiàng)進(jìn)行浮動(dòng)，讓它們一行三個(gè)，并且在三個(gè)列表項(xiàng)水平居中對齊于整個(gè)無序列表。

　　好了，廢話不多說了，上面的思路基本清楚了，我們開始HTML代碼的編寫：


　　我們建立了一個(gè)無序列表，ID為products。每一個(gè)列表項(xiàng)包括了一個(gè)圖片鏈接，一個(gè)文字鏈接，為了便于CSS進(jìn)行控制，我們將文字鏈接放置在span中。

　　下面我們開始CSS代碼的編寫：


　　CSS整體布局聲明：邊距與填充均為零，12px的文字大小，黑色的文字，去除文字裝飾線（即定義鏈接文字無下劃線）。


　　定義無序列表的寬度為582px，關(guān)于這個(gè)數(shù)值的由來我們在下面會有說明，上下邊距為50px，左右邊距為自動(dòng)，實(shí)現(xiàn)UL的水平居中對齊。


　　定義無序列表的列表項(xiàng)的樣式，即一組“產(chǎn)品圖片”和“文字名稱”：寬度為154px，高度為154px，向左浮動(dòng)，左邊距為30px。為了消除雙倍邊距的bug，我們設(shè)置display:inline;。我們一行是三組內(nèi)容，共有四個(gè)邊距，154*3 30*4=582。這就是整個(gè)無序列表寬度的由來，看下面的示例圖片（可點(diǎn)擊放大）：



　　設(shè)置鏈接均為塊元素。輕易進(jìn)行控制，而且設(shè)為塊元素以后，增大了鼠標(biāo)懸停的區(qū)域，提高用戶體驗(yàn)。
　　設(shè)置鏈接圖片的邊框?yàn)?px的實(shí)線，顏色為深灰色。設(shè)置填充為1px，讓邊線與圖片之間產(chǎn)生一象素的空隙。


　　這些代碼是對鏈接文字的樣式定義，寬度和高度是154px、30px。行高為24px，文字居中對齊。我們來看看現(xiàn)在的效果！

　　或許你認(rèn)為我們的工作已經(jīng)結(jié)束了，圖片及文字已經(jīng)按預(yù)定的方式上下排列，而且整個(gè)頁面看上去還不錯(cuò)。但我們需要注重，或許文字并不是固定的，或許是三個(gè)字，或許是十五個(gè)字，假如文字過多，會產(chǎn)生什么樣的后果呢？（可點(diǎn)擊放大）


　　暈倒！文字將li擠走了，一切都走樣了。你會想到可以用ASP腳本來控制讀取的文字?jǐn)?shù)量，或許這并不是什么好主意，我們完全可以通過CSS來搞定它，我們的鏈接是塊元素，我們可以設(shè)置文字超出寬度154px的時(shí)候，自動(dòng)的隱藏，并且在IE中可以實(shí)現(xiàn)省略號的效果，我們在#products li span a增加以下代碼：


　　我們再來看看效果！現(xiàn)在就不會出現(xiàn)破壞布局的情況了！
　　歡迎大家參與討論，說說你的看法，這樣的形式如何制作最合理科學(xué)！