(1)ul列表（无序）

基本语法




例子

  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;
  20.       background-size:100% 100%;
  21.     }
  22.   ul li:nth-of-type(6){
  23.     background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");
  24.   }
  25.   ul li:not(#first){
  26.       background-color:green;
  27.     }
  28. </style>
  29. </head>
  30. <body>
  32.   <ul>
  33.     <li id="first">首页</li>
  34.       <li>国内新闻</li>
  35.     <li>国际新闻</li>
  36.     <li>体育新闻</li>
  37.     <li>财经新闻</li>
  38.     <li>娱乐新闻</li>
  39.   </ul>
  40. </body>
  41. </html>

image.png

(2)ol有序列表

基本语法

<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>

(3)dl元素（定义列表）

定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。

<dl>
  <dt>名词1</dt>
      <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
  <dt>名词2</dt>
      <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    <dd>名词2解释3</dd>
</dl>