中职高教版《网页设计与制作任务驱动教程》10-1-3设计与制作网页的顶部导航栏课件
2023-05-18
|
34页
|
72人阅读
|
2人下载
普通
内容正文：
1
单元10 设计网站主页与整合网站
【任务10-1】制作“E游天下”网站的主页
《网页设计与制作任务驱动教程（第3版）》
1
2
网页index1001.html的浏览效果如图10-1所示。
图10-1 网页index1001.html的浏览效果
《网页设计与制作任务驱动教程（第3版）》
3
【任务描述】
【任务10-1-3】设计与制作网页的顶部导航栏
设计与制作网页index1001.html的顶部导航栏。
《网页设计与制作任务驱动教程（第3版）》
4
【任务实施】
1．定义网页顶部导航栏的CSS样式
在文件夹style中创建一个CSS样式文件“topnav.css”，在该样式文件中定义顶部导航栏所需的CSS样式，该样式文件的CSS代码定义如表10-26所示。
《网页设计与制作任务驱动教程（第3版）》
5
表10-26 样式文件topnav.css的CSS代码定义
序号 CSS代码 序号 CSS代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45 #nav {
width: 980px;
margin-left:40px;
}
#nav a {
display: block;
width: 100px;
text-align: center;
line-height: 40px;
font-weight: bold;
}
#nav a:link {
color:#2b98db;
text-decoration:none;
}
#nav a:visited {
color:#2b98db;
text-decoration:none;
}
#nav a:hover {
color: #2b98db;
text-decoration: none;
font-weight: bold;
}
#nav ul {
list-style-type: none;
}
#nav li {
float: left;
width: 100px;
margin:0px;
padding:0px;
list-style-type: none;
}
#nav li a:hover{
background:#999;
font-weight: bold;
} 46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90 #nav li ul {
line-height: 27px;
list-style-type: none;
text-align: left;
left: -999em;
width: 100px;
position: absolute;
}
#nav li ul li{
float: left;
width: 100px;
background: #CCCCFF;
text-align: center;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
display: block;
z-index: 0;
}
#nav li ul a{
display: block;
margin:0px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color: #F3F3F3;
text-decoration: none;
font-weight: normal;
background: #ccc;
font-weight: bold;
}
#nav li:hover u
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。