Dreamweaver8 DIV+CSS教程：HTML列表详解

"Dreamweaver8系列DIV+CSS教程html列表.pdf" HTML列表是网页设计中的基本元素，用于组织和展示信息。本教程聚焦于在Dreamweaver 8中使用HTML列表，结合CSS来创建和定制各种列表样式。下面将详细讨论相关知识点： 一、无序列表（ul）与有序列表（ol） 无序列表（ul）通常用于显示不需排序的项目，如导航菜单。在HTML中，我们使用`<ul>`标签来创建无序列表，而每个列表项则由`<li>`标签包裹。默认情况下，无序列表项前显示的是圆点，但通过CSS可以改变这个默认样式，比如设置为实心方块、空心圆等。 有序列表（ol）则用于显示需要顺序的项目，如步骤指南。使用`<ol>`标签创建有序列表，`<li>`标签同样用于包裹列表项。有序列表默认以数字为项目符号，但也可以通过CSS将其显示为无序列表样式。 二、改变项目符号样式或用图片定义项目符号 HTML列表的项目符号可以通过CSS的`list-style-type`属性进行更改。例如，将无序列表的项目符号更改为实心方块，可以使用`list-style-type: square;`。如果想使用自定义的图像作为项目符号，可以设置`list-style-image`属性，指定图像URL。 三、横向图文列表 在网页设计中，有时需要创建横向展示的列表，通常结合浮动（float）属性实现。将`<li>`元素设置为`float: left;`，可以让列表项并排显示。同时，若要在列表项中添加图片和文本，可以将它们放在同一个`<li>`元素内，并使用CSS调整它们的位置关系。 四、浮动后父容器高度自适应 当子元素（如`<li>`）设置浮动后，可能会导致父元素高度塌陷。为解决这个问题，可以使用clearfix类，或者在父元素上应用`overflow: auto;`或`display: flex;`来确保父容器能包裹住浮动的子元素。 五、IE6的双倍边距bug 在Internet Explorer 6（IE6）中，浮动的`<li>`元素会出现双倍边距问题，即设置的`margin`值会被浏览器加倍计算。为修复此bug，可以使用`display: inline;`或`display: list-item;`替代浮动。 通过Dreamweaver 8，用户可以方便地编辑和预览这些HTML列表，结合CSS实现丰富的样式设计。理解并掌握这些知识点，对于创建响应式和语义化的网页至关重要。通过实践和学习，你可以熟练地运用HTML列表来构建高效、美观的网站布局。