导航栏的制作：
技术要求：
CSS
HTML各类标签
实现目的：
制作导航栏菜单
代码分析：
基本样式清除
无序列原点删除
下划线删除
文字默认居中
a标签设置块级元素
伪类选择器对a状态修饰
分步实现：
分三栏布局：使用浮动
logo一栏；选择栏一栏；搜索栏一栏
logo部分：
img标签，导入图片，a标签超链接 ，img导入图片，防止图片失真width和height设置一个就可以了
1
2
3
4
5
选择栏：ul>li标签
列表标签，a标签超链接
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
搜索栏：
font表单，input属性，输入框和按钮
1
2
3
4
5
6
7
实现分析：
首先在body内设置一个站点的头部盒子，头部盒子里面有一个中心的盒子。
1
2
3
4
把logo，选择栏，搜索栏放入中心盒子中
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
实现1：
是不是感觉不够美观，我们使用CSS试试看吧！
CSS代码：
删除a标签下划线，删除li无序列原点，在一行上显示。
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
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
.header{
width: 100%;
height: 100px;
background-color: rgb(207, 238, 238);
position: relative;
}
.container{
width: 1226px;
height: 20px;
margin: 0 auto;
}
.header .logo{
float: left;
margin-top: 25px;
}
.logo a{
display: block;
width: 150px;
height: 150px;
}
.header .list{
float: left;
width: 820px;
height: 88px;
padding: 12px 0 0 30px;
}
clearfix::after{
content: ”;
clear: both;
display: block;
}
a{
text-decoration: none;
}
.header li{
float: left;
list-style: none;
}
.list li{
padding: 28px 10px 38px ;
display: block;
color: rgb(68, 57, 5);
}
.search{
float: right;
width: 296px;
margin-top: 10px;
position: absolute;
top: 28px;
right: 53px;
}
.search form{
height: 50px;
width: 296px;
}
.content1{
display: block;
width: 223px;
height: 48px;
border: 1px solid #e0e0e0;
padding: 0 10px;
float:right;
}
.search1{
width: 49px;
height: 49px;
float: right;
}
.list li:hover{
color: rgb(168, 81, 81);
font-size: larger;
}
使用外部式引入：
1
最后梳理一下：创建一个HTML文件，输入以下代码
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
创建一个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
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
.header{
width: 100%;
height: 100px;
background-color: rgb(207, 238, 238);
position: relative;
}
.container{
width: 1226px;
height: 20px;
margin: 0 auto;
}
.header .logo{
float: left;
margin-top: 25px;
}
.logo a{
display: block;
width: 150px;
height: 150px;
}
.header .list{
float: left;
width: 820px;
height: 88px;
padding: 12px 0 0 30px;
}
clearfix::after{
content: ”;
clear: both;
display: block;
}
a{
text-decoration: none;
}
.header li{
float: left;
list-style: none;
}
.list li{
padding: 28px 10px 38px ;
display: block;
color: rgb(68, 57, 5);
}
.search{
float: right;
width: 296px;
margin-top: 10px;
position: absolute;
top: 28px;
right: 53px;
}
.search form{
height: 50px;
width: 296px;
}
.content1{
display: block;
width: 223px;
height: 48px;
border: 1px solid #e0e0e0;
padding: 0 10px;
float:right;
}
.search1{
width: 49px;
height: 49px;
float: right;
}
.list li:hover{
color: rgb(168, 81, 81);
font-size: larger;
}
实现2：
鼠标动一下图标，字体可以变大哦。
制作攻略：
把logo的位置换成你图片的位置，alt属性是网页图片展示不出来时的字。
“li”标签里的a属性超链接想要链接的网页，“li”标签里面的文字换成你想要的的文字
背景颜色在CSS中**.header中的background-color:**进行修改，变成你想要的的颜色。
对于“li”标签中字体的特效，在CSS中**.list li:hover**进行修改。
变色：
1
2
3
4
5
6
.header{
width: 100%;
height: 100px;
background-color: rgb(207, 238, 238);
position: relative;
}
标签特效：
1
2
3
4
.list li:hover{
color: rgb(168, 81, 81);
font-size: larger;
}
到此这篇关于HTML+CSS 实现顶部导航栏菜单制作的文章就介绍到这了,更多相关HTML CSS 顶部导航栏菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！