CSS布局教程：如何用CSS構建圖片、文字混排的產品展示

　　有朋友在QQ上問我一個關於CSS的問題，一個產品展示頁，有產品圖片與產品名稱，如何用CSS布局來實現，下面談談我的觀點以及提出我的方法
　　從事網頁設計工作的朋友應該有過很多這樣的案例，上面放置企業的產品圖片，下面放置產品的名字，點擊圖片或產品名字可以查看產品的詳細資料。當然，這樣的形式，在其它網站上也經常出現，例片新聞、寫真壁紙站等等。我們看片（可點擊放大）：

　　首先我們分析一下，這樣的形式每一組是類似的：上部一個圖片連結，下部一個文字連結，然後重複。進行適應的排列即可。我們可以將它們看作是一組無序列表的清單項目，而一頁中的所有產品即是一個無序列表。

　　每一個清單項目，包含了一張圖片並進行連結，文字連結。我們用CSS對圖片與文字進行適當的控制，即可實現這樣的效果。然後讓每一個清單項目進行浮動，讓它們一行三個，並且在三個清單項目水平置中對齊於整個無序列表。

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

Example Source Code [www.52css.com]<ul id="products">
    <li>
        <a href="#"><img src="52css.com.jpg" alt="" /></a>
        <span><a href="#">標題的位置</a></span>
    </li>
    <li>
        <a href="#"><img src="52css.com.jpg" alt="" /></a>
        <span><a href="#">標題的位置</a></span>
    </li>
    ……以下省略
</ul>

　　我們建立了一個無序列表，ID為products。每一個清單項目包括了一個圖片連結，一個文字連結，為了便於CSS進行控制，我們將文字連結放置在span中。

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

Example Source Code [www.52css.com]* {
    margin:0;
    padding:0;
    font-size:12px;
    color:#000;
    text-decoration:none;
}

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

Example Source Code [www.52css.com]#products {
    width:582px;
    margin:50px auto;
}

　　定義無序列表的寬度為582px，關於這個數值的由來我們在下面會有說明，上下邊距為50px，左右邊距為自動，實現UL的水平置中對齊。

Example Source Code [www.52css.com]#products li {
    width:154px;
    height:154px;
    float:left;
    margin-left:30px;
    display:inline;
}

　　定義無序列表的清單項目的樣式，即一組“產品圖片”和“文字名稱”：寬度為154px，高度為154px，向左浮動，左邊距為30px。為了消除雙倍邊距的bug，我們設定display:inline;。我們一行是三組內容，共有四個邊距，154*3+30*4=582。這就是整個無序列表寬度的由來，看下面的樣本圖片（可點擊放大）：

Example Source Code [www.52css.com]#products li a {
    display:block;
}
#products li a img {
    border:1px solid #666;
    padding:1px;
}

　　設定連結均為塊元素。容易進行控制，而且設為塊元素以後，增大了滑鼠移至上方的地區，提高使用者體驗。
　　設定連結圖片的邊框為1px的實線，顏色為深灰色。設定填充為1px，讓邊線與圖片之間產生一象素的空隙。

Example Source Code [www.52css.com]#products li span a {
    width:154px;
    height:30px;
    line-height:24px;
    text-align:center;
}

　　這些代碼是對連結文字的樣式定義，寬度和高度是154px、30px。行高為24px，文字置中對齊。我們來看看現在的效果！

　　或許你認為我們的工作已經結束了，圖片及文字已經按預定的方式上下排列，而且整個頁面看上去還不錯。但我們需要注意，或許文字並不是固定的，或許是三個字，或許是十五個字，如果文字過多，會產生什麼樣的後果呢？（可點擊放大）

　　暈倒！文字將li擠走了，一切都走樣了。你會想到可以用ASP指令碼來控制讀取的文字數量，或許這並不是什麼好主意，我們完全可以通過CSS來搞定它，我們的連結是塊元素，我們可以設定文字超出寬度154px的時候，自動的隱藏，並且在IE中可以實現省略符號的效果，我們在#products li span a增加以下代碼：

Example Source Code [www.52css.com]    white-space:nowrap;
    text-overflow:ellipsis; 
    overflow: hidden;

　　我們再來看看效果！現在就不會出現破壞布局的情況了！