1.无序列表（ul）

各个列表项之间没有顺序之分，通常是并列的


  1. 语法：
  2. <ul>
  4.         <li></li>
  6.     </ul>
  8. 功能：
  9. <ul> 标签定义无序列表。
  11.                 将 <ul> 标签与<li>标签一起使用，创建无序列表。

2.案例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <style type="text/css">
  6.     ul{
  7.         list-style-type:none;
  8.          margin:0px auto;
  9.         padding:0px;
  10.         background-color:#000000;
  11.         color:#ffffff;
  12.         display:flex;
  13.         justify-content:center;    
  14.     }
  15.     li{
  16.          width:200px;
  17.         line-height:50px;
  18.         text-align:center;
  19.         background-size:100% 100%;
  20.       }
  21.     ul li:nth-of-type(6){
  22.         background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");
  23.     }
  24.     ul li:not(#first){
  25.         background-color:green;
  26.       }
  27. </style>
  28. </head>
  29. <body>
  31.     <ul>
  32.         <li id="first">首页</li>
  33.         <li>国内新闻</li>
  34.         <li>国际新闻</li>
  35.         <li>体育新闻</li>
  36.         <li>财经新闻</li>
  37.         <li>娱乐新闻</li>
  38.     </ul>
  40. </body>
  41. </html>1  ·

image.png

  1. 代码讲解：  
  2. ul{
  4.             list-style-type:none;
  6.             margin:0px auto;
  8.             padding:0px;
  10.             background-color:#000000;
  12.             color:#ffffff;
  14.             display:flex;
  16.             justify-content:center;    
  18.         }
  20.         list-style-type:none;  设置列表样式类型无
  22.         margin:0px auto;  设置上下外延边距为0，左右外延边距距中
  24.         padding:0px;  设置内部边距为0
  26.         background-color:#000000;  设置背景色为黑色
  28.         color:#ffffff;  设置文字颜色为白色
  30.         display:flex;  设置ul标签为弹性容器
  32.         justify-content:center;  设置容器内容距中
  36.     2、li标签样式           
  38.         li{
  40.             width:200px;
  42.                 line-height:50px;
  44.                 text-align:center;
  46.                 background-size:100% 100%;
  48.         }
  50.         width:200px;  设置宽度为200像素
  52.         line-height:50px;  设置行高为50像素
  54.         text-align:center;  设置文本距中
  56.         background-size:100% 100%;   设置背景图大小长100%、高100%显示
  60.     3、:nth-of-type()           
  62.         ul li:nth-of-type(6){
  64.             background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");
  66.           }
  68.         ul li:nth-of-type(6)  选择ul下第6个li元素
  70.         background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");  设置背景图
  74.     4、:not(id)           
  76.         ul li:not(#first){
  78.             background-color:green;
  80.         }
  82.         ul li:not(#first)   选择ul下除id为first的li标签以外的元素
  84.         background-color:green;  设置背景颜色为绿色