3.5　項目實戰(zhàn)：在線新聞瀏覽

本節(jié)基于前面學習的知識，結合起來設計一個在線新聞瀏覽的HTML頁面。希望能幫助讀者盡快掌握HTML文字與排版的設計方法。

下面是項目實戰(zhàn)在線新聞瀏覽的HTML網頁代碼（詳見源代碼ch03/ch03-html-news.html文件）。

【代碼3-11】

【代碼解析】

第08～16行代碼通過<div>標簽元素定義了新聞頁面的導航路徑。其中，第10行、第12行和第14行代碼通過<a>標簽定義了導航鏈接。第11行和第13行代碼通過“>”字符定義了導航箭頭。

第18～26行代碼通過<div>標簽元素定義了新聞頁面的標題區(qū)域。其中，第19行代碼通過<h1>標簽元素定義了新聞標題。第20～25行代碼通過一組<span>標簽元素定義了關鍵詞、新聞發(fā)布時間、分享鏈接和評論鏈接，第23行和第24行代碼通過<img>標簽元素為分享鏈接和評論鏈接添加了圖標。

第28～34行代碼通過<div>標簽元素定義了第一個新聞頁面的內容區(qū)域。第29～33行代碼通過段落<p>標簽元素定義了第一段新聞內容。

第36行代碼通過<img>標簽元素定義了新聞圖片。

第37～43行代碼通過<div>標簽元素定義了第二個新聞頁面的內容區(qū)域。第38～42行代碼通過<ul><li>標簽元素定義了第二段新聞內容。

第45～50行代碼通過<div>標簽元素定義了新聞頁面的底部區(qū)域。第46～49行代碼通過段落<p>標簽元素定義了新聞編輯等信息。

運行測試網頁，效果如圖3.11所示。