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

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

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

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

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

設(shè)置菜單和列表格式知識與技能準(zhǔn)備要影響列表的樣式，最簡單的辦法就是改變其標(biāo)志類型。例如，在一個無序列表中，列表項的標(biāo)志(marker)是出現(xiàn)在各列表項旁邊的圓點。要修改用于列表項的標(biāo)志類型，可以使用屬性list-style-type。說明：disc為默認(rèn)的標(biāo)記，設(shè)置none可以去除標(biāo)記1、標(biāo)記類型語法：list-style-type:標(biāo)記內(nèi)容；課堂練習(xí)1-16-1在無序列表中添加不同類型的列表標(biāo)記HTML代碼：CSS代碼：1234567891011121314151617181920<ulclass="disc"><li>咖啡</li><li>茶</li><li>可口可樂</li></ul><ulclass="circle"><li>咖啡</li><li>茶</li><li>可口可樂</li></ul><ulclass="square"><li>咖啡</li><li>茶</li><li>可口可樂</li></ul><ulclass="none"><li>咖啡</li><li>茶</li><li>可口可樂</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)航欄有立體感，通過鼠標(biāo)經(jīng)過時漸變方向相反，使導(dǎo)航欄有動態(tài)感。如下表所示。顯示效果如圖2-6-2所示：圖1-16-2在無序列表中添加不同類型的列表標(biāo)記知識與技能準(zhǔn)備列表項圖像list-style-image是使用圖像來替換列表項的標(biāo)記。這個屬性指定作為一個有序或無序列表項標(biāo)志的圖像。取值范圍如表1-16-2所示。注意：因為列表項圖像涉及到圖片的鏈接，為了防止圖像不可用，一般情況下最好多設(shè)置一個"list-style-type"屬性。2、列表項圖像表1-16-2list-style-image的取值范圍語法：list-style-image:url(圖片文件的路徑);課堂練習(xí)1-16-2將圖像作為列表項標(biāo)記HTML代碼：CSS代碼：12345<ul><li>咖啡</li><li>茶</li><li>可口可樂</li></ul>1ul{list-style-image:url(images/biao.png);}顯示效果如圖1-16-3所示。圖1-16-3將圖像作為列表項標(biāo)記知識與技能準(zhǔn)備列表標(biāo)志位置可以確定標(biāo)志出現(xiàn)在列表項內(nèi)容之外還是內(nèi)容內(nèi)部。該屬性用于聲明列表標(biāo)志相對于列表項內(nèi)容的位置。如果位置是外部(outside)，則會放在離列表項邊框邊界一定距離處；如果位置是內(nèi)部(inside)，則相當(dāng)于是插入在列表項內(nèi)容最前面的行內(nèi)元素一樣。3、列表標(biāo)志位置表1-16-3list-style-position的取值范圍語法：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列表樣式效果知識與技能準(zhǔn)備列表標(biāo)志的綜合設(shè)置list-style是一個簡寫屬性，它涵蓋了所有其他列表樣式屬性。可以按標(biāo)記樣式、標(biāo)記位置、標(biāo)記圖片的順序設(shè)置。說明：將以上三個屬性的綜合寫法，每個參數(shù)都是選填，如果不填寫，則默認(rèn)為該屬性的默認(rèn)值。注意順序是固定的，不能改變，否則該設(shè)置無效。從效果圖可以看出，采用list-style設(shè)置列表樣式效果和圖1-16-4完全一致。4、列表標(biāo)志的綜合設(shè)置語法：list-style:list-style-typelist-style-positionlist-style-image;任務(wù)實施1、為header模塊添加導(dǎo)航效果除了前面分析的顯示和隱藏菜單列表，還要為導(dǎo)航欄列表中文字“首頁”添加默認(rèn)的背景，和其它列表項有所不同。鼠標(biāo)經(jīng)過列表文字時，文字的顏色產(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ù)實施顯示效果如圖如圖1-16-6和1.16-7所示：圖1-16-6導(dǎo)航條效果-鼠標(biāo)經(jīng)過前圖1-16-7導(dǎo)航條效果-鼠標(biāo)經(jīng)過時任務(wù)實施2、為contact模塊設(shè)置列表效果在D清單宣傳網(wǎng)頁的底部“聯(lián)系我們”部分，設(shè)置列表的排版效果，同時設(shè)置聯(lián)系郵箱的顏色效果。設(shè)置導(dǎo)航條效果時，注意導(dǎo)航圖標(biāo)的底部和列表項內(nèi)容的頂部務(wù)必要重合。該設(shè)置可以在絕對定位的top屬性中進行設(shè)置。在實際應(yīng)用中，特別要注意的是，綜合設(shè)置list-style中標(biāo)記類型、標(biāo)記位置、標(biāo)記圖片必須按照順序進行設(shè)置，順序位置不可更改。顯示效果如圖2-6-10所示：圖1-16-8聯(lián)系我們模塊效果CSS代碼：123456789101112.contact{background:#000000;text-align:left;color:#FFFFFF;padding:30px;margin:40p