學習筆記如何使用CSS實現(xiàn)表格斜線效果

作者：admin 2010-09-08 12:49:16

本文介紹如何運用CSS實現(xiàn)表格斜線效果用,我們知道當網(wǎng)頁中DIV的邊框線設置得足夠?qū)挘⒍x了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線。

你對使用CSS實現(xiàn)表格斜線效果的方法是否了解，這里和大家分享一下，當網(wǎng)頁中DIV的邊框線設置得足夠?qū)挘⒍x了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線，所以我們就可以利用border-left和border-top來模擬出斜線的效果。

用CSS實現(xiàn)表格斜線效果

本文是介紹如何運用CSS實現(xiàn)表格斜線效果用,我們知道當網(wǎng)頁中DIV的邊框線設置得足夠?qū)挘⒍x了不同的顏色時，其相鄰的兩條邊框線交界處就是斜線，所以我們就可以利用border-left和border-top來模擬出斜線的效果。

首先創(chuàng)建一個結構：

示例代碼

<divclassdivclass="out"> 
<b>類別</b> 
<em>姓名</em> 
</div>

我們用<divclass="out">作為對角線的容器，我們來設置斜線樣式，關鍵代碼如下：

示例代碼

.out  
{  
border-top:40px#D6D3D6solid;/*上邊框?qū)挾鹊扔诒砀?**行行高*/  
width:0px;/*讓容器寬度為0*/  
height:0px;/*讓容器高度為0*/  
border-left:80px#BDBABDsolid;/*左邊框?qū)挾鹊扔诒砀?**行***格寬度*/  
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實現(xiàn)網(wǎng)頁表格斜線-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;/*讓里面的兩個子容器絕對定位*/  
}  
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實現(xiàn)網(wǎng)頁表格斜線-  
<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

【編輯推薦】

實例解析CSS中display屬性使用
CSS樣式實現(xiàn)快速定位bug的六大技巧
CSS中l(wèi)ink和@import的區(qū)別
CSS2.0中page-break-after屬性用法
技術分享使用不同CSS樣式兼容多種瀏覽器

責任編輯：佚名來源： csscss.org

CSS 斜線

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

學習筆記 如何使用CSS實現(xiàn)表格斜線效果

學習筆記如何使用CSS實現(xiàn)表格斜線效果