【同步训练】

【任务1-4】设计同程旅游网的首页

【任务描述】

编写HTML代码和CSS代码，设计图1-5所示同程旅游网的首页0104.html。

同程旅游网首页0104.html的主体结构为上、中、下结构，如图1-5所示。顶部内容包括返回链接按钮、标题文字和主页链接按钮，中部内容为多个热点链接按钮，底部内容包括多个超链接和版权信息。

网页0104.html顶部结构使用<header>标签实现，中部结构使用<article>标签实现，底部结构使用<footer>标签实现。

【任务实施】

1. 网页0104.html的主体结构设计

在本地硬盘的文件夹“01跨平台的网站首页设计\0104”中创建同程旅游网的首页0104.html。

（1）定义网页0104.html通用CSS代码

网页0104.html通用CSS代码定义如表1-34所示。

（2）定义网页0104.html主体结构的CSS代码

网页0104.html主体结构的CSS代码如表1-35所示。

（3）编写网页0104.html主体结构的HTML代码

网页0104.html主体结构的HTML代码如表1-36所示。

2. 网页0104.html的局部内容设计

（1）网页0104.html的顶部内容设计

网页0104.html顶部内容的CSS代码定义见本书提供的电子资源。

在网页0104.html顶部代码“<header class="header" id="headerId">”与“</header>”之间编写HTML代码，实现其功能，网页0104.html顶部内容的HTML代码如表1-37所示。

（2）网页0104.html的中部内容设计

网页0104.html中部内容的CSS代码定义见本书提供的电子资源。

在网页0104.html中部代码“<article class="content">”和“</article>”之间编写HTML代码，实现其功能，网页0104.html中部内容的HTML代码如表1-38所示。

（3）网页0104.html的底部内容设计

网页0104.html底部内容的CSS代码定义见本书提供的电子资源。

在网页0104.html底部代码“<footer>”和“</footer>”之间编写HTML代码，实现其功能，网页0104.html底部内容的HTML代码如表1-39所示。

【网页浏览】

保存网页0104.html，在浏览器Google Chrome中的浏览效果如图1-5所示。