整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

web前端开发课-css列表样式list-style

web前端开发课-css列表样式list-style #软件开发

eb 前端开发课程:css 列表模块。

讲课人:波波老师。

列表是 html 经常使用的标签,css 针对列表提供了如下的三个属性。

1.list-style-type:用于设置列表下标记的类型,例如方块、圆圈、数字或者字母。

2.list-style-image:可以使用图像来替代列表下的标记。

3.list-style-position:可以设定标记位于列表项的内部还是外部。

来看一下演示。

1.新建文件 list.html,建一个列表。

2.设置一下格式:style。

3.设置一下 list-style-type,可以看到默认的 disc,也就是点。

4.把它改一下,给它改成一个圆点,可以看到它就成了一个空心的点。

5.再改一下,它就变成了数字了。其实最重要的是有时候想要把这个点去掉,什么都不放就是 none。

6.再引入外部的图片:list-style-image,ur(image/flow.png')。

7.放在 image 里的 floor,可以看到这朵花就成了每个列表项前面的点缀。

8.还有一个就是先把 Li 做一个背景色,好看清楚它的位置:background-color。

9.可以看到现在花是在列表像的外面,设一下 list-style-position,把它做成 inside,可以看到花就跑到列表像的里边来了。

们知道在 HTML 中列表可以分为无序列表、有序列表、定义列表。在网页中经常可以看到无序列表的使用,例如像导航栏菜单、新闻列表、商品分类、图片展示等,基本都是通过无序列表来实现的。

无序列表中每个列表项前面都会默认带一个圆点符号,然而一般我们平时在网站上看到的列表样式,通常前面是没有圆点符号的,所以我们要如何去掉这个默认的圆点符号呢?这些都可以通过 CSS 中的列表属性来实现。

本节要讲的 CSS 中的列表属性有下面四个:


list-sytle-type

list-sytle-type 属性用于设置列表项的标记的类型,和 HTML 中列表标签中的 type 属性类似。

常用值属性值如下所示:

示例:

下面是一个没有添加任何样式的列表:

如果我们希望去掉列表前面默认的圆点,可以通过将 list-style-type 属性设置为 none 来实现:

ul{
    list-style-type: none;
}

在浏览器中的演示效果:

list-style-image

list-style-image 属性用于使用图像来替换列表项的标记。但有一点需要注意,如果我们设置了 list-style-image 属性,这个时候设置的 list-sytle-type 属性将不起作用。一般为了防止某些浏览器不支持 list-style-image 属性,我们会设置一个 list-style-type 属性来替代。

示例:

例如我们将上面列表项的标记设置为一个图像(图片大小为50x50),属性值为图像路径:

ul{
    list-style-image: url(./flower.png);
}

在浏览器中的演示效果:

list-style-position

list-style-position 属性用于设置在何处放置列表项标记。

属性值有如下所示:

示例:

例如我们可以设置两组不同的列表,分别将 list-style-position 属性设置为outside 和 inside 来进行对比:

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS学习(9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <ul class="ul1">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
            <li>第五项</li> 
        </ul>
        <ul class="ul2">
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
            <li>第四项</li>
            <li>第五项</li> 
        </ul>
    </body>
</html>

CSS 样式代码:

.ul1{
    list-style-position: inside;
}
.ul2{
    list-style-position: outside;
}

在浏览器中的演示效果:


可以明显的看到,第一组列表的标记放置在文本内,第二组列表的标记位于文本的左侧。

list-style

list-style 属性是一个简写属性,是上述几个列表属性的简写形式,用于把所有列表的属性设置在一个声明中。

属性设置顺序为:list-style-type、list-style-position、list-style-image,也可以不设置其中某个属性,如果不设置则采用默认值。

示例:

例如设置一个简写列表样式,其中 list-style-type 属性值为 square、list-style-position 属性值为 inside、list-style-image 属性值为 url(./flower.png):

ul{
    list-style:square inside url(./flower.png);
}

在浏览器中的演示效果:

本节我们讲了 CSS 中的几个列表样式,一般我们用的最多的就是如何去掉列表项的默认标记,即 list-style-type:none。

  • 设置自带的符号样式
  • 用图片设置符号样式
  • 取消符号


列表在网页里使用的频率非常高,对于新闻类的网站来说,就是百分百的使用。列表的前头一般都是阿拉伯数字,作为列表的顺序。

当然,列表项的前缀是不止阿拉伯数字,还有小圆点'●'、正方形'■'等等,这些都是自带的样式。如果你还不满意,还可以自定义前缀。

各种类型的列表符号


设置自带的符号样式

无论是有序列表,还是无序列表,都统一使用list-style-type属性来定义列表项符号。


语法:list-style-type:属性值;


有序列表自带的符号,都是跟顺序有关。

属性值

更换了前缀的有序列表如下

更换效果


无序列表自带的符号,都是小图标,跟顺序没关系

属性值


更换了前缀的无序列表如下

更换效果


列表项的图片符号

虽然列表项有自带样式,但很多时候都不是我们想要的效果,就可以使用自定义符号。通过list-style-image:url(图像地址)来设置。


语法:list-style-image:url(图像地址);


自定义列表项符号,实际上就是列表项符号改为一张图片


注意图片的尺寸要把握好,是无法修改大小


代码设置如下

设置图片


自定义前缀的列表效果如下

自定义列表符号


取消列表项的符号

list-style-type属性,实际上更多的使用在取消符号上,几乎能用到都是在这一点上

几乎所有的前端框架,在重置样式的时候,都是使用这个来取消列表项的默认符号


语法:list-style-type:none;


新闻类网站,都会有部分列表项是没有前缀符号

空白列表符号


总结