《li样式.docx》由会员分享，可在线阅读，更多相关《li样式.docx（7页珍藏版）》请在金锄头文库上搜索。
1、列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。1列表符号列表符号是指显示于每一个列表项目前的符号标识。基本格式如下：list-style-type：参数参数取值范围：disc：圆形circle：空心圆square：方块decimal：十进制数字lower-roman：小写罗马数字upper-roman：大写罗马数字l
2、ower-alpha：小写希腊字母upper-alpha：大写希腊字母none：无符号显示参数中的disc是默认选项。2图形符号图形符号指原来列表的项目符号将可以使用图形来代替。基本格式如下：list-style-image：URLURL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。3列表位置列表位置描述列表在何处显示。基本格式如下：list-style-position：参数参数取值范围：inside：在BOX模型内部显示outside：在BOX模型外部显示这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。 =使用无
3、序列表：即UL看一个最简单的例子： Item 1 Item 2 Item 3 Item 4这是一个未加修饰的纵向列表1：设置列表的边界#base border: 1px solid #000; margin: 2em; width: 10em; padding: 5px; html中这样写，就会呈现一个带边框的无序列表 Item 1 Item 2 Item 3 Item 42：设定列表的图像可以设定列表的样式为左边带一个图像，样式如下：ul list-style-type: disc; list-style-image: url(bullet.gif); list-style-position
4、: inside; disc表示实心的圆，list-style-image表示列表用到的小图像，如果这个图像的url不正确时，disc才会起作用，inside表示列表是在区块内部的。3：如何在段落中使用列表样式如下：#inline-list border: 1px solid #000; margin: 2em; width: 80%; padding: 5px; font-family: Verdana, sans-serif; #inline-list p display: inline; #inline-list ul, #inline-list li display: inline;
5、margin: 0; padding: 0; color: #339; font-weight: bold; 4：水平导航#h-contain padding: 5px; border: 1px solid #000; margin-bottom: 25px; #pipe ul margin-left: 0; padding-left: 0; display: inline; #pipe ul li margin-left: 0; padding: 3px 15px; border-left: 1px solid #000; list-style: none; display: inline;
6、 #pipe ul li.first margin-left: 0; border-left: none; list-style: none; display: inline; #h-contain定一个一个边界为1的区块，水平导航用的也是inline方式，li.first定义第一个列表元素没有左边那个象素为1的border。下面的样式是tab方式的水平导航：#tabs ul margin-left: 0; padding-left: 0; display: inline; #tabs ul li margin-left: 0; margin-bottom: 0; padding: 2px 15px 5px; border: 1px solid #000; list-style: none; display: inline; #tabs ul li.here border-bottom: 1px solid #ffc; list-style: none; display: inline; li的class如果为here，则是选中的
