拓展练习训练：设计“海南旅游网”首页任务要求：综合运用所学知识 ,利用 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、设置下拉菜单列表项超链接文字文本颜色为“黑色”，正常显示（不加粗）...
