列表

• 無序列表
• • 標簽寫法
  • 屬性
• 有序列表
• • 標簽寫法
  • 屬性
• 列表嵌套
• • 定義列表的嵌套
  • 有序列表和無序列表的嵌套

列表在html中至關重要，通常用于各種分類頁面，以某寶為例，其主頁面有大部分涉及到列表（綠色標注區域）

列表有很多種

標簽描述

<ul>	無序列表
<ol>	有序列表
<dir>	目錄列表
<dl>	定義列表
<menu>	菜單列表
<dt> 、<dd>	定義列表的標簽
<li>	列表項目的標簽

實際當中常用的列表主要是無序列表和有序列表兩種

本文將主要對兩種列表分別解釋

無序列表

有序列表，不分先后，沒有順序的列表項目，但默認每個列表前會有一個標識符號，例如：

標簽寫法

<ul><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li></ul>

在無序列表中，主要使用<ul>、</ul>表示無序列表的開始和結束，而里面的<li>、</li>標簽是表示一列表中的項目的開始和結束

屬性

默認情況下，無序列表的標識符號是●，通過type參數即可設置不同的標識符號，語法如下：

<ul type=circle><li>這是無序列表</li><li type=square>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li></ul>

由上述例子可以發現，既可以對單個li標簽項目進行設置，也可以在ul標簽中對所有項目進行設置，單個li標簽的type屬性會覆蓋ul列表上設置的type。

type 的屬性值一共有4種：

• disc ●
• square ■
• circle ○
• none
  -默認屬性是disc

實際應用中，如果無特殊需求，一般在ul上設置css樣式：list-style:none;用以清除列表項目的標識符號

有序列表

有序列表，按照語義上解釋是按照數值或者字母等順序排列的列表項目，例如：

標簽寫法

在無序列表中，主要使用<ol>、</ol>表示無序列表的開始和結束，而里面的<li>、</li>標簽是表示一列表中的項目的開始和結束

<ol><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li></ol>

屬性

在默認情況下，使用數字序號進行排序。有序列表中同樣提供了type屬性，用于調整序號的類型，例如修改成字母排序:

<ol type="a"><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li></ol>

type屬性對應表

type取值序號類型

1	數字1,2,3,4
a	英文字母a,b,c,d
A	英文字母A,B,C,D
i	羅馬數字ⅰ,ⅱ,ⅲ,ⅳ
I	羅馬數字Ⅰ,Ⅱ,Ⅲ,Ⅳ

列表嵌套

列表的嵌套是為了完成多級項目列表，其主要意思是在一層列表下再創建一級或者n級列表，聽起來有點想目錄的意思，一級標簽，二級標簽…

定義列表的嵌套

定義列表是含有兩個層次的列表，即它是兩層的，語法如下：

<dl><dt>這是解釋1</dt><dd>這是正文1</dd><dd>這是正文2</dd><dd>這是正文3</dd><dt>這是解釋2</dt><dd>這是正文4</dd><dd>這是正文5</dd><dd>這是正文6</dd></dl>

在定義列表中，一個dt’下可以有多個dd標簽，我們可以理解為dt作為解釋標簽，dd作為正文標簽，以此作為一個沒有標識符也沒有序號的列表嵌套

有序列表和無序列表的嵌套

在列表嵌套中，定義列表的嵌套使用還是較少的，常見的還是有序列表和無序列表互相嵌套，通常用于網頁的導航欄

html部分代碼：

<ul><li class="mr-hover"><a href="#">商品分類</a><div class="mr-item"><ol><li>女裝</li><li>男裝</li></ol></div></li><li class="mr-hover"><a href="#">春節特賣</a><div class="mr-shopbox"><ol><li>服裝服飾</li><li>母嬰會場</li></ol></div></li><li class="mr-hover"><a href="#">家用電器</a></li><li class="mr-hover"><a href="#">會員</a></li><li class="mr-hover"><a href="#">登錄</a></li></ul>

css部分代碼：

.mr-box {width: 1000px;height: 500px;background-image: url(./images/2.jpg);margin: 0 auto;background-size: 100% 100%;}* {margin: 0;padding: 0;}/*主導航樣式*/.mr-nav>ul, ol {width: 93%;margin: 0 auto;}.mr-nav {background: #DD2727;height: 37px;width: 1000px;}.mr-nav li {/*導航欄的li的樣式*/width: 176px;list-style: none;float: left;line-height: 37px;}.mr-hover:hover { /*當鼠標移動上去時導航欄變色*/background: rgba(255,255,255,0.1);}.mr-shopbox ul {padding-top: 4px;padding-left: 20px;}.mr-nav li a {text-decoration: none; /*無下劃線*/font-size: 17px;font-weight: 500; /*字體粗細*/padding: 6px 17px; /*內邊距*/color: #aaaaaa;font-family: "微軟雅黑";}.mr-nav li:hover ul div, .mr-nav li:hover ol div {display: block;}.mr-nav li ol div {width: 179px;display: block;background: rgba(0,255,255,0.5);}.mr-nav li ul div {width: 185px;display: block;background: rgba(0,255,255,0.5);}.mr-shopbox li {width: 153px;height: 32px;text-align: center;line-height: 32px;margin-top: 15px;border: 1px solid #CB0C10;border-radius: 10px; }.mr-shopbox li:hover {background: #CB0C10;}.mr-item {display: none;background: #fff;}.mr-item:hover {display: inline-flexbox;background: #fff;}/* 商品分類子導航欄*/.mr-item li {width: 100%;}.mr-item li a { /* li的所有子元素a的樣式*/font-size: 14px;font-family: "微軟雅黑";color: #fff;}.mr-item li:hover { /*鼠標滑過li時的樣式*/background: #fff;display: ;}.mr-item li a:hover { /*鼠標滑過a時*/color: #DD2727}/*春節特賣子導航*/.mr-shopbox li a {text-decoration: none;COLOR: #FFF;font-size: 14px;font-family: "微軟雅黑";}.mr-shopbox {background: rgba(0,125,0,1);/*背景色*/width: 234px;height: 432px;}.mr-border {width: 1097px;height: 541px;border: 2px solid red;margin: 0 auto;} 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（二）——列表篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。