首页 > 开发 > CSS > 正文

DivCSS布局实例:很实用的图文混排CSS列表-富有语义

2024-07-11 08:40:40
字体:
来源:转载
供稿:网友
  DivCSS布局实例:很实用的图文混排CSS列表 - 富有语义


  CSS网页布局的一大特点就是列表元素的应用,在传统的表格布局中往往将列表元素作为表格来处理,这样的方式非但不具有语义还产生了许多不必要的代码。

  今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点,然后编写HTML代码,最终应用CSS样式实现最终的效果。

列表的效果如图所示:


  最顶部是栏目名称“武林网 MB5U.com ”与栏目导航“CSS酷站欣赏 DivCSS教程 CSS模板下载”。栏目名称用标题元素Hx来表示,栏目导航可以用ul li的无序列表。
  下部的三个链接区域形式基本雷同,左侧是图片链接,右侧是文章列表元素。将左侧的图片与文字看成是一个段落,用p标签来表示,右侧的文章列表用ul li的无序列表。

有了上面的分析开始下面的HTML编码:

示例代码 [www.CuoXIn.com]
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表