一个比较漂亮的tab样式

直接上代码吧:

Html代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  4. <style>  
  5.   
  6. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, p, blockquote, th, td {  
  7. margin:0;  
  8. padding:0;  
  9. font:宋体;  
  10. font-size:12px;  
  11. }  
  12.   
  13. ol, ul {  
  14. list-style:none outside none;  
  15. }  
  16.   
  17. /*link*/  
  18. a{color:#106aa9; text-decoration:none;}  
  19.   
  20. /*content nav one*/  
  21. .navC{border-bottom:1px solid #cce2ed;}  
  22. .navC li{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}  
  23. .navC li a{border-top:1px solid #cce2ed;background:#f1f6fa;font-size:14px;}  
  24. .navC li a:hover{background:#ffffff;text-decoration:none;}  
  25. .navC .current,.navC li:hover{border-left:1px solid #cce2ed;border-right:1px solid #cce2ed;}  
  26. .navC li:hover a{border-top:1px solid #cce2ed;}  
  27. .navC .current a,.navC .current a:hover{background:#ffffff;border-bottom:1px solid #ffffff;color:#333333;border-top:1px solid #cce2ed;}  
  28. .navC .current a{ font-weight:700;}  
  29.   
  30. .navC{height:28px;line-height:28px;}  
  31.     .navC ul{padding-left:10px;float:left;margin-bottom:-1px;} /*ie6*/  
  32.         .navC li{float:left;margin-right:5px;}  
  33.             .navC li a{float:left;display:block;padding:0 15px;height:28px;overflow:hidden;margin-top:-1px;_position:relative;}  
  34.   
  35. .mb10{ margin:10px; }  
  36. .mb20{ margin:20px; }  
  37. .pd10{ padding:10px;}  
  38.   
  39. /*table*/  
  40. .tdtable{border:0px;cellspacing:0;cellpadding:0;align:center;width:98%;border-collapse:collapse;}  
  41. .tdtable th,tr{height:40px;}  
  42. .tdtable th{background:#cce2ed;padding:10px;padding:4px;border:solid 1px #fff;}  
  43. .tdtable td{border:solid 1px #cce2ed;padding:4px;}  
  44.   
  45.   
  46. style>  
  47. head>  
  48. <body>  
  49. <div id="mainContainer">  
  50.     <div id="navContainer" class="navC mb10">  
  51.         <ul>  
  52.             <li><a href="#" hidefocus="true">系统设置1a>li>  
  53.             <li><a href="#" hidefocus="true">系统设置2a>li>  
  54.             <li class="current"><a href="#" hidefocus="true">系统设置3a>li>  
  55.             <li><a href="#" hidefocus="true">系统设置4a>li>  
  56.             <li><a href="#" hidefocus="true">系统设置5a>li>  
  57.         ul>  
  58.     div>  
  59.     <div class="mb20">  
  60.     <table class="tdtable">  
  61.     <tbody>  
  62.         <tr>  
  63.             <th>  
  64.                 <strong>留言薄strong>编号  
  65.             th>  
  66.             <th>  
  67.                 手机号码  
  68.             th>  
  69.             <th>  
  70.                 留言时间  
  71.             th>  
  72.             <th>  
  73.                 留言  
  74.             th>  
  75.             <th>  
  76.                 操作  
  77.             th>  
  78.         tr>       
  79.         <tr>  
  80.             <td>  
  81.                 1  
  82.             td>  
  83.             <td>  
  84.                 13638688356  
  85.             td>  
  86.             <td>  
  87.                   
  88.             td>  
  89.             <td>  
  90.                 意见内容意见内容意见内容  
  91.             td>  
  92.             <td>                    
  93.                 <a href="message-board!delete.action?id=1&msgType=" class="del">删除a>  
  94.             td>  
  95.         tr>   
  96.         <tr>  
  97.             <td>  
  98.                 2  
  99.             td>  
  100.             <td>  
  101.                 13638688356  
  102.             td>  
  103.             <td>  
  104.                   
  105.             td>  
  106.             <td>  
  107.                 意见内容意见内容意见内容  
  108.             td>  
  109.             <td>                    
  110.                 <a href="message-board!delete.action?id=2&msgType=" class="del">删除a>  
  111.             td>  
  112.         tr>   
  113.         <tr>  
  114.             <td>  
  115.                 8  
  116.             td>  
  117.             <td>  
  118.                 13638688356  
  119.             td>  
  120.             <td>  
  121.                   
  122.             td>  
  123.             <td>  
  124.                 我爱你,就象老鼠爱大米11  
  125.             td>  
  126.             <td>                    
  127.                 <a href="message-board!delete.action?id=8&msgType=" class="del">删除a>  
  128.             td>  
  129.         tr>       
  130.         <tr>  
  131.             <td bgcolor="#fafafa" align="right" colspan="6">  
  132.                 <div id="footer">  
  133.                     第1页, 共1页  
  134.                     <a href="javascript:jumpPage(1)">首页a>  
  135.                       
  136.                       
  137.                     <a href="javascript:jumpPage(1)">末页a>  
  138.                 div>  
  139.             td>  
  140.         tr>  
  141.     tbody>  
  142.     table>    
  143.   
  144.     div>  
  145. div>  
  146. body>  
  147. html>  

 

看看效果吧:

 

你可能感兴趣的:(一个比较漂亮的tab样式)