ナビゲーションバーの例
13053 ワード
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 body
6 {
7 font-family: Arial;
8 font-size: 10pt;
9 }
10
11 #navlist
12 {
13 margin: 0;
14 padding: 0;
15 text-align: center;
16 }
17
18 #navlist li
19 {
20 list-style: none;
21 display: inline;
22 }
23
24 #navlist li a
25 {
26 color: #fff;
27 background-color: #900;
28 padding: 0.2em 1em;
29 text-decoration: none;
30 }
31
32 #navlist li a:hover
33 {
34 color: #ffffff;
35 background-color: #333333;
36 }
37
38 .active
39 {
40 border: 1px solid #900;
41 color: #900;
42 font-weight: bold;
43 padding: 0.2em 1em;
44 }
45 </style>
46 </head>
47 <body>
48 <ul id="navlist">
49 <li class="active">Home</li>
50 <li><a>About Us</a></li>
51 <li><a>Services</a></li>
52 <li><a>Clients</a></li>
53 <li><a>Contact Us</a></li>
54 </ul>
55 </body>
56 </html>View Code
効果図:
