1）无序列表

基本语法



功能

    标签定义无序列表。
    将
      标签与
    • 标签一起使用，创建无序列表。

      列表样式类型


        type=”none” 无样式
        type=”disc”实心圆 (默认值)
        type=”circle”空心圆
        type=”square”实心方块

        css设置列表样式

        基本语法

        ul{
        样式名:值;
        }
        li{
        样式名:值;
        }

        示例

        1. 1、ul标签样式           
        3.         ul{
        4.             list-style-type:none;
        5.             margin:0px auto;
        6.             padding:0px;
        7.             background-color:#000000;
        8.             color:#ffffff;
        9.             display:flex;
        10.             justify-content:center;    
        11.         }
        13.         list-style-type:none;  设置列表样式类型无
        14.         margin:0px auto;  设置上下外延边距为0，左右外延边距距中
        15.         padding:0px;  设置内部边距为0
        16.         background-color:#000000;  设置背景色为黑色
        17.         color:#ffffff;  设置文字颜色为白色
        18.         display:flex;  设置ul标签为弹性容器
        19.         justify-content:center;  设置容器内容距中
        21.     2、li标签样式           
        23.         li{
        24.             width:200px;
        25.                 line-height:50px;
        26.                 text-align:center;
        27.                 background-size:100% 100%;
        28.         }
        30.         width:200px;  设置宽度为200像素
        31.         line-height:50px;  设置行高为50像素
        32.         text-align:center;  设置文本距中
        33.         background-size:100% 100%;   设置背景图大小长100%、高100%显示
        35.     3、:nth-of-type()           
        37.         ul li:nth-of-type(6){
        38.             background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");
        39.           }
        41.         ul li:nth-of-type(6)  选择ul下第6个li元素
        42.         background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");  设置背景图
        46.     4、:not(id)           
        48.         ul li:not(#first){
        49.             background-color:green;
        50.         }
        52.         ul li:not(#first)   选择ul下除id为first的li标签以外的元素
        53.         background-color:green;  设置背景颜色为绿色

        2）有序列表

        有序列表也是一列项目，列表项目使用数字进行标记。
        有序列表始于

          标签。每个列表项始于
        1. 标签。

          基本语法


          1. Coffee

          2. Milk

          属性 值 描述
          compact compact HTML5 中不支持。HTML 4.01 中不赞成使用。
          规定列表呈现的效果比正常情况更小巧。
          reversed reversed 规定列表顺序为降序。(9,8,7…)
          start number 规定有序列表的起始值。
          type
          - 1
          - A
          - a
          - I
          - i
          		 规定在列表中使用的标记类型。

          3）定义列表

          自定义列表不仅仅是一列项目，而是项目及其注释的组合。
          自定义列表以

          标签开始。每个自定义列表项以
          开始。每个自定义列表项的定义以
          开始。

          基本语法


          Coffee

          Black hot drink

          Milk

          White cold drink


          浏览器显示如下：
          Coffee
          Black hot drink
          Milk
          White cold drink
          注：定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。