學習筆記 如何使用CSS實現表格斜線效果
作者：admin
本文介紹如何運用CSS實現表格斜線效果用,我們知道當網頁中DIV的邊框線設置得足夠寬，并定義了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線。
你對使用CSS實現表格斜線效果的方法是否了解，這里和大家分享一下，當網頁中DIV的邊框線設置得足夠寬，并定義了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線，所以我們就可以利用border-left和border-top來模擬出斜線的效果。
用CSS實現表格斜線效果
本文是介紹如何運用CSS實現表格斜線效果用,我們知道當網頁中DIV的邊框線設置得足夠寬，并定義了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線，所以我們就可以利用border-left和border-top來模擬出斜線的效果。
首先創建一個結構：
示例代碼
- <divclassdivclass="out">
- <b>類別</b>
- <em>姓名</em>
- </div>
我們用<divclass="out">作為對角線的容器，我們來設置斜線樣式，關鍵代碼如下：
示例代碼
- .out
- {
- border-top:40px#D6D3D6solid;/*上邊框寬度等于表格***行行高*/
- width:0px;/*讓容器寬度為0*/
- height:0px;/*讓容器高度為0*/
- border-left:80px#BDBABDsolid;/*左邊框寬度等于表格***行***格寬度*/
- position:relative;/*讓里面的兩個子容器絕對定位*/
- }
<b>和<em>兩個標簽來設置兩個分類，分別將它們設置為塊狀結構display:block;清除其默認的字體樣式font-style:normal；因其父容器設置了相對定位，所以設置其為絕對定位，這樣可以將它偏移到你想指定的位置了。
示例代碼
- b{font-style:normal;display:block;
- position:absolute;top:-40px;
- left:-40px;width:35px;}
- em{font-style:normal;display:block;
- position:absolute;top:-25px;left:-70px;width:55x;}
這樣一個斜線對角線就模擬出來了。
◆這種對角線模擬法也有缺點：
1.寬高度必須是已知的
2.寬高的長度不能差得太大，你可以試試將寬度拉得比高度長好幾倍，看看效果。
3.還有就是斜線條不能設置顏色。#p#
完整的代碼如下：
示例代碼
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"
- content="text/html;charset=utf-8"/>
- <title>用CSS實現網頁表格斜線-CSS在線</title>
- <styletypestyletype="text/css">
- *{padding:0;margin:0;}
- caption{font-size:14px;font-weight:bold;}
- table{border-collapse:collapse;border:1px#525152solid;
- width:50%;margin:0auto;margin-top:100px;}
- th,td{border:1px#525152solid;text-align:center;
- font-size:12px;line-height:30px;background:#C6C7C6;}
- th{background:#D6D3D6;}
- /*表格斜線*/
- .out{
- border-top:40px#D6D3D6solid;/*上邊框寬度等于表格***行行高*/
- width:0px;/*讓容器寬度為0*/
- height:0px;/*讓容器高度為0*/
- border-left:80px#BDBABDsolid;/*左邊框寬度等于表格***行***格寬度*/
- position:relative;/*讓里面的兩個子容器絕對定位*/
- }
- b{font-style:normal;display:block;position:absolute;
- top:-40px;left:-40px;width:35px;}
- em{font-style:normal;display:block;position:absolute;
- top:-25px;left:-70px;width:55x;}
- .t1{background:#BDBABD;}
- </style>
- </head>
- <body>
- <table>
- <caption>用CSS實現網頁表格斜線-
- <AhrefAhref='http://www.csscss.org'>CSS在線</A></caption>
- <tr>
- <thstylethstyle="width:80px;">
- <divclassdivclass="out">
- <b>類別</b>
- <em>姓名</em>
- </div>
- </th>
- <th>年級</th>
- <th>班級</th>
- <th>成績</th>
- <th>班級均分</th>
- </tr>
- <tr>
- <tdclasstdclass="t1">張三</td>
- <td>三</td>
- <td>2</td>
- <td>62</td>
- <td>61</td>
- </tr>
- <tr>
- <tdclasstdclass="t1">李四</td>
- <td>三</td>
- <td>1</td>
- <td>48</td>
- <td>67</td>
- </tr>
- <tr>
- <tdclasstdclass="t1">王五</td>
- <td>三</td>
- <td>5</td>
- <td>79</td>
- <td>63</td>
- </tr>
- <tr>
- <tdclasstdclass="t1">趙六</td>
- <td>三</td>
- <td>4</td>
- <td>89</td>
- <td>66</td>
- </tr>
- </table>
- </body>
- </html>
本文來自CSS在線：http://www.csscss.org/cssarticle/2009614134.shtml
【編輯推薦】
責任編輯：佚名
來源：
csscss.org
