CSS制作的文字加框的导航菜单

1. <!-- 把下列代码加入到head区内 -->
   
2. <style>
   
3. #tablist{
   
4. padding: 3px 0;
   
5. margin-left: 0;
   
6. margin-bottom: 0;
   
7. margin-top: 0.1em;
   
8. font: bold 12px Verdana;
   
9. border-bottom: 1px solid gray;
   
10. }
    
11. 
    
12. #tablist li{
    
13. list-style: none;
    
14. display: inline;
    
15. margin: 0;
    
16. }
    
17. 
    
18. #tablist li a{
    
19. text-decoration: none;
    
20. padding: 3px 0.5em;
    
21. margin-right: 3px;
    
22. border: 1px solid #778;
    
23. border-bottom: none;
    
24. background: white;
    
25. }
    
26. 
    
27. #tablist li a:link, #tablist li a:visited{
    
28. color: navy;
    
29. }
    
30. 
    
31. #tablist li a:hover{
    
32. color: black;
    
33. background: lightyellow;
    
34. border-color: navy;
    
35. }
    
36. 
    
37. #tablist li a.current{
    
38. background: lightyellow;
    
39. }
    
40. 
    
41. 
    
42. </style>

复制代码

1. <!-- 把下列代码加入到body区内 -->
   
2. <ul id="tablist">
   
3. <li><a class="current" href="http://www.knowsky.com">www.knowsky.com</a></li>
   
4. <li><a href="http://www.yahoo.com">Yahoo</a></li>
   
5. <li><a href="http://www.google.com">Google</a></li>
   
6. <li><a href="http://www.sina.com">sina.com</a></li>
   
7. </ul>

复制代码