学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(八) 列表样式

发布时间:2020-01-04点击:

    在CSS中有两种列表,即有序列表及无序列表,在CSS样式中可以设置这两种列表的项目标记类型,项目标记图像以及项目标记的位置。

    一、设置列表项标记类型

    在CSS中设置列表项标记的属性是list-style-type,它的取值有很多中,如circle空心圆,square实心方块等,语法如下:

    ul.a {list-style-type: circle;}
    ul.b {list-style-type: square;}

    二、设置列表项标记为图像

    在CSS中,可以设置列表的项标记为图像(当然不要太大,与原配大小不大,不然影响美观),使用的属性是:list-style-image,语法如下:

    ul
    {
        list-style-image: url('sqpurple.gif');
    }

    其中url('sqpurple.gif')是项目标记图像。

    三、设置列表项标记位置

    在CSS中设置列表的项标记位置的属性是list-style-position,其值有两种,一种是inside另一种的outside,区别如下:

    语法如下:

    ul {
        list-style-position: inside;
    }

    四、属性简写

    属性简写使用的是:

    ul
    {
        list-style: square url("sqpurple.gif");
    }
    其中设置顺序是:

    1、list-style-type

    2、list-style-position

    3、list-style-image

    列表属性一览表:

    序号
    属性
    描述
    1
    list-style
    列表的简写属性
    2
    list-style-image
    设置列表项标记为图像
    3
    list-style-postion
    设置列表项标记的位置
    4
    list-style-type
    设置列表项标记的类型
    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接