HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作課件：設(shè)置菜單和列表格式

HTML5+CSS3網(wǎng)頁(yè)設(shè)計(jì)與制作設(shè)置菜單和列表格式能夠敘述列表類型特點(diǎn)，使用list-style-type屬性設(shè)置列表樣式。能夠敘述列表項(xiàng)圖像特點(diǎn)，使用list-style-image屬性設(shè)置列表樣式。能夠敘述列表標(biāo)志位置特點(diǎn)，使用list-style-position屬性設(shè)置列表樣式。能夠綜合運(yùn)用列表樣式設(shè)置D清單頁(yè)面導(dǎo)航菜單及列表元素格式。任務(wù)目標(biāo)

設(shè)置菜單和列表格式本次任務(wù)要求根據(jù)D清單頁(yè)面內(nèi)容，使用CSS樣式，在基礎(chǔ)上設(shè)置菜單列表和版權(quán)列表格式。完成后的效果圖如圖1-16所示。任務(wù)描述圖1-16設(shè)置菜單列表格式后的網(wǎng)頁(yè)效果圖

設(shè)置菜單和列表格式D清單宣傳網(wǎng)頁(yè)導(dǎo)航欄部分的列表內(nèi)容默認(rèn)是隱藏不可見(jiàn)，當(dāng)鼠標(biāo)指針經(jīng)過(guò)導(dǎo)航欄的圖標(biāo)時(shí)，列表內(nèi)容自動(dòng)顯示，鼠標(biāo)離開(kāi)時(shí)又自動(dòng)隱藏。要完成D清單頁(yè)面菜單和列表格式的設(shè)置，需要：學(xué)習(xí)list-style-type、list-style-image、list-style-position列表樣式屬性。分析D清單頁(yè)面中的菜單列表格式內(nèi)容，正確使用CSS樣式完成D清單網(wǎng)頁(yè)內(nèi)容制作。使用列表樣式美化D清單頁(yè)面底部的列表元素。D清單列表格式設(shè)置分析如圖1-16-1所示。任務(wù)分析

設(shè)置菜單和列表格式任務(wù)分析圖1-16-1D清單菜單列表格式設(shè)置分析圖

設(shè)置菜單和列表格式知識(shí)與技能準(zhǔn)備要影響列表的樣式，最簡(jiǎn)單的辦法就是改變其標(biāo)志類型。例如，在一個(gè)無(wú)序列表中，列表項(xiàng)的標(biāo)志(marker)是出現(xiàn)在各列表項(xiàng)旁邊的圓點(diǎn)。要修改用于列表項(xiàng)的標(biāo)志類型，可以使用屬性list-style-type。說(shuō)明：disc為默認(rèn)的標(biāo)記，設(shè)置none可以去除標(biāo)記1、標(biāo)記類型語(yǔ)法：list-style-type:標(biāo)記內(nèi)容；課堂練習(xí)1-16-1在無(wú)序列表中添加不同類型的列表標(biāo)記HTML代碼：CSS代碼：1234567891011121314151617181920<ulclass="disc"><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li></ul><ulclass="circle"><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li></ul><ulclass="square"><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li></ul><ulclass="none"><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li></ul>1234ul.disc{list-style-type:disc}ul.circle{list-style-type:circle}ul.square{list-style-type:square}ul.none{list-style-type:none}利用漸變背景色使導(dǎo)航欄有立體感，通過(guò)鼠標(biāo)經(jīng)過(guò)時(shí)漸變方向相反，使導(dǎo)航欄有動(dòng)態(tài)感。如下表所示。顯示效果如圖2-6-2所示：圖1-16-2在無(wú)序列表中添加不同類型的列表標(biāo)記知識(shí)與技能準(zhǔn)備列表項(xiàng)圖像list-style-image是使用圖像來(lái)替換列表項(xiàng)的標(biāo)記。這個(gè)屬性指定作為一個(gè)有序或無(wú)序列表項(xiàng)標(biāo)志的圖像。取值范圍如表1-16-2所示。注意：因?yàn)榱斜眄?xiàng)圖像涉及到圖片的鏈接，為了防止圖像不可用，一般情況下最好多設(shè)置一個(gè)"list-style-type"屬性。2、列表項(xiàng)圖像表1-16-2list-style-image的取值范圍語(yǔ)法：list-style-image:url(圖片文件的路徑);課堂練習(xí)1-16-2將圖像作為列表項(xiàng)標(biāo)記HTML代碼：CSS代碼：12345<ul><li>咖啡</li><li>茶</li><li>可口可樂(lè)</li></ul>1ul{list-style-image:url(images/biao.png);}顯示效果如圖1-16-3所示。圖1-16-3將圖像作為列表項(xiàng)標(biāo)記知識(shí)與技能準(zhǔn)備列表標(biāo)志位置可以確定標(biāo)志出現(xiàn)在列表項(xiàng)內(nèi)容之外還是內(nèi)容內(nèi)部。該屬性用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置。如果位置是外部(outside)，則會(huì)放在離列表項(xiàng)邊框邊界一定距離處；如果位置是內(nèi)部(inside)，則相當(dāng)于是插入在列表項(xiàng)內(nèi)容最前面的行內(nèi)元素一樣。3、列表標(biāo)志位置表1-16-3list-style-position的取值范圍語(yǔ)法：list-style-position:位置的值;課堂練習(xí)1-16-3根據(jù)素材制作如圖1-14-3所示效果的列表樣式HTML代碼：CSS代碼：123456<ulclass="list"><li>百度搜索引擎</li><li>谷歌搜索引擎</li><li>360搜索引擎</li><li>bing搜索引擎</li></ul>1234567.listli{margin:5px;background:#FFF;list-style-position:inside;list-style-image:url(../images/biao.png);font-size:20px;}顯示效果如圖1-16-4所示。圖1-16-4列表樣式效果知識(shí)與技能準(zhǔn)備列表標(biāo)志的綜合設(shè)置list-style是一個(gè)簡(jiǎn)寫(xiě)屬性，它涵蓋了所有其他列表樣式屬性?？梢园礃?biāo)記樣式、標(biāo)記位置、標(biāo)記圖片的順序設(shè)置。說(shuō)明：將以上三個(gè)屬性的綜合寫(xiě)法，每個(gè)參數(shù)都是選填，如果不填寫(xiě)，則默認(rèn)為該屬性的默認(rèn)值。注意順序是固定的，不能改變，否則該設(shè)置無(wú)效。從效果圖可以看出，采用list-style設(shè)置列表樣式效果和圖1-16-4完全一致。4、列表標(biāo)志的綜合設(shè)置語(yǔ)法：list-style:list-style-typelist-style-positionlist-style-image;任務(wù)實(shí)施1、為header模塊添加導(dǎo)航效果除了前面分析的顯示和隱藏菜單列表，還要為導(dǎo)航欄列表中文字“首頁(yè)”添加默認(rèn)的背景，和其它列表項(xiàng)有所不同。鼠標(biāo)經(jīng)過(guò)列表文字時(shí)，文字的顏色產(chǎn)生變化。

顯示效果如圖2-6-9所示：HTML代碼：CSS代碼：1234567891011121314151617181920212223header{padding:20px;}header.logo{float:left;font-size:2.6rem;}headernav{float:right;width:54px;margin:4px;border-radius:3px;}headernavspan{display:block;text-align:center;font-size:2rem;line-height:55px;color:#888;}headernavspan:hover{background:#ddd;}242526272829303132333435363738394041424344headernavul{position:absolute;top:80px;/*注意該設(shè)置*/left:0;width:100%;font-weight:bold;color:#000;padding:0;margin:0;}headernavli{padding:15px;margin:010px;list-style-type:none;}headernava{color:rgb(53,60,62);}headernava:hover{color:#4FCCE2;}任務(wù)實(shí)施顯示效果如圖如圖1-16-6和1.16-7所示：圖1-16-6導(dǎo)航條效果-鼠標(biāo)經(jīng)過(guò)前圖1-16-7導(dǎo)航條效果-鼠標(biāo)經(jīng)過(guò)時(shí)任務(wù)實(shí)施2、為contact模塊設(shè)置列表效果在D清單宣傳網(wǎng)頁(yè)的底部“聯(lián)系我們”部分，設(shè)置列表的排版效果，同時(shí)設(shè)置聯(lián)系郵箱的顏色效果。設(shè)置導(dǎo)航條效果時(shí)，注意導(dǎo)航圖標(biāo)的底部和列表項(xiàng)內(nèi)容的頂部務(wù)必要重合。該設(shè)置可以在絕對(duì)定位的top屬性中進(jìn)行設(shè)置。在實(shí)際應(yīng)用中，特別要注意的是，綜合設(shè)置list-style中標(biāo)記類型、標(biāo)記位置、標(biāo)記圖片必須按照順序進(jìn)行設(shè)置，順序位置不可更改。顯示效果如圖2-6-10所示：圖1-16-8聯(lián)系我們模塊效果CSS代碼：123456789101112.contact{background:#000000;text-align:left;color:#FFFFFF;padding:30px;margin:40p