javascript
HTML+CSS+JavaScript复习笔记持更（二）——列表篇
列表
- 無序列表
- 標(biāo)簽寫法
- 屬性
- 有序列表
- 標(biāo)簽寫法
- 屬性
- 列表嵌套
- 定義列表的嵌套
- 有序列表和無序列表的嵌套
列表在html中至關(guān)重要，通常用于各種分類頁面，以某寶為例，其主頁面有大部分涉及到列表（綠色標(biāo)注區(qū)域）
列表有很多種
| <ul> | 無序列表 |
| <ol> | 有序列表 |
| <dir> | 目錄列表 |
| <dl> | 定義列表 |
| <menu> | 菜單列表 |
| <dt> 、<dd> | 定義列表的標(biāo)簽 |
| <li> | 列表項目的標(biāo)簽 |
實際當(dāng)中常用的列表主要是無序列表和有序列表兩種
本文將主要對兩種列表分別解釋
無序列表
有序列表，不分先后，沒有順序的列表項目，但默認(rèn)每個列表前會有一個標(biāo)識符號，例如：
標(biāo)簽寫法
<ul><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li></ul>在無序列表中，主要使用<ul>、</ul>表示無序列表的開始和結(jié)束，而里面的<li>、</li>標(biāo)簽是表示一列表中的項目的開始和結(jié)束
屬性
默認(rèn)情況下，無序列表的標(biāo)識符號是●，通過type參數(shù)即可設(shè)置不同的標(biāo)識符號，語法如下：
<ul type=circle><li>這是無序列表</li><li type=square>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li><li>這是無序列表</li></ul>由上述例子可以發(fā)現(xiàn)，既可以對單個li標(biāo)簽項目進(jìn)行設(shè)置，也可以在ul標(biāo)簽中對所有項目進(jìn)行設(shè)置，單個li標(biāo)簽的type屬性會覆蓋ul列表上設(shè)置的type。
type 的屬性值一共有4種：
- disc ●
- square ■
- circle ○
- none
-默認(rèn)屬性是disc
實際應(yīng)用中，如果無特殊需求，一般在ul上設(shè)置css樣式：list-style:none;用以清除列表項目的標(biāo)識符號
有序列表
有序列表，按照語義上解釋是按照數(shù)值或者字母等順序排列的列表項目，例如：
標(biāo)簽寫法
在無序列表中，主要使用<ol>、</ol>表示無序列表的開始和結(jié)束，而里面的<li>、</li>標(biāo)簽是表示一列表中的項目的開始和結(jié)束
<ol><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li></ol>屬性
在默認(rèn)情況下，使用數(shù)字序號進(jìn)行排序。有序列表中同樣提供了type屬性，用于調(diào)整序號的類型，例如修改成字母排序:
<ol type="a"><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li><li>這是有序列表</li></ol>
type屬性對應(yīng)表
| 1 | 數(shù)字1,2,3,4 |
| a | 英文字母a,b,c,d |
| A | 英文字母A,B,C,D |
| i | 羅馬數(shù)字ⅰ,ⅱ,ⅲ,ⅳ |
| I | 羅馬數(shù)字Ⅰ,Ⅱ,Ⅲ,Ⅳ |
列表嵌套
列表的嵌套是為了完成多級項目列表，其主要意思是在一層列表下再創(chuàng)建一級或者n級列表，聽起來有點想目錄的意思，一級標(biāo)簽，二級標(biāo)簽…
定義列表的嵌套
定義列表是含有兩個層次的列表，即它是兩層的，語法如下：
<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標(biāo)簽，我們可以理解為dt作為解釋標(biāo)簽，dd作為正文標(biāo)簽，以此作為一個沒有標(biāo)識符也沒有序號的列表嵌套
有序列表和無序列表的嵌套
在列表嵌套中，定義列表的嵌套使用還是較少的，常見的還是有序列表和無序列表互相嵌套，通常用于網(wǎng)頁的導(dǎo)航欄
html部分代碼：
css部分代碼：
.mr-box {width: 1000px;height: 500px;background-image: url(./images/2.jpg);margin: 0 auto;background-size: 100% 100%;}* {margin: 0;padding: 0;}/*主導(dǎo)航樣式*/.mr-nav>ul, ol {width: 93%;margin: 0 auto;}.mr-nav {background: #DD2727;height: 37px;width: 1000px;}.mr-nav li {/*導(dǎo)航欄的li的樣式*/width: 176px;list-style: none;float: left;line-height: 37px;}.mr-hover:hover { /*當(dāng)鼠標(biāo)移動上去時導(dǎo)航欄變色*/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; /*字體粗細(xì)*/padding: 6px 17px; /*內(nèi)邊距*/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;}/* 商品分類子導(dǎo)航欄*/.mr-item li {width: 100%;}.mr-item li a { /* li的所有子元素a的樣式*/font-size: 14px;font-family: "微軟雅黑";color: #fff;}.mr-item li:hover { /*鼠標(biāo)滑過li時的樣式*/background: #fff;display: ;}.mr-item li a:hover { /*鼠標(biāo)滑過a時*/color: #DD2727}/*春節(jié)特賣子導(dǎo)航*/.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位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的HTML+CSS+JavaScript复习笔记持更（二）——列表篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML+CSS+JavaScript复
- 下一篇： HTML+CSS+JavaScript复