6.7 綜合實例2——制作新聞菜單

在網上瀏覽新聞可能是每個上網者都喜歡做的事情。一個布局合理、樣式美觀大方的新聞菜單是吸引人的主要途徑之一。本實例使用CSS控制HTML標記創建新聞菜單，具體步驟如下：

01 分析需求

創建一個新聞菜單需要包含兩個部分：一個是父菜單，用來表明新聞類別；一個是子菜單，介紹具體的新聞消息。菜單方式很多，可以用<table>創建，也可以用列表創建，同樣也可以使用段落<p>創建。本實例采用<p>標記結合<div>創建。

02 分析局部和整體，構建HTML網頁

一個新聞菜單可以分為三個層次，即新聞父菜單、新聞焦點和新聞子菜單，下面分別使用div創建，其HTML代碼如下所示。

在IE 11.0中的顯示效果如圖6-34所示，一個標題一個超鏈接和三個段落以普通樣式顯示，其布局只存在上下層次。

03 添加CSS代碼，修飾整體樣式

對于HTML頁面，需要有一個整體樣式，其代碼如下所示。

在IE 11.0中的顯示效果如圖6-35所示，可以看到全局層會以邊框顯示，寬度為400px，其顏色為淺綠色；文檔內容中的字采用宋體、大小為12px，并且定義內容和層之間的空隙為0、層和層之間的空隙為0。

04 添加CSS代碼，修飾新聞父菜單

對新聞父類菜單進行CSS控制，其代碼如下所示。

在IE 11.0中的顯示效果如圖6-36所示。標題“時事熱點”以矩形方框顯示，背景色為橄欖色，字體大小為14px，行高為18px。

05 添加CSS菜單，修飾子菜單

在IE 11.0中的顯示效果如圖6-37所示，超鏈接“7月周周爬房團報名”居中顯示，所有段落之間間隙增大。

06 添加CSS菜單，修飾超級鏈接

在IE 11.0中的顯示效果如圖6-38所示。超鏈接“7月周周爬房團報名”字體變大，加粗，并且無下畫線顯示；將鼠標指針放在此超級鏈接上時會以紅色字體顯示，并且下面帶有下畫線。