作為一個后台開發人員而言，擁有一套屬於自己的前台樣式是比較重要的，這里分享一下自己感覺還不錯的樣式，以后遇到好的，還會陸續添加
上圖：
帶鼠標滑動效果的table樣式看起來比較清爽
樣式
<head runat="server"> <title></title> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <style type="text/css"> .t1 { clear: both; border: 1px solid #c9dae4; } .t1 tr th { color: #0d487b; background: #f2f4f8 url(../CSS/Table/images/sj_title_pp.jpg) repeat-x left bottom; line-height: 28px; border-bottom: 1px solid #9cb6cf; border-top: 1px solid #e9edf3; font-weight: normal; text-shadow: #e6ecf3 1px 1px 0px; padding-left: 5px; padding-right: 5px; } .t1 tr td { border-bottom: 1px solid #e9e9e9; padding-bottom: 5px; padding-top: 5px; color: #444; border-top: 1px solid #FFFFFF; padding-left: 5px; padding-right: 5px; word-break: break-all; } /* white-space:nowrap; text-overflow:ellipsis; */ tr.alt td { background: #ecf6fc; /*這行將給所有的tr加上背景色*/ } tr.over td { background: #bcd4ec; /*這個將是鼠標高亮行的背景色*/ } </style> <script type="text/javascript"> $(document).ready(function () { //這個就是傳說的ready $(".t1 tr").mouseover(function () { //如果鼠標移到class為stripe的表格的tr上時，執行函數 $(this).addClass("over"); }).mouseout(function () { //給這行添加class值為over，並且當鼠標一出該行時執行函數 $(this).removeClass("over"); }) //移除該行的class $(".t1 tr:even").addClass("alt"); //給class為stripe的表格的偶數行添加class值為alt }); </script> </head> <body> <form id="form1" runat="server"> <table width="100%" id="ListArea" border="0" class="t1" align="center" cellpadding="0" cellspacing="0"> <tr align="center"> <th> 編號 </th> <th> 名稱 </th> <th> 人數 </th> <th> 任務 </th> <th> 職能 </th> </tr> <tr align="center"> <td> 1234 </td> <td> aaaa </td> <td> aaaaa </td> <td> aaaaa </td> <td> aaaaa </td> </tr> <tr align="center"> <td> 1234 </td> <td> aaaa </td> <td> aaaaa </td> <td> aaaaa </td> <td> aaaaa </td> </tr> <tr align="center"> <td> 1234 </td> <td> aaaa </td> <td> aaaaa </td> <td> aaaaa </td> <td> aaaaa </td> </tr> <tr align="center"> <td> 1234 </td> <td> aaaa </td> <td> aaaaa </td> <td> aaaaa </td> <td> aaaaa </td> </tr> <tr align="center"> <td> 1234 </td> <td> aaaa </td> <td> aaaaa </td> <td> aaaaa </td> <td> aaaaa </td> </tr> <tr align="center"> <td> 1234 </td> <td> aaaa </td> <td> aaaaa </td> <td> aaaaa </td> <td> aaaaa </td> </tr> </table> </form> </body>
表單圖片
樣式：
/*表單樣式*/ .f1{ float:left; width:100%;} .t2 { clear:both; /*border-collapse: collapse;*/ border: 1px solid #c9dae4; } .t2 tr th { color:#000; padding: 5px 0px 5px 10px; border-bottom: 1px solid #e6e6e6; font-weight: normal; background: #f7fafc; text-align:left; border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; } .t2 tr td{ border-bottom: 1px solid #e6e6e6; padding: 5px 0px 5px 10px; line-height:22px; word-break:break-all;} .t2 tr th em, .t2 tr td em{ font-weight:bold; color:Red;}