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

設置菜單和列表格式本次任務要求根據D清單頁面內容，使用CSS樣式，在基礎上設置菜單列表和版權列表格式。完成后的效果圖如圖1-16所示。任務描述圖1-16設置菜單列表格式后的網頁效果圖

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

設置菜單和列表格式任務分析圖1-16-1D清單菜單列表格式設置分析圖

設置菜單和列表格式知識與技能準備要影響列表的樣式，最簡單的辦法就是改變其標志類型。例如，在一個無序列表中，列表項的標志(marker)是出現在各列表項旁邊的圓點。要修改用于列表項的標志類型，可以使用屬性list-style-type。說明：disc為默認的標記，設置none可以去除標記1、標記類型語法：list-style-type:標記內容；課堂練習1-16-1在無序列表中添加不同類型的列表標記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}利用漸變背景色使導航欄有立體感，通過鼠標經過時漸變方向相反，使導航欄有動態感。如下表所示。顯示效果如圖2-6-2所示：圖1-16-2在無序列表中添加不同類型的列表標記知識與技能準備列表項圖像list-style-image是使用圖像來替換列表項的標記。這個屬性指定作為一個有序或無序列表項標志的圖像。取值范圍如表1-16-2所示。注意：因為列表項圖像涉及到圖片的鏈接，為了防止圖像不可用，一般情況下最好多設置一個"list-style-type"屬性。2、列表項圖像表1-16-2list-style-image的取值范圍語法：list-style-image:url(圖片文件的路徑);課堂練習1-16-2將圖像作為列表項標記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將圖像作為列表項標記知識與技能準備列表標志位置可以確定標志出現在列表項內容之外還是內容內部。該屬性用于聲明列表標志相對于列表項內容的位置。如果位置是外部(outside)，則會放在離列表項邊框邊界一定距離處；如果位置是內部(inside)，則相當于是插入在列表項內容最前面的行內元素一樣。3、列表標志位置表1-16-3list-style-position的取值范圍語法：list-style-position:位置的值;課堂練習1-16-3根據素材制作如圖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列表樣式效果知識與技能準備列表標志的綜合設置list-style是一個簡寫屬性，它涵蓋了所有其他列表樣式屬性。可以按標記樣式、標記位置、標記圖片的順序設置。說明：將以上三個屬性的綜合寫法，每個參數都是選填，如果不填寫，則默認為該屬性的默認值。注意順序是固定的，不能改變，否則該設置無效。從效果圖可以看出，采用list-style設置列表樣式效果和圖1-16-4完全一致。4、列表標志的綜合設置語法：list-style:list-style-typelist-style-positionlist-style-image;任務實施1、為header模塊添加導航效果除了前面分析的顯示和隱藏菜單列表，還要為導航欄列表中文字“首頁”添加默認的背景，和其它列表項有所不同。鼠標經過列表文字時，文字的顏色產生變化。

顯示效果如圖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;/*注意該設置*/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;}任務實施顯示效果如圖如圖1-16-6和1.16-7所示：圖1-16-6導航條效果-鼠標經過前圖1-16-7導航條效果-鼠標經過時任務實施2、為contact模塊設置列表效果在D清單宣傳網頁的底部“聯系我們”部分，設置列表的排版效果，同時設置聯系郵箱的顏色效果。設置導航條效果時，注意導航圖標的底部和列表項內容的頂部務必要重合。該設置可以在絕對定位的top屬性中進行設置。在實際應用中，特別要注意的是，綜合設置list-style中標記類型、標記位置、標記圖片必須按照順序進行設置，順序位置不可更改。顯示效果如圖2-6-10所示：圖1-16-8聯系我們模塊效果CSS代碼：123456789101112.contact{background:#000000;text-align:left;color:#FFFFFF;padding:30px;margin:40p