上下结构的图文混排CSS列表
天我们共同学习一款经常能用到的 图文混排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 []
将所有的元素放入id 为wrap 的层中,设置它的边框颜色为#e5f2f8,这是为了让他看起来有阴影的效
果,
然后再他的内部建立一个层list,在list 的内部建立三个层,分别是:
Example Source Code []
list_title
list_pic
list_text
下面开始具体深入的编写HTML 代码:
Example Source Code []