中职高教版《网页设计与制作任务驱动教程》6.2制作包含横向主导航栏的网页课件

1 单元6　制作包含超级链接和 导航栏的网页 【任务6-2】制作包含横向主导航栏的 网页0602.html 《网页设计与制作任务驱动教程（第3版）》 1 2 【任务描述】 【任务6-2】制作包含横向主导航栏的 网页0602.html （1）创建样式文件base.css和main.css，在该样式文件中定义标签的属性、类选择符及其属性。 （2）创建网页文档0602.html，且链接外部样式文件base.css和main.css。 《网页设计与制作任务驱动教程（第3版）》 3 （3）在网页0602.html中添加必要的HTML标签和输入导航文字。 （4）浏览网页0602.html的效果，如图6-20所示，该网页包含三种形式的横向排列的导航栏。 图6-20 网页0602.html的浏览效果 （5）重新编写主导航的HTML代码，使其浏览效果如图6-21所示。 图6-21 网页0602.html中主导航栏重新定义后的浏览效果 《网页设计与制作任务驱动教程（第3版）》 4 【任务实施】 （1）创建文件夹与网页 在站点“单元6”中创建文件夹“task06-2”，在该文件夹中创建子文件夹“CSS”。在文件夹“task06-2”中创建网页文档0602.html。 《网页设计与制作任务驱动教程（第3版）》 5 （2）定义网页主体布局结构的CSS代码 在文件夹“CSS”中创建样式文件base.css，在该样式文件中编写样式代码，代码如表6-2所示。 表6-2　网页0602.html中样式文件base.css的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 05 06 07 08 09 body { min-width: 1202px; line-height: 2em; margin: auto; background-color: #FFF; color: #666; font-size: 12px; font-family: Tahoma,Geneva, sans-serif, "宋体" } 10 11 12 13 14 15 16 17 18 a:link, a:visited { text-decoration: none; color: #666; }   a:hover { color: #2b98db; } 《网页设计与制作任务驱动教程（第3版）》 5 6 在文件夹“CSS”中创建样式文件main.css，在该样式文件中编写样式代码，代码如表6-3所示。 表6-3　网页0602.html中样式文件main.css的CSS代码定义 序号 CSS代码 序号 CSS代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 .nav-main { background-color: #2b98db; height: 44px; width: 100%; line-height: 44px; box-shadow: 0 5px 10px rgba(0,0,0,.3); border-bottom: 0; } .nav-main nav a:hover { background-color: #4cbbeb; background-image: none; color: #FF6 }   .nav-main nav a:link, .nav-main nav a:visited { font-size: 16px; 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 font-family: "Microsoft YaHei"; font-weight: bold; display: inline-block; height: 44px; line-height: 44px; width: 14.285%; text-align: center; vertical-align: top; color: #FFF; padding: 0; margin: 0 0 0 -3px; background-image: url(../images/nav-main-line.png); background-position: right center; background-repeat: repeat-y; border-radius: 0; } 《网页设计与制作任务驱动教程（第3版）》 6 7 （3）