menu 导航

1. 有class为menu的div中的ul样式 */  
2. div.menu ul  
3. {  
4.     list-style:none;       去掉ul前面的符号 */  
5.     margin: 0px;        外界元素的距离为0 */  
6.     padding: 0px;     与内部元素的距离为0 */  
7.     width: auto;      度根据元素内容调整 */  
8. }  
9.   有class为menu的div中的ul中的li样式 */  
10. div.menu ul li  
11. {  
12.     float:left;    左漂移，将竖排变为横排 */  
13. }  
14.    所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */  
15. div.menu ul li a, div.menu ul li a:visited  
16. {  
17.     background-color: #465c71;   背景色 */  
18.     border: 1px #4e667d solid;  边框 */  
19.     color: #dde4ec; 文字颜色 */  
20.     display: block; 此元素将显示为块级元素，此元素前后会带有换行符 */  
21.     line-height: 1.35em;  行高 */  
22.     padding: 4px 20px; 内部填充的距离 */  
23.     text-decoration: none;  不显示超链接下划线 */  
24.     white-space: nowrap;  对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */  
25. }  
26.  所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */  
27. div.menu ul li a:hover  
28. {  
29.     background-color: #bfcbd6;  背景色 */  
30.     color: #465c71;  文字颜色 */  
31.     text-decoration: none; 不显示超链接下划线 */  
32. }  
33.  所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */  
34. div.menu ul li a:active  
35. {  
36.     background-color: #465c71;  背景色 */  
37.     color: #cfdbe6;  文字颜色 */  
38.     text-decoration: none;  不显示超链接下划线 */  
39. } </span>  

2、前台引用上述CSS样式文件

<link href="Styles/Site.css" rel="stylesheet" type="text/css" />

3、前台数据

 <div class="menu"> <ul> <li><a href="javascript:void(0);">主页</a></li> <li><a href="javascript:void(0);">工作日志</a></li> <li><a href="javascript:void(0);">设备运行记录</a></li> <li><a href="javascript:void(0);">其他</a></li> </ul> </div>

 

link，正常状态
visited，鼠标点击后再次停留在上面的状态
hover，鼠标经过的状态
active 按下鼠标时的状态