項(xiàng)目06

網(wǎng)頁中列表的應(yīng)用任務(wù)6-2使用列表制作復(fù)雜導(dǎo)航任務(wù)6-2使用列表制作復(fù)雜導(dǎo)航

知識點(diǎn)掌握列表的嵌套及其樣式技能點(diǎn)學(xué)會使用列表制作多級導(dǎo)航菜單能夠熟練設(shè)置多級列表的樣式一、列表的嵌套在使用列表時(shí)，列表項(xiàng)中也有可能包含若干子列表項(xiàng)。無序列表和有序列表不僅可以自身嵌套，而且可以互相嵌套。一、列表的嵌套【例6-2-1】列表的嵌套<ul>

<li>手機(jī)

<ol>

<li>華為手機(jī)</li>

<li>小米手機(jī)</li>

<li>榮耀手機(jī)</li>

<li>魅族手機(jī)</li>

</ol>

</li>

<li>手機(jī)配件

<ul>

<li>手機(jī)殼</li>

<li>耳機(jī)</li>

<li>充電寶</li>

<li>手機(jī)電池</li>

</ul>

</li>

<li>影音娛樂</li>

<li>通信服務(wù)</li>

<li>數(shù)碼配件</li></ul>二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作二級導(dǎo)航菜單通常是鼠標(biāo)觸發(fā)主菜單時(shí)，在主菜單下方或者左右兩側(cè)顯示二級菜單，鼠標(biāo)移入二級菜單點(diǎn)擊可以打開相應(yīng)的鏈接。二級子菜單出現(xiàn)的位置緊隨一級菜單。二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作<ulclass="dropdown"><li>下拉菜單

<olclass="dropdown-content">

<li><ahref="#">菜單1</a></li>

<li><ahref="#">菜單2</a></li>

<li><ahref="#">菜單3</a></li>

</ol></li></ul>CSS樣式部分（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；

（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作<ulclass="dropdown"><li>下拉菜單

<olclass="dropdown-content">

<li><ahref="#">菜單1</a></li>

<li><ahref="#">菜單2</a></li>

<li><ahref="#">菜單3</a></li>

</ol></li></ul>CSS樣式部分（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；

（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。*{ padding:0;margin:0; }.dropdown,.dropdown-content{list-style-type:none;}二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作<ulclass="dropdown"><li>下拉菜單

<olclass="dropdown-content">

<li><ahref="#">菜單1</a></li>

<li><ahref="#">菜單2</a></li>

<li><ahref="#">菜單3</a></li>

</ol></li></ul>CSS樣式部分（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；

（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。由于兩級菜單的標(biāo)記均為li，為了方便定位到它們，可以充分利用子元素選擇器“>”。.dropdown>li { width:100px; height:40px; border:2pxsolid; border-radius:8px;line-height:40px; text-align:center; color:#000; font-size:16px;cursor:pointer;/*手型光標(biāo)*/ }二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作<ulclass="dropdown"><li>下拉菜單

<olclass="dropdown-content">

<li><ahref="#">菜單1</a></li>

<li><ahref="#">菜單2</a></li>

<li><ahref="#">菜單3</a></li>

</ol></li></ul>CSS樣式部分（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；

（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。.dropdown-contenta {color:#fff;display:block;width:100px;text-align:center;line-height:30px;text-decoration:none;background:#008; }二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作<ulclass="dropdown"><li>下拉菜單

<olclass="dropdown-content">

<li><ahref="#">菜單1</a></li>

<li><ahref="#">菜單2</a></li>

<li><ahref="#">菜單3</a></li>

</ol></li></ul>CSS樣式部分（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；

（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。.dropdown-contenta:hover{background-color:#00f;}二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作<ulclass="dropdown"><li>下拉菜單

<olclass="dropdown-content">

<li><ahref="#">菜單1</a></li>

<li><ahref="#">菜單2</a></li>

<li><ahref="#">菜單3</a></li>

</ol></li></ul>CSS樣式部分（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；

（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。.dropdown>li

{ ……

position:relative;

}.dropdown-content

{

position:absolute;

left:5px;

top:40px;

}二、制作多級導(dǎo)航菜單——水平二級導(dǎo)航菜單制作<ulclass="dropdown"><li>下拉菜單

<olclass="dropdown-content">

<li><ahref="#">菜單1</a></li>

<li><ahref="#">菜單2</a></li>

<li><ahref="#">菜單3</a></li>

</ol></li></ul>CSS樣式部分（1）進(jìn)行初始化的設(shè)置，將文檔中所有元素的margin和padding設(shè)為0；（2）去掉所有列表項(xiàng)前面的圖標(biāo)；（3）分別對主菜單和子菜單項(xiàng)的樣式進(jìn)行設(shè)置。（4）鼠標(biāo)移入li時(shí)改變子元素a的背景色；

（5）由于子菜單的位置始終跟隨主菜單，所以可以使用定位。將參照物主菜單設(shè)置成相對定位，下拉菜單容器設(shè)置成絕對定位，并且始終在主菜單項(xiàng)的下方。（6）設(shè)置二級下拉菜單隱藏，在鼠標(biāo)劃過主菜單的時(shí)候，下拉菜單顯示。.dropdown-content{display:none; }/*初始時(shí)下拉菜單隱藏*/.dropdown>li:hover.dropdown-content{display:block; }二、制作多級導(dǎo)航菜單——豎直伸縮型二級菜單制作豎直伸縮型二級菜單是當(dāng)鼠標(biāo)觸發(fā)主菜單時(shí)，相應(yīng)的子菜單豎直顯示在其下方，擠占其他主菜單項(xiàng)的位置。二、制作多級導(dǎo)航菜單——豎直伸縮型二級菜單制作首先，寫好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，進(jìn)行CSS樣式的設(shè)置（1）初始化設(shè)置，將ul、ol等元素的默認(rèn)padding、margin都置0。（2）設(shè)置所有列表項(xiàng)前面的圖標(biāo)類型為none。（3）設(shè)置第一級列表項(xiàng)的外觀樣式。（4）設(shè)置二級菜單所有的a為塊級元素，并對其文字格式進(jìn)行設(shè)置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本類似。（5）設(shè)置二級子菜單的位置。二級子菜單的出現(xiàn)要擠占后面一級菜單的位置，所以要在文檔流中占據(jù)一定的高度，因此二級菜單容器要設(shè)置相對定位relative。（6）正常情況下，二級菜單隱藏，當(dāng)鼠標(biāo)滑過主菜單時(shí)，二級菜單才顯示。（7）設(shè)置鼠標(biāo)滑動到二級菜單時(shí)子菜單項(xiàng)背景色的變換。二、制作多級導(dǎo)航菜單——豎直伸縮型二級菜單制作首先，寫好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，進(jìn)行CSS樣式的設(shè)置（1）初始化設(shè)置，將ul、ol等元素的默認(rèn)padding、margin都置0。（2）設(shè)置所有列表項(xiàng)前面的圖標(biāo)類型為none。（3）設(shè)置第一級列表項(xiàng)的外觀樣式。（4）設(shè)置二級菜單所有的a為塊級元素，并對其文字格式進(jìn)行設(shè)置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本類似。（5）設(shè)置二級子菜單的位置。二級子菜單的出現(xiàn)要擠占后面一級菜單的位置，所以要在文檔流中占據(jù)一定的高度，因此二級菜單容器要設(shè)置相對定位relative。（6）正常情況下，二級菜單隱藏，當(dāng)鼠標(biāo)滑過主菜單時(shí)，二級菜單才顯示。（7）設(shè)置鼠標(biāo)滑動到二級菜單時(shí)子菜單項(xiàng)背景色的變換。*{ padding:0;margin:0; }.dropdown,.dropdown-content{list-style-type:none;}二、制作多級導(dǎo)航菜單——豎直伸縮型二級菜單制作首先，寫好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，進(jìn)行CSS樣式的設(shè)置（1）初始化設(shè)置，將ul、ol等元素的默認(rèn)padding、margin都置0。（2）設(shè)置所有列表項(xiàng)前面的圖標(biāo)類型為none。（3）設(shè)置第一級列表項(xiàng)的外觀樣式。（4）設(shè)置二級菜單所有的a為塊級元素，并對其文字格式進(jìn)行設(shè)置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本類似。（5）設(shè)置二級子菜單的位置。二級子菜單的出現(xiàn)要擠占后面一級菜單的位置，所以要在文檔流中占據(jù)一定的高度，因此二級菜單容器要設(shè)置相對定位relative。（6）正常情況下，二級菜單隱藏，當(dāng)鼠標(biāo)滑過主菜單時(shí)，二級菜單才顯示。（7）設(shè)置鼠標(biāo)滑動到二級菜單時(shí)子菜單項(xiàng)背景色的變換。.dropdown>li{

width:100px;

background:#000088;

border:1pxsolid#fa0;

color:#fff;

text-align:center;

padding:8px0;

cursor:pointer;

}二、制作多級導(dǎo)航菜單——豎直伸縮型二級菜單制作首先，寫好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，進(jìn)行CSS樣式的設(shè)置（1）初始化設(shè)置，將ul、ol等元素的默認(rèn)padding、margin都置0。（2）設(shè)置所有列表項(xiàng)前面的圖標(biāo)類型為none。（3）設(shè)置第一級列表項(xiàng)的外觀樣式。（4）設(shè)置二級菜單所有的a為塊級元素，并對其文字格式進(jìn)行設(shè)置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本類似。（5）設(shè)置二級子菜單的位置。二級子菜單的出現(xiàn)要擠占后面一級菜單的位置，所以要在文檔流中占據(jù)一定的高度，因此二級菜單容器要設(shè)置相對定位relative。（6）正常情況下，二級菜單隱藏，當(dāng)鼠標(biāo)滑過主菜單時(shí)，二級菜單才顯示。（7）設(shè)置鼠標(biāo)滑動到二級菜單時(shí)子菜單項(xiàng)背景色的變換。.dropdown-contenta{

display:block;

width:100px;

background:#FA0;

color:#00f;

height:30px;

text-align:center;

line-height:30px;

text-decoration:none;

border-bottom:1pxsolid; }二、制作多級導(dǎo)航菜單——豎直伸縮型二級菜單制作首先，寫好body中的列表元素。<ulclass="dropdown"><li>menu1

<olclass="dropdown-content">

<li><ahref="#">menu1-1</a></li>

<li><ahref="#">menu1-2</a></li>

<li><ahref="#">menu1-3</a></li>

</ol></li><li>menu2</li><li>menu3</li></ul>然后，進(jìn)行CSS樣式的設(shè)置（1）初始化設(shè)置，將ul、ol等元素的默認(rèn)padding、margin都置0。（2）設(shè)置所有列表項(xiàng)前面的圖標(biāo)類型為none。（3）設(shè)置第一級列表項(xiàng)的外觀樣式。（4）設(shè)置二級菜單所有的a為塊級元素，并對其文字格式進(jìn)行設(shè)置，包括text-decoration、font-size、color、text-align、line-height等，和上例基本類似。（5）設(shè)置二級子菜單的位置。二級子菜單的出現(xiàn)要擠占后面一級菜單的位置，所以要在文檔流中占據(jù)一定的高度，因此二級菜單容器要設(shè)置相對定位relative。（6）正常情況下，二級菜單隱藏，當(dāng)鼠標(biāo)滑過主菜單時(shí)，二級菜單才顯示。（7）設(shè)置鼠標(biāo)滑動到二級菜單時(shí)子菜單項(xiàng)背景色的變換。二級子菜單的出現(xiàn)要擠占后面一級菜單的位置，所以要在文檔流中占據(jù)一定的高度，因此二級菜單容器要設(shè)置相對定位relative。為美觀起見，增加一點(diǎn)top偏移量。

.dropdown-content{

position:relative;

top:8px;

left:0;

}二、制作多級導(dǎo)航菜單——豎直伸縮型二級菜單制作首先，寫好body中的列表元素。