ul中的li样式

作者:青山常在人不老   阅读 (1569)  |  收藏 (0)  |  点赞 (0)

摘要

通用的ul中的li样式


原文链接:ul中的li样式

列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉。

样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。

1.列表符号

列表符号是指显示于每一个列表项目前的符号标识。基本格式如下:

list-style-type:参数

参数取值范围:

·disc:圆形
·circle:空心圆
·square:方块
·decimal:十进制数字
·lower-roman:小写罗马数字
·upper-roman:大写罗马数字
·lower-alpha:小写希腊字母
·upper-alpha:大写希腊字母
·none:无符号显示

参数中的disc是默认选项。

2.图形符号

图形符号指原来列表的项目符号将可以使用图形来代替。基本格式如下:

list-style-image:URL

URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。

3.列表位置

列表位置描述列表在何处显示。基本格式如下:

list-style-position:参数

参数取值范围:

·inside:在BOX模型内部显示
·outside:在BOX模型外部显示

这里又出现了一个新的概念:BOX模型。BOX是指一种容器,包含了应用样式规则的对象,具体介绍将在后文中给出。

使用无序列表:即UL

看一个最简单的例子:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

这是一个未加修饰的纵向列表

4、设置列表的边界

#base { 
    border: 1px solid #000; 
    margin: 2em; 
    width: 10em; 
    padding: 5px; 
}

html中这样写,就会呈现一个带边框的无序列表

<div id="base">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</div>

5、设定列表的图像可以设定列表的样式为左边带一个图像,

样式如下:

ul { 
    list-style-type: disc; 
    list-style-image: url(bullet.gif); 
    list-style-position: inside;
}

disc表示实心的圆,

list-style-image表示列表用到的小图像,如果这个图像的url不正确时,disc才会起作用,inside表示列表是在区块内部的。

6、如何在段落中使用列表样式如下:

#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; 
    margin: 0; 
    padding: 0; 
    color: #339; 
    font-weight: bold;
}

7、水平导航

#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;
}
#pipe ul li.first {
    margin-left: 0; 
    border-left: none; 
    list-style: none; 
    display: inline;
}

#h-contain定一个一个边界为1的区块,水平导航用的也是inline方式,

li.first定义第一个列表元素没有左边那个象素为1的border。

8、下面的样式是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,则是选中的

分类   前端配置
字数   2273

博客标签    ul li样式  

评论