Home思洋影视事业部网站建设知识库
0 Comments

学习笔记 如何使用CSS实现表格斜线效果(2)

发布于：2013-11-07  |   作者：广州网站建设  |   已聚集：人围观

完整的代码如下：

示例代码
广州网站建设,网站建设,广州网页设计,广州网站设计



    
	
  1. 
		<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
    2. 
	
  2. 
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    3. 
	
  3. 
		<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
    4. 
	
  4. 
		<head> 
    5. 
	
  5. 
		<metahttp-equivmetahttp-equiv="Content-Type"
    6. 
	
  6. 
		content="text/html;charset=utf-8"/> 
    7. 
	
  7. 
		<title>用CSS实现网页表格斜线-CSS在线</title> 
    8. 
	
  8. 
		<styletypestyletype="text/css"> 
    9. 
	
  9. 
		*{padding:0;margin:0;}  
    10. 
	
  10. 
		caption{font-size:14px;font-weight:bold;}  
    11. 
	
  11. 
		table{border-collapse:collapse;border:1px#525152solid;  
    12. 
	
  12. 
		width:50%;margin:0auto;margin-top:100px;}  
    13. 
	
  13. 
		th,td{border:1px#525152solid;text-align:center;  
    14. 
	
  14. 
		font-size:12px;line-height:30px;background:#C6C7C6;}  
    15. 
	
  15. 
		th{background:#D6D3D6;}  
    16. 
	
  16. 
		/*表格斜线*/  
    17. 
	
  17. 
		.out{  
    18. 
	
  18. 
		border-top:40px#D6D3D6solid;/*上边框宽度等于表格第一行行高*/  
    19. 
	
  19. 
		width:0px;/*让容器宽度为0*/  
    20. 
	
  20. 
		height:0px;/*让容器高度为0*/  
    21. 
	
  21. 
		border-left:80px#BDBABDsolid;/*左边框宽度等于表格第一行第一格宽度*/  
    22. 
	
  22. 
		position:relative;/*让里面的两个子容器绝对定位*/  
    23. 
	
  23. 
		}  
    24. 
	
  24. 
		b{font-style:normal;display:block;position:absolute;  
    25. 
	
  25. 
		top:-40px;left:-40px;width:35px;}  
    26. 
	
  26. 
		em{font-style:normal;display:block;position:absolute;  
    27. 
	
  27. 
		top:-25px;left:-70px;width:55x;}  
    28. 
	
  28. 
		.t1{background:#BDBABD;}  
    29. 
	
  29. 
		</style> 
    30. 
	
  30. 
		</head> 
    31. 
	
  31. 
		<body> 
    32. 
	
  32. 
		<table> 
    33. 
	
  33. 
		<caption>用CSS实现网页表格斜线-  
    34. 
	
  34. 
		<AhrefAhref='http://www.csscss.org'>CSS在线</A></caption> 
    35. 
	
  35. 
		<tr> 
    36. 
	
  36. 
		<thstylethstyle="width:80px;"> 
    37. 
	
  37. 
		<divclassdivclass="out"> 
    38. 
	
  38. 
		<b>类别</b> 
    39. 
	
  39. 
		<em>姓名</em> 
    40. 
	
  40. 
		</div> 
    41. 
	
  41. 
		</th> 
    42. 
	
  42. 
		<th>年级</th> 
    43. 
	
  43. 
		<th>班级</th> 
    44. 
	
  44. 
		<th>成绩</th> 
    45. 
	
  45. 
		<th>班级均分</th> 
    46. 
	
  46. 
		</tr> 
    47. 
	
  47. 
		<tr> 
    48. 
	
  48. 
		<tdclasstdclass="t1">张三</td> 
    49. 
	
  49. 
		<td>三</td> 
    50. 
	
  50. 
		<td>2</td> 
    51. 
	
  51. 
		<td>62</td> 
    52. 
	
  52. 
		<td>61</td> 
    53. 
	
  53. 
		</tr> 
    54. 
	
  54. 
		<tr> 
    55. 
	
  55. 
		<tdclasstdclass="t1">李四</td> 
    56. 
	
  56. 
		<td>三</td> 
    57. 
	
  57. 
		<td>1</td> 
    58. 
	
  58. 
		<td>48</td> 
    59. 
	
  59. 
		<td>67</td> 
    60. 
	
  60. 
		</tr> 
    61. 
	
  61. 
		<tr> 
    62. 
	
  62. 
		<tdclasstdclass="t1">王五</td> 
    63. 
	
  63. 
		<td>三</td> 
    64. 
	
  64. 
		<td>5</td> 
    65. 
	
  65. 
		<td>79</td> 
    66. 
	
  66. 
		<td>63</td> 
    67. 
	
  67. 
		</tr> 
    68. 
	
  68. 
		<tr> 
    69. 
	
  69. 
		<tdclasstdclass="t1">赵六</td> 
    70. 
	
  70. 
		<td>三</td> 
    71. 
	
  71. 
		<td>4</td> 
    72. 
	
  72. 
		<td>89</td> 
    73. 
	
  73. 
		<td>66</td> 
    74. 
	
  74. 
		</tr> 
    75. 
	
  75. 
		</table> 
    76. 
	
  76. 
		</body> 
    77. 
	
  77. 
		</html> 
    78. 
	
  78. 
		 
    79. 




	本文来自CSS在线：http://www.csscss.org/cssarticle/2009614134.shtml


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机