1、生成Site.css文件（注：一定要將該文件的編碼格式設置為utf-8，否則ie6有可能出現亂碼）
1 /* ul li以橫排顯示 */ 2 3 /* 所有class為menu的div中的ul樣式 */ 4 div.menu ul 5 { 6 list-style:none; /* 去掉ul前面的符號 */ 7 margin: 0px; /* 與外界元素的距離為0 */ 8 padding: 0px; /* 與內部元素的距離為0 */ 9 width: auto; /* 寬度根據元素內容調整 */ 10 } 11 /* 所有class為menu的div中的ul中的li樣式 */ 12 div.menu ul li 13 { 14 float:left; /* 向左漂移，將豎排變為橫排 */ 15 } 16 /* 所有class為menu的div中的ul中的a樣式(包括尚未點擊的和點擊過的樣式) */ 17 div.menu ul li a, div.menu ul li a:visited 18 { 19 background-color: #465c71; /* 背景色 */ 20 border: 1px #4e667d solid; /* 邊框 */ 21 color: #dde4ec; /* 文字顏色 */ 22 display: block; /* 此元素將顯示為塊級元素，此元素前后會帶有換行符 */ 23 line-height: 1.35em; /* 行高 */ 24 padding: 4px 20px; /* 內部填充的距離 */ 25 text-decoration: none; /* 不顯示超鏈接下划線 */ 26 white-space: nowrap; /* 對於文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 */ 27 } 28 /* 所有class為menu的div中的ul中的a樣式(鼠標移動到元素中的樣式) */ 29 div.menu ul li a:hover 30 { 31 background-color: #bfcbd6; /* 背景色 */ 32 color: #465c71; /* 文字顏色 */ 33 text-decoration: none; /* 不顯示超鏈接下划線 */ 34 } 35 /* 所有class為menu的div中的ul中的a樣式(鼠標點擊元素時的樣式) */ 36 div.menu ul li a:active 37 { 38 background-color: #465c71; /* 背景色 */ 39 color: #cfdbe6; /* 文字顏色 */ 40 text-decoration: none; /* 不顯示超鏈接下划線 */ 41 }
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>