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;

　　我们再来看看效果！现在就不会出现破坏布局的情况了！