上一篇 |

CSS布局实例

div+css布局实例:常用图文混排（二）--淘宝网衣柜

日期:2009-10-05作者:woniu

字体大小: 小中大

今天写一个淘宝网首页最下面的图文列表。这种css衣柜在很多网上商城都有用到。先看效果：

先看html结构，每个重复单元都有三部分组成：图片，文字标题和价格。我们可以把这三个元素都放入a标签，然后外面套li。

Example Source Code

<li>
 <a href="http://www.woaicss.com/">
 <img src="pic/1.jpg" alt=""/>
 澳大利亚高帮鞋纯羊毛/css毛线
 ￥25.0
 </a>
</li>

完整html代码：

Example Source Code

<ul>
 <li><a href="http://www.woaicss.com/article.asp?id=844"><img src="http://www.woaicss.com/works/pic/0.jpg" alt=""/> 澳大利亚高帮鞋纯羊毛/css毛线 ￥25.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=843"><img src="http://www.woaicss.com/works/pic/2.jpg" alt=""/> [迎国庆]经典百搭纪念款情侣CSS支持非常好 ￥65.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=842"><img src="http://www.woaicss.com/works/pic/3.jpg" alt=""/> 优雅甜蜜气质毛呢配真毛领机车款外套CSS ￥215.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=841"><img src="http://www.woaicss.com/works/pic/4.jpg" alt=""/> 超显瘦韩版九分裤 ￥9.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=838"><img src="http://www.woaicss.com/works/pic/5.jpg" alt=""/> 抢！双冠促销黄金假期【全CSS列表 ￥120.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=835"><img src="http://www.woaicss.com/works/pic/6.jpg" alt=""/> 特价！冲4冠热销万条超显CSS实例 ￥32.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=834"><img src="http://www.woaicss.com/works/pic/7.jpg" alt=""/> 实拍抓绒套头帽衫带帽长袖加厚卫衣外套 ￥99.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=833"><img src="http://www.woaicss.com/works/pic/8.jpg" alt=""/> 庆三冠!零利润纯牛皮女单鞋!销量冲万!人气款CSS优化最佳实践六则 ￥125.0</a></li>
</ul>

查看无css样式效果：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>

</head>

<body>
<ul>
 <li><a href="http://www.woaicss.com/article.asp?id=844"><img src="http://www.woaicss.com/works/pic/0.jpg" alt=""/> 澳大利亚高帮鞋纯羊毛/css毛线 ￥25.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=843"><img src="http://www.woaicss.com/works/pic/2.jpg" alt=""/> [迎国庆]经典百搭纪念款情侣CSS支持非常好 ￥65.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=842"><img src="http://www.woaicss.com/works/pic/3.jpg" alt=""/> 优雅甜蜜气质 毛呢配真毛领 机车款外套CSS ￥215.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=841"><img src="http://www.woaicss.com/works/pic/4.jpg" alt=""/> 超显瘦 韩版九分裤 ￥9.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=838"><img src="http://www.woaicss.com/works/pic/5.jpg" alt=""/> 抢！双冠促销黄金假期【全CSS列表 ￥120.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=835"><img src="http://www.woaicss.com/works/pic/6.jpg" alt=""/> 特价！冲4冠 热销万条 超显CSS实例 ￥32.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=834"><img src="http://www.woaicss.com/works/pic/7.jpg" alt=""/> 实拍 抓绒套头帽衫带帽长袖加厚卫衣外套 ￥99.0</a></li>
 <li><a href="http://www.woaicss.com/article.asp?id=833"><img src="http://www.woaicss.com/works/pic/8.jpg" alt=""/> 庆三冠!零利润纯牛皮女单鞋!销量冲万!人气款CSS优化最佳实践六则 ￥125.0</a></li>
</ul>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

下面来写CSS样式：

Example Source Code

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

整体布局声明，设置body的内外边距均为零，设置文字大小为12px。当然还可以根据具体需要添加。

Example Source Code

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

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

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

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

Example Source Code

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

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

Example Source Code

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

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可能此效果无效，而在IE6、IE7与FF中一切正常。在不影响布局的情况下，某些细节不赞成用CSS HACK。所以就此结束此案例的编写。我们可以查看最终的效果。

HTML代码

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; 
}

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 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;
}

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

ul li a strong { 
    display:block; 
    width:82px; 
    height:30px; 
    line-height:15px;
    font-weight:100; 
    color:#333; 
    overflow:hidden;
}
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;
}

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

</style>

</head>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 woniu 于 2009-10-05 09:14 AM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: div+css布局实例图文混排 css排版淘宝网图文混排

相关日志:

评论: 0 | 引用: 0 | 查看次数: -

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.