网页设计中的列表设计

列表标志位置

网页建设中还可以做一件事来影响列表项的外观，即确定标志出现在列表项内容之外还是在内容内部。这是利用list-style-position完成的。

如果标志的位置设置为outside（默认值），则显示与一般Web上列表项的显示无二。不过，在网页设计时，如果你需要一个稍微不同的外观，可以把这个值设置为inside，将标志拉向内容，这会使标志放在列表项的内容“以内”。对于具体如何做没有明确定义，不过下面显示了一种可能的做法：

li.first {list-style-position: inside;}

li.second {list-style-position: outside;}

list-style-position

值：inside | outside | inherit

初始值：outside

应用于：display 值为list-item 的元素

继承性：有

计算值：根据指定确定

简写列表样式

为简单起见，可以将以上3个列表样式属性合并为一个方便的属性：list-style。

list-style

值：[||||] inherit

初始值：相对于各个属性。

应用于：display 值为list-item 的元素

继承性：有

计算值：见单个属性

例如：

li (list-style: url(ohio.gif) square inside;}

list-style的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其他的就会填入其默认值。例如，以下两个规则有同样的视觉效果：

li.norm {list-style: url(img42.gif);}

li.odd {list-style: urr(img42.gif) disc outside;}/* the same thing */

还可以用同样的方法覆盖之前的规则。例如：

li {list-style-type: square;}

li.norm {list-style: url(img42.gif);)

li.odd {list-style: urr(img42.gif) disc outside;}/* the same thing */

其结果与图上面所示相同，因为规则li.norm隐含的list-style-type值disc会覆盖先前声明的square值，同样地，li.odd规则中显式声明的值disc也会覆盖先前声明的square值。

列表布局

前面已经了解了应用列表标志样式的基本知识，下面来考虑不同浏览器中列表如何布局。

从列表项周围的边框可以看出，它们就像是块级元素。实际上，值list-item确实定义为生成块框。

标志和列表项内容之间的距离在网页建设中未定义，CSS2.1也没有提供任何方法来控制这个距离。有意思的是，CSS2倒是提到过，这个内容将在“列表标志定位”中简单介绍。

如果标志放在列表项内容之外，它们不会影响其他元素的布局，也不会影响列表项本身的布局。它们只是离内容边界有一段距离，只要内容边界移动，标志也会跟着轸动。标志的行为就像是标志相对于列表项内容绝对定位一样，比如说position: static; left:如果标志在列表项内容内部，则相当于放在内容开始处的一个行内元素。

迄今为止，还没有增加具体的列表容器，换句话说，没有ul也没有ol元素。

类似于列表项，列表元素也是一个块框，其中包含所有后代元素。不过，可以看到，标志不仅放在列表项内容之外，也放在列表元素的内容区外。在此并没有指定列表通常有的“缩进”。

在写作本书时，大多数浏览器会通过设置列表元素的内边距或外边距来完成列表项的缩进。例如，用户代理可能应用以下规则：

ul, ol {margin-left: 40px;}

这是Internet Explorer和Opera采用的规则，大多数基于Gecko的浏览器则使用类似下面的规则：

ul, ol {padding-left: 40px;}

不能说这两种做法不正确，但是如果你想消除列表项的缩进，二者的差异会导致一些问题。

注意：这里40px的距离是从较早的Web浏览器继承来的，早先的浏览器会把列表缩进一定的像素数。更好的值可能是2.5em，因为这样一来，缩进就可以随文本大小的变化而调整。

如果创作人员在网页设计时想改变列表的缩进距离，强烈建议你同时指定内边距和外边距，以确保跨浏览器兼容性。

如果想用外边距，可以写作：

ul {margin-left: 1em; padding-left: 0;}

不论哪一种情况，要记住标志总会相对于列表项的内容放置，因此可能会“挂”在文档主文本之外，甚至超出浏览器容器边界。

列表标志定位

许多创作人员都希望有这样一个特性，能够控制标志与列表项内容之间的间隔。CSS2定义了一些办法来做到这一点，这包括一个名为marker-off set的属性和一个display值marker，从具体的实现来看，这是一个很笨拙的办法，所以这些特性已经从CSS2.1中去除了。

写作本书时，CSS3列表模型的当前工作革案定又了一个更闻洁的新方法来影响标志位里，即：：marker伪元素。饭设这个模块在成为完备推荐之前没有改动，有朝一日你可能可以编写类似li::marker {margin-right: 0.125em;}的规则，使标志与列表项内容之间有适当的距离，而不用把标志放在内容内部。

新闻标题：网页设计中的列表设计
分享URL：/news1/159451.html

成都网站建设公司_创新互联，为您提供网页设计公司、移动网站建设、企业网站制作、网站导航、自适应网站、品牌网站制作

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联