上下结构的图文混排CSS列表

今天我们共同学习一款经常能用到的“图文混排 CSS列表”的制作。首先从分析一下此列表的特点，然后编写 HTML代码，最终应用 CSS样式实现最终的效果。在 以前的文章中，有着许多相似的页面元素的 CSS布局教程。您还可以参考： DivCSS布局实例：很实用的图文混排 CSS列表 -富有语义 /article.asp?id=669 DivCSS实例教程：新颖别致的网站栏目列表元素 /article.asp?id=759定义列表 dl打造图文并茂的 CSS列表元素 /article.asp?id=813

本实例的效果：

本文作者：李想如需转载请建立本站链接(/),并且不得随意改动文章内容、保留此版权声明文本！最顶部的是栏目的名称我爱 52css与更多，然后下面分两个块，一块显示缩略图片，另一块显示文字连接，这两个部分都可以通过 ul+li来实现。有了上面的分析开始下面的 HTML编码：

Example Source Code[]

<div id="wrap"><div class="list"><div class="list_title"></div><ul class="list_pic"></ul><ul class="list_text"></ul></div></div>

将所有的元素放入 id为 wrap的层中，设置它的边框颜色为#e5f2f8,这是为了让他看起来有阴影的效果，然后再他的内部建立一个层 list,在 list的内部建立三个层，分别是：

Example Source Code[] list_title list_pic list_text

下面开始具体深入的编写 HTML代码：

Example Source Code[]<div id="wrap"><div class="list"><div class="list_title"><h3>我爱 52css</h3><span><a href="#">更多</a></span></div><ul class="list_pic"><li><a href="/"><img src="img/tu_04.png"/></a><span><a href="h ttp:///"></a></span></li>

<li><a href="/default.asp?cateID=9"><img src="img/tu_01.png"/></ a><span><a href="/default.asp?cateID=9">DivCSS布局实例</a></span></li><li><a href="/css_template/"><img src="img/tu_02.png"/></a><spa n><a href="/css_template/">模版下载</a></span></li><li><a href="/default.asp?cateID=3"><img src="img/tu_03.png"/></ a><span><a href="/default.asp?cateID=3">DivCSS教程</a></span></li></ul><div class="clear"></div><ul class="list_text"><li><span>[2007-09-11]</span> <a href="/article.asp?id=813">定义列表 dl打造图文并茂的 CSS列表元素</a></li><li><span>[2007-09-11]</span> <a href="/article.asp?id=720">CSS网页布局实例：以合适的标签创建具有语义的表格</a></li><li><span>[2007-09-11]</span> <a href="/article.asp?id=669">DivCS S布局实例：很实用的图文混排 CSS列表 -富有语义</a></li><li><span>[2007-09-11]</span> <a href="http://ww

/article.asp?id=666">DivCS S布局实例用 dl dt dd来制作列表</a></li><li><span>[2007-09-11]</span> <a href="/article.asp?id=636">DivCS S布局实例：三行单列上下固定高度中间自适应</a></li></ul><div class="clear"></div></div><div class="clear"></div></div>

在 list_title层内 h3左浮动创建标题，span右浮动创建更多连接在 list_pic层内创建 ul+li图片左浮动；在 list_text层内创建 ul+li创建新闻列表；

在最底部，放置一个类为clear的层来清除浮动。 有了上面的基础开始下面的CSS编码： 整体声明：

Example Source Code

.list_title{ width:426px; padding:0 10px; border:1px solid #fff; background:#f2e9da; height:22px; line-height:22px;}

.list_title h3{ float:left; width:300px;}

.list_title span{ float:right; width:60px; text-align:right;}

图片层list_pic的样式定义： 首先觉定使用ul列表，宽度设定为433px； 需要注意的是内边距的设置：padding:15px 0 0 15px;

（右侧内边距之所以设置为0，是因为li的间距问题，这样更有力页面的表现，您也可以将它设置为：padding:15px 15px 0 15px;对比效果）

li设置图片块的大小94px，间距margin:0 14px 0 0;

鼠标悬停的情况下图片的边框颜色由蓝色变成灰色；

设置链接文字样式，

将span转换为块元素。span内的链接同样转换为块元素，设置宽度与高度分别是94px; 20px；行距设置为20px；文字水平居中对齐。

Example Source Code

.list_text{width:426px; margin:10px; padding:10px 0 0; border-top:1px dotted#2764b4;} .list_text li{ float:left; width:100%; line-height:22px;} .list_text li span{ float:right; text-align:right;}

最后是清除浮动：.clear{ clear:both;}

▲▲▲>>>点击查看最终的“上下结构的图文混排 CSS列表”效果<<<

本文作者：李想如需转载请建立本站链接(/),并且不得随意改动文章内容、保留此版权声明文本！

Article Provenance: 52CSS Article Tags:评论: 6|查看次数: 21265

1|2|> tututhirteen[2009-07-07 10:11 AM]对不起大家，我把数看出错了！明白了。呵呵 tututhirteen[2009-07-07 10:00 AM]为什么 list_title的宽度是 426px,不应该是 458-10*2-2=436px么？? psy5choit[2009-06-16 05:13 PM]学习了。。 cachinnation[2008-12-29 11:09 AM] TO abode001:因为 list_pic的文字只有一行，不是列表 fangfeng335[2008-09-18 03:36 PM]为什么.list_pic li中的 display用 inline属性，而不用:block属性

本文来源：https://www.bwwdw.com/article/g5wj.html