【引导训练】
任务1-2 设计苏宁易购网的首页
任务描述
编写HTML代码和CSS代码，设计图1-3所示的苏宁易购网的首页0102.html。
图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所示。
表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代码
在“<nav class="nav w pr">”与“</nav>”之间编写网页0102.html顶部内容的HTML代码，如表1-18所示。
表1-18 网页0102.html顶部内容的HTML代码
（2）网页0102.html的中部内容设计
网页0102.html中部内容的CSS代码如表1-19所示。
表1-19 网页0102.html中部内容的CSS代码
在“<article class="easy-box-con">”和“</article>”之间编写网页0102.html中部内容的HTML代码，如表1-20所示。
表1-20 网页0102.html中部内容的HTML代码
（3）网页0102.html的底部内容设计
网页0102.html底部内容的CSS代码如表1-21所示。
表1-21 网页0102.html底部内容的CSS代码
在“<footer class="footer w">”和“</footer>”之间编写网页0102.html底部内容的HTML代码，如表1-22所示。
表1-22 网页0102.html底部内容的HTML代码
网页浏览
保存网页0102.html，在浏览器中的浏览效果如图1-3所示。
任务1-3 设计穷游网的首页
任务描述
编写HTML代码和CSS代码，设计图1-4所示的穷游网首页0103.html。
图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所示。
表1-23 网页0103.html通用的CSS代码
（2）编写网页0103.html主体结构的CSS代码
网页0103.html主体结构的CSS代码如表1-24所示。
表1-24 网页0103.html主体结构的CSS代码
（3）编写网页0103.html主体结构的HTML代码
网页0103.html主体结构的HTML代码如表1-25所示。
表1-25 网页0103.html主体结构的HTML代码
2. 网页0103.html的局部内容设计
（1）网页0103.html的主体顶部内容设计
穷游网的首页0103.html主体顶部内容的CSS代码如表1-26所示。
表1-26 网页0103.html主体顶部内容的CSS代码
在“<header class="qui-header">”与“</header>”之间编写网页0103.html主体结构顶部内容的HTML代码，如表1-27所示。
表1-27 网页0103.html主体结构顶部内容的HTML代码
（2）网页0103.html主体结构的中部内容设计
网页0103.html主体结构中部内容的CSS代码如表1-28所示。
表1-28 网页0103.html主体结构中部内容的CSS代码
在“<section class="container">”与“</section>”之间编写网页0103.html主体结构中部内容的HTML代码，如表1-29所示。
表1-29 网页0103.html主体结构中部内容的HTML代码
（3）网页0103.html主体结构的底部内容设计
网页0103.html主体结构底部内容的CSS代码如表1-30所示。
表1-30 网页0103.html主体结构底部内容的CSS代码
在“<footer class="qui-footerBasic">”与“</footer>”之间编写网页0103.html主体结构底部内容的HTML代码，如表1-31所示。
表1-31 网页0103.html主体结构底部内容的HTML代码
（4）网页0103.html的侧边栏设计
网页0103.html侧边栏的CSS代码如表1-32所示。
表1-32 网页0103.html侧边栏的CSS代码
在“<aside class="qui-asides">”与“</aside>”之间编写网页0103.html侧边栏的HTML代码，如表1-33所示。
表1-33 网页0103.html侧边栏的HTML代码
网页浏览
保存网页0103.html，在浏览器中的浏览效果如图1-4所示。