项目五 设计“海南旅游网”首页 [7页]

拓展练习
训练：设计“海南旅游网”首页
任务要求：
综合运用所学知识,利用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。

11、鼠标移到下拉菜单超链接文字上时背景变成白色。

训练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。