ZT：52CSS衣柜 一款图片为主的ul列表

　　图片作为网页的内容是非常普遍的现象。一个图片，在图片下面放置一段文字。以此作为对内容的索引。这种形式是非常常见的，在52CSS.com的文章中也有过很多相关案例的介绍。

　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！ 

　　DivCSS布局实例 用dl dt dd来制作列表
　　http://www.52css.com/article.asp?id=666
　　DivCSS布局实例：很实用的图文混排CSS列表 - 富有语义
　　http://www.52css.com/article.asp?id=669
　　DivCSS实例教程：上下结构的图文混排CSS列表
　　http://www.52css.com/article.asp?id=838

　　我们首先看一下最终的效果图：

　　我们开始编写HTML代码，首先是“我爱CSS-Web标准化 www.52CSS.com”的标题，我们应用h3标签来表现它。

Example Source Code [www.52css.com]

<h3>
    <a href="http://www.52css.com/">我爱CSS-Web标准化 www.52CSS.com</a>
</h3>

　　紧接着是一个无序列表UL。用来置图片和文字列表的内容。我们思考以何种形式来处理单一元素呢。其中的每一个元素，都有三个内容组成：图片，文字标题和价格。我们将三者都放入于a标签中，在鼠标移上去时，均可以点击。而a元素置入于li标签中即可。如下面的代码所示。

Example Source Code [www.52css.com]

<li>
    <a href="http://www.52css.com/article.asp?id=844">
        <img src="52css/1.jpg" alt=""/>
        <strong>CSS进阶：z-index与元素层叠的一些研究</strong>
        <span>￥<em>25.0</em></span>
    </a>
</li>

　　完成全部列表UL的编码。如下。

Example Source Code [www.52css.com]

<ul>
    <li><a href="http://www.52css.com/article.asp?id=844"><img src="52css/1.jpg" alt=""/> <strong>CSS进阶：z-index与元素层叠的一些研究</strong>    <span>￥<em>25.0</em></span></a></li>
    <li><a href="http://www.52css.com/article.asp?id=843"><img src="52css/2.jpg" alt=""/> <strong>Google Chrome浏览器对CSS支持非常好 </strong> <span>￥<em>65.0</em></span></a></li>
    <li><a href="http://www.52css.com/article.asp?id=842"><img src="52css/3.jpg" alt=""/> <strong>老生常谈CSS网页布局的意义与副作用 </strong> <span>￥<em>215.0</em></span></a></li>
    <li><a href="http://www.52css.com/article.asp?id=841"><img src="52css/4.jpg" alt=""/> <strong>打造一款常见的Blog列表 </strong> <span>￥<em>9.0</em></span></a></li>
    <li><a href="http://www.52css.com/article.asp?id=838"><img src="52css/5.jpg" alt=""/> <strong>上下结构的图文混排CSS列表 </strong> <span>￥<em>120.0</em></span></a></li>
    <li><a href="http://www.52css.com/article.asp?id=835"><img src="52css/6.jpg" alt=""/> <strong>52CSS网站教程 部分CSS实例</strong> <span>￥<em>32.0</em></span></a></li>
    <li><a href="http://www.52css.com/article.asp?id=834"><img src="52css/7.jpg" alt=""/> <strong>从程序员的角度说 W3C标准网站的优势 </strong> <span>￥<em>99.0</em></span></a></li>
    <li><a href="http://www.52css.com/article.asp?id=833"><img src="52css/8.jpg" alt=""/> <strong>CSS优化最佳实践六则 </strong> <span>￥<em>125.0</em></span></a></li>
</ul>

　　在这时候，完全没有定义CSS，页面将以最原始的状态呈现，一切以浏览器默认的形式出现。我们此时双击HTML文件，查看到的效果如下。

　　页面具有良好的结构，各元素的表现也符合语义，即使没有CSS样式也可以清晰的阅读页面内容。这对于WEB是非常有意义的，也是52CSS.com一直所强调的建立具有语义且具有良好结构的HTML文档。

　　下面开始进行CSS定义。将HTML文件通过CSS样式成为更加美观的效果。
　　本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！ 

Example Source Code [www.52css.com]

body { 
    margin:0; 
    padding:0; 
    font-size:12px;
}

　　整体布局声明，设置body的内外边距均为零，设置文字大小为12px。

Example Source Code [www.52css.com]

h3 { 
    width:388px; 
    height:28px; 
    margin:20px auto 0 auto; 
    border:1px solid #ccc; 
    border-width:1px 1px 0 1px; 
    font-size:14px; 
    color:#03c; 
    text-indent:8px; 
    line-height:30px;
    background:#f1f1f1;
    overflow:hidden;
}
h3 a { 
    color:#03c; 
    text-decoration:none;
}
h3 a:hover { 
    color:#000; 
}

　　设置h3标签的CSS样式。需要您注意的是，下边框是没有的。只有上，右，左，三条边框，下边框的宽度为零。

Example Source Code [www.52css.com]

ul { 
    width:376px; 
    height:284px; 
    margin:0 auto; 
    padding:12px 0 0 12px; 
    border:1px solid #ccc; 
    border-top-style:dotted;
    list-style:none;
} 

　　设置ul整体的CSS样式。请注意在宽度上出现的变化，上与左的内边距为li居于合适的位置打好了基础。

Example Source Code [www.52css.com]

ul li { 
    float:left; 
    margin:0 12px 12px 0; 
    display:inline;
}
ul li a { 
    display:block; 
    width:82px; 
    height:130px; 
    cursor:hand; 
    text-decoration:none; 
    text-align:center; 
    overflow:hidden;
}

　　设置li及li内的a标签的样式。li向左浮动。右与下的外边距使各元素能居于合适的位置。当然，在ul设置之初，就需要计算出这里的尺寸。设置li内的a标签为块元素。定义光标为手形。

Example Source Code [www.52css.com]

ul li a img { 
    width:80px; 
    height:80px; 
    border:1px solid #ccc;
}

　　设置图片的样式，定义宽与高，设置边框。

Example Source Code [www.52css.com]

ul li a strong { 
    display:block; 
    width:82px; 
    height:30px; 
    line-height:15px;
    font-weight:100; 
    color:#333; 
    overflow:hidden;
}

　　定义元素标题文字的样式。定义为块元素，设置宽和高，以前行距等样式。设置溢出为隐藏。这样的设置保证了标题文字以两行显示而且多出来的部分会自动隐藏掉。

Example Source Code [www.52css.com]

ul li a span { 
    display:block; 
    width:82px; 
    height:20px; 
    line-height:20px; 
    color:#666;
}
ul li a span em { 
    font-style:normal; 
    font-weight:800; 
    color:#f60;
}

　　设置价格部分的CSS样式。与上面的标题文字相类似，只是其中的em要设置字形为正常，以橙色#f60加粗显示。

Example Source Code [www.52css.com]

ul li a:hover img { 
    border-color:#333;
}
ul li a:hover strong { 
    color:#03c;
}
ul li a:hover span em { 
    color:#f00;
}

　　设置链接的悬停效果。设置图片的边框变为更深的灰色。设置标题文字变为蓝色#03c。价格的数字变为红色#f00。在IE6可能此效果无效，而在IE7与FF中一切正常。在不影响布局的情况下，某些细节不赞成用CSS HACK。所以就此结束此案例的编写。我们可以查看最终的效果。

▲▲▲ >>>点击查看最终的“52CSS衣柜 一款图片为主的CSS列表”效果<<<