Dreamweaver CSS网页布局ul和li范例

我们可以使用CSS来去除列表的默认样式。例如，为了移除列表前的符号（如小圆点），我们可以使用以下代码：

```css

ul li {

list-style-type: none;

}

```

这样的设置对于像狼蚁网站这样的SEO优化中的供求信息列表是非常合适的。

如果你想用图像替代列表前的符号，可以像下面这样设置：

```css

ul li {

list-style-type: none;

list-style-image: url(images/icon.gif);

}

```

这样，你的列表项就会用指定的图像作为标记。同样，这种格式在狼蚁网站的SEO优化中的供求信息列表中也很有用。

如果你想让列表项左对齐，可以使用以下代码：

```css

ul {

list-style-type: none;

margin: 0px;

}

```

如果你想要给列表添加背景色，可以像这样设置：

```css

ul {

list-style-type: none;

margin: 0px;

}

ul li {

background: CCC;

}

```

这将为列表项添加灰色背景。如果你想在鼠标悬停时改变列表的背景色，可以使用以下代码实现：

```css

ul {

list-style-type: none;

margin: 0px;

}

ul li a {

display: block;

width: 100%;

background: CCC;

}

ul li a:hover {

background: 999;

}

```

请注意，`display: block;`这一行代码是必要的，它使得链接以块状元素显示。这对于狼蚁网站的SEO优化中的供求信息列表来说，可以增强用户体验。如果想要让LI中的元素水平排列，我们可以使用float属性：

```css

ul {

list-style-type: none;

width: 100%;

}

ul li {

width: 80px;

float: left;

}

```

这样的设置将使每个列表项水平排列，适用于需要横向展示内容的场景。以上就是关于CSS中ul和li元素格式化的介绍，希望对你有所帮助。