一、垂直导航栏
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
a:link,a:visited{
text-decoration: none;
display: block;
background-color: aqua;
color: black;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: crimson;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>导航栏</
title
>
<
link
href
=
"style.css"
type
=
"text/css"
rel
=
"stylesheet"
>
</
head
>
<
body
>
<
ul
>
<
li
><
a
href
=
"#"
>导航1</
a
></
li
>
<
li
><
a
href
=
"#"
>导航2</
a
></
li
>
<
li
><
a
href
=
"#"
>导航3</
a
></
li
>
<
li
><
a
href
=
"#"
>导航4</
a
></
li
>
</
ul
>
</
body
>
</
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
|
ul{
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: aqua;
width: 250px;
text-align: center;
}
a:link,a:visited{
font-weight: bold;
text-decoration: none;
background-color: aqua;
color: black;
width: 50px;
text-align: center;
}
a:active,a:hover{
background-color: crimson;
}
li{
display: inline;
padding-left: 5px;
padding-right: 5px;
}
|
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1773188
