【引导训练】_跨平台的移动Web开发实战（HTML5+CSS3）-QQ阅读男频都市网

上QQ阅读APP看书，第一时间看更新

【引导训练】

【任务1-2】设计苏宁易购网的首页

【任务描述】

编写HTML代码和CSS代码，设计图1-3所示苏宁易购网的首页0102.html。

图1-3 苏宁易购网首页0102.html的浏览效果

苏宁易购网首页0102.html的主体结构为上、中、下结构，如图1-3所示。顶部内容包括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所示。

表1-14 网页0102.html通用CSS代码定义

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

网页0102.html主体结构的CSS代码定义如表1-15所示。

表1-15 网页0102.html主体结构的CSS代码定义

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

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

表1-16 网页0102.html主体结构的HTML代码

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

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

苏宁易购网的首页0102.html顶部内容的CSS代码定义如表1-17所示。

表1-17 网页0102.html顶部内容的CSS代码

在网页0102.html顶部代码“<nav class="nav w pr">”与“</nav>”之间编写HTML代码，实现其功能，网页0102.html顶部内容的HTML代码如表1-18所示。

表1-18 网页0102.html顶部内容的HTML代码

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

网页0102.html中部内容的CSS代码定义如表1-19所示。

表1-19 网页0102.html中部内容的CSS代码

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

表1-20 网页0102.html中部内容的HTML代码

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

网页0102.html底部内容的CSS代码定义如表1-21所示。

表1-21 网页0102.html底部内容的CSS代码

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

表1-22 网页0102.html底部内容的HTML代码

【网页浏览】

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

【任务1-3】设计穷游网的首页

【任务描述】

编写HTML代码和CSS代码，设计图1-4所示穷游网的首页0103.html。

图1-4 穷游网首页0103.html的浏览效果

穷游网首页0103.html主体结构为左、右结构，左侧为首页的导航栏，右侧为首页的主体内容，如图1-4所示。左侧结构使用<aside>标签和<section>标签嵌套实现，右侧结构使用<section>标签实现。网页右侧的主体内容部分又分为上、中、下3个组成部分，网页右侧上部使用<header>标签实现，右侧中部使用<section>标签实现，右侧底部使用<footer>标签实现。网页左侧的导航栏也分为上、中、下3个组成部分，分别使用<section>、<nav>和<section>标签实现。