ナビゲーションバーの例

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
効果図: