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

天我们共同学习一款经常能用到的 图文混排CSS 列表”的制作。首先从分析一下此列表的特点，然后 编写HTML 代码，最终应用CSS 样式实现最终的效果。在52CSS.com 以前的文章中，有着许多相似的页 面元素的CSS 布局教程。您还可以参考： DivCSS 布局实例：很实用的图文混排CSS 列表- 富有语义 /article.asp?id=669 DivCSS 实例教程：新颖别致的网站栏目列表元素 /article.asp?id=759 定义列表dl 打造图文并茂的CSS 列表元素 /article.asp?id=813 本实例的效果： 本文作者：52CSS.com 李 如需转载请建立本站链接（/），并且不得随意改 动文章内容、保留此版权声明文本！ 最顶部的是栏目的名称我爱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 spana href=#更多/a/span /div ul class=list_pic lia href=/img src=img/tu_04.png //aspana href=h ttp:///52/a/span/li lia href=/default.asp?cateID=9img src=img/tu_01.png // aspana href=/default.asp?cateID=9DivCSS 布局实例/a/span/li lia href=/css_template/img src=img/tu_02.png //aspa na href=/css_template/模版下载/a/span/li lia href=/default.asp?cateID=3img src=img/tu_03.png // aspana href=/default.asp?cateID=3DivCSS 教程/a/span/li /ul div class=clear/div ul class=list_text lispan[2007-09-11]/span•a href=/article.asp?id=813定义 列表dl 打造图文并茂的CSS 列表元素 /a/li lispan[2007-09-11]/span•a href=/article.asp?id=720CSS 网页布局实例：以合适的标签创建具有语义的表格/a/li lispan[2007-09-11]/span•a href=/article.asp?id=669DivCS S 布局实例：很实用的图文混排CSS 列表- 富有语义 /a/li lispan[2007-09-11]/span•a href=/article.asp?id=666DivCS S 布局实例用dl dt dd 来制作列表 /a/li lispan[2007-09-11]/span•a href=/article.asp?id=636DivCS S 布局实例：三行单列上下固定高度 中间自适应 /a/li /ul div class=clear/div /d