【实例探析】

【任务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所示。