【引導訓練】

任務1-2 設計蘇寧易購網的首頁

任務描述

編寫HTML代碼和CSS代碼，設計圖1-3所示的蘇寧易購網的首頁0102.html。

蘇寧易購網首頁0102.html的主體結構為頂部、中部、底部結構。頂部內容包括3個導航超鏈接和1個Logo圖片；中部內容包括多個由圖片和文字組成的導航超鏈接；底部內容也由3個部分組成，從上至下依次為當前用戶和“回頂部”錨點鏈接按鈕、登錄和注冊超鏈接、版權信息。

網頁0102.html頂部結構使用<nav>標簽實現，中部結構使用<section>標簽和<article>標簽實現，底部結構使用<footer>標簽實現。

任務實施

1. 網頁0102.html的主體結構設計

在本地硬盤的文件夾“01跨平臺的網站首頁設計\0102”中創建蘇寧易購網的首頁0102.html。

（1）編寫網頁0102.html通用的CSS代碼

蘇寧易購網的首頁0102.html通用的CSS代碼如表1-14所示。

（2）編寫網頁0102.html主體結構的CSS代碼

網頁0102.html主體結構的CSS代碼如表1-15所示。

（3）編寫網頁0102.html主體結構的HTML代碼

網頁0102.html主體結構的HTML代碼如表1-16所示。

2. 網頁0102.html的局部內容設計

（1）網頁0102.html的頂部內容設計

蘇寧易購網的首頁0102.html頂部內容的CSS代碼如表1-17所示。

在“<nav class="nav w pr">”與“</nav>”之間編寫網頁0102.html頂部內容的HTML代碼，如表1-18所示。

（2）網頁0102.html的中部內容設計

網頁0102.html中部內容的CSS代碼如表1-19所示。

在“<article class="easy-box-con">”和“</article>”之間編寫網頁0102.html中部內容的HTML代碼，如表1-20所示。

（3）網頁0102.html的底部內容設計

網頁0102.html底部內容的CSS代碼如表1-21所示。

在“<footer class="footer w">”和“</footer>”之間編寫網頁0102.html底部內容的HTML代碼，如表1-22所示。

網頁瀏覽

保存網頁0102.html，在瀏覽器中的瀏覽效果如圖1-3所示。

任務1-3 設計窮游網的首頁

任務描述

編寫HTML代碼和CSS代碼，設計圖1-4所示的窮游網首頁0103.html。

窮游網首頁0103.html的主體結構為左、右結構，左側為首頁的導航欄，右側為首頁的主體內容。左側結構使用<aside>標簽和<section>標簽嵌套實現，右側結構使用<section>標簽實現。網頁右側的主體內容部分又分為頂部、中部、底部3個組成部分，其中，頂部使用<header>標簽實現，中部使用<section>標簽實現，底部使用<footer>標簽實現。網頁左側的導航欄也分為頂部、中部、底部3個組成部分，分別使用<section>、<nav>和<section>標簽實現。

任務實施

1. 網頁0103.html的主體結構設計

在本地硬盤的文件夾“01跨平臺的網站首頁設計\0103”中創建窮游網的首頁0103.html。

（1）編寫網頁0103.html通用的CSS代碼

窮游網的首頁0103.html通用的CSS代碼如表1-23所示。

（2）編寫網頁0103.html主體結構的CSS代碼

網頁0103.html主體結構的CSS代碼如表1-24所示。

（3）編寫網頁0103.html主體結構的HTML代碼

網頁0103.html主體結構的HTML代碼如表1-25所示。

2. 網頁0103.html的局部內容設計

（1）網頁0103.html的主體頂部內容設計

窮游網的首頁0103.html主體頂部內容的CSS代碼如表1-26所示。

在“<header class="qui-header">”與“</header>”之間編寫網頁0103.html主體結構頂部內容的HTML代碼，如表1-27所示。

（2）網頁0103.html主體結構的中部內容設計

網頁0103.html主體結構中部內容的CSS代碼如表1-28所示。

在“<section class="container">”與“</section>”之間編寫網頁0103.html主體結構中部內容的HTML代碼，如表1-29所示。

（3）網頁0103.html主體結構的底部內容設計

網頁0103.html主體結構底部內容的CSS代碼如表1-30所示。

在“<footer class="qui-footerBasic">”與“</footer>”之間編寫網頁0103.html主體結構底部內容的HTML代碼，如表1-31所示。

（4）網頁0103.html的側邊欄設計

網頁0103.html側邊欄的CSS代碼如表1-32所示。

在“<aside class="qui-asides">”與“</aside>”之間編寫網頁0103.html側邊欄的HTML代碼，如表1-33所示。

網頁瀏覽

保存網頁0103.html，在瀏覽器中的瀏覽效果如圖1-4所示。