拓展练习
训练：设计“海南旅游网”首页
任务要求：
综合运用所学知识，利用HTML5语义标签，完成“海南旅游网”首页设计，效果图如图5-44所示：
图5-44 “海南旅游网”首页效果图
训练1：“海南旅游网”首页布局设计
利用HTML5语义标签、盒模型和浮动布局完成“海南旅游网”首页布局设计，效果如图5-45所示。
图5-45 “海南旅游网”首页布局设计
具体要求:
1、网页主体部分宽度为960px，高度自适应，且在网页的正中间显示。
2、具体模块及大小见图5-45所示。
3、清除所有的默认边距和边框、清除列表默认的项目符号。
4、设置超链接各状态无下划线、文本颜为黑效果。
5、设置清除浮动效果。
6、设置主体部分字体大小12px。
训练2：“海南旅游网”首页头部设计
具体要求：
在头部插入三张图像，分别是logo.jpg，head_1.jpg和head_2.jpg。训练3：“海南旅游网”导航设计
利用项目列表制作菜单导航，当鼠标移到列表项内超链接文字上时，列表项出现红(#F33)背景，如图5-46所示，同时当鼠标移到最后一个列表项“热门推荐”上时出现下拉菜单，如图5-47所示。
图5-46 鼠标移到列表项文字上效果
图5-47 鼠标移到最后列表项上时效果
具体要求:
1、导航每个栏目都设置空链接。
2、导航背景图像为nav_bj.jpg，且从左上角开始水平重复。
3、列表的宽度为850px，居中显示。
4、列表项宽度为100px，列表项内文字在水平、垂直方向居中对齐。
5、导航内超链接文字大小为14px，加粗显示，文本颜为“白”，字与字的距离1px，无下划线，鼠标移到文字上时，背景颜变为#F33，如图5-46所示。
6、鼠标移到最后一个列表项“热门推荐”上出现二级下拉菜单，如图5-47所示，该菜单的宽度为390px，高度为260px，离父元素顶部46px, 背景颜为#f8f7f5。
7、该下拉菜单有3个列表项，第一个列表项内容：三亚旅游、亚龙湾、蜈支洲岛、蝴蝶谷、天涯海角，第二个列表项内容：西岛旅游、东西玳瑁洲、椰梦长廊、牛鼻仔岭、南天一柱，第三个列表项内容：海口旅游、观澜湖明星之旅、火山文化之旅、人与自然之旅、老街文化之旅、″最海口″美食之旅。每个列表项头条内容没有设置超链接，其余都设置空链接。
8、下拉菜单列表项大小为130px×250px，左浮动。
9、利用伪选择器设置下拉菜单列表项文字“三亚旅游”、“西岛旅游”、“海口旅游”加粗显示。
10、设置下拉菜单列表项超链接文字文本颜为“黑”，正常显示（不加粗）、字体大小1em。
旅游网站的设计与制作html11、鼠标移到下拉菜单超链接文字上时背景变成白。
训练4：“海南旅游网”主体内容上半部分设计
利用插入图像、多媒体等元素，完成“海南旅游网”主体内容上半部分设计，如图5-48所示。
图5-48 “海南旅游网”主体内容上半部分效果
具体要求：
1、主体内容上半部分分为“今日三亚”和宣传栏两大模块。其中“今日三亚”模块标题插入图像tq_title.jpg，内容插入动画hn.swf，宽度为219，高度为175。
2、设置主体内容上半部分上边距为2px，下边距为5px。“今日三亚”模块设置宽度为1px、线型为实线、颜为#bd9a4d的边框线。
3、宣传栏模块插入图像gd.jpg，设置该模块左边距为5px。
训练5：“海南旅游网”主体内容下半部分设计
利用项目列表、背景定位、图文混排等相关知识，完成“海南旅游网”主体内容下半部分设计，效果如图5-49所示。
图5-49 “海南旅游网”主体内容下半部分效果
具体要求:
1、主体内容下半部分分为“海南资讯”、“热门路线”和Tab面板切换三大模块，每个模块都设置了“1px #97d0ff solid”的边框线。其中“海南资讯”模块标题文字为“海南资讯”，“热门路线”模块标题文字为“热门路线”。Tab面板模块插入tab.png，宽度为237px，高度为275px。