學(xué)習(xí)筆記 如何使用CSS實(shí)現(xiàn)表格斜線效果
你對(duì)使用CSS實(shí)現(xiàn)表格斜線效果的方法是否了解，這里和大家分享一下，當(dāng)網(wǎng)頁(yè)中DIV的邊框線設(shè)置得足夠?qū)?，并定義了不同的顏色時(shí)，其相鄰的兩條邊框線交界處就是斜線，所以我們就可以利用border-left和border-top來(lái)模擬出斜線的效果。
用CSS實(shí)現(xiàn)表格斜線效果
本文是介紹如何運(yùn)用CSS實(shí)現(xiàn)表格斜線效果用,我們知道當(dāng)網(wǎng)頁(yè)中DIV的邊框線設(shè)置得足夠?qū)挘⒍x了不同的顏色時(shí)，其相鄰的兩條邊框線交界處就是斜線，所以我們就可以利用border-left和border-top來(lái)模擬出斜線的效果。
首先創(chuàng)建一個(gè)結(jié)構(gòu)：
示例代碼
- <divclassdivclass="out">
- <b>類別</b>
- <em>姓名</em>
- </div>
我們用<divclass="out">作為對(duì)角線的容器，我們來(lái)設(shè)置斜線樣式，關(guān)鍵代碼如下：
示例代碼
- .out
- {
- border-top:40px#D6D3D6solid;/*上邊框?qū)挾鹊扔诒砀?**行行高*/
- width:0px;/*讓容器寬度為0*/
- height:0px;/*讓容器高度為0*/
- border-left:80px#BDBABDsolid;/*左邊框?qū)挾鹊扔诒砀?**行***格寬度*/
- position:relative;/*讓里面的兩個(gè)子容器絕對(duì)定位*/
- }
<b>和<em>兩個(gè)標(biāo)簽來(lái)設(shè)置兩個(gè)分類，分別將它們?cè)O(shè)置為塊狀結(jié)構(gòu)display:block;清除其默認(rèn)的字體樣式font-style:normal；因其父容器設(shè)置了相對(duì)定位，所以設(shè)置其為絕對(duì)定位，這樣可以將它偏移到你想指定的位置了。
示例代碼
- 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;}
這樣一個(gè)斜線對(duì)角線就模擬出來(lái)了。
◆這種對(duì)角線模擬法也有缺點(diǎn)：
1.寬高度必須是已知的
2.寬高的長(zhǎng)度不能差得太大，你可以試試將寬度拉得比高度長(zhǎng)好幾倍，看看效果。
3.還有就是斜線條不能設(shè)置顏色。#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實(shí)現(xiàn)網(wǎng)頁(yè)表格斜線-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;/*上邊框?qū)挾鹊扔诒砀?**行行高*/
- width:0px;/*讓容器寬度為0*/
- height:0px;/*讓容器高度為0*/
- border-left:80px#BDBABDsolid;/*左邊框?qū)挾鹊扔诒砀?**行***格寬度*/
- position:relative;/*讓里面的兩個(gè)子容器絕對(duì)定位*/
- }
- 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實(shí)現(xiàn)網(wǎng)頁(yè)表格斜線-
- <AhrefAhref='http://www.csscss.org'>CSS在線</A></caption>
- <tr>
- <thstylethstyle="width:80px;">
- <divclassdivclass="out">
- <b>類別</b>
- <em>姓名</em>
- </div>
- </th>
- <th>年級(jí)</th>
- <th>班級(jí)</th>
- <th>成績(jī)</th>
- <th>班級(jí)均分</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>
本文來(lái)自CSS在線：http://www.csscss.org/cssarticle/2009614134.shtml
【編輯推薦】
