【实例探析】

任务1-1 探析携程旅行网的首页

效果展示

携程旅行网首页0101.html的浏览效果如图1-1所示。

携程旅行网首页0101.html的主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，顶部内容为广告图片，中部内容为多个图片超链接，底部内容包括多个导航链接，侧边栏为长方形按钮。

网页探析

1. 网页0101.html的HTML代码探析

携程旅行网首页0101.html的HTML代码如表1-1所示。

网页0101.html主体结构的HTML代码如表1-2所示。该网页主体结构包括4个组成部分，分别为顶部、中部、底部和侧边栏，其中顶部结构使用<header>标签实现，中部结构使用<nav>标签实现，底部结构使用<footer>标签实现，侧边栏使用<aside>标签实现。

2. 网页0101.html的CSS代码探析

网页0101.html通用的CSS代码如表1-3所示。

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

网页0101.html顶部内容的CSS代码如表1-5所示。

网页0101.html中部内容的CSS代码如表1-6所示。

网页0101.html底部内容的CSS代码如表1-7所示。

网页0101.html侧边栏的CSS代码如表1-8所示。