html5/CSS3做一个表格 本人菜鸟初学~求高手指导
发布网友
发布时间：2022-04-24 09:52
共1个回答
热心网友
时间：2022-04-06 12:58
这里主要应用了CSS3的几个功能圆角边框“border-radius”，以及伪类选择器“E:nth-child(n)”。伪类"E:hover"不是CSS3的新功能，它的作用就是当鼠标悬停与E元素时样式发生改变。
亲，祝你学有所成哟！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.radius {
border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
padding:5px;
}
.radius th {background-color:#0000ff;color:#ffffff;}
.radius tr:nth-child(odd) {background-color:#FF0000;}
.radius tr:nth-child(even) {background-color:#00ff00;}
.radius tr:hover{background-color:#FF0;}
</style>
</head>
<body>
<table width="200" class="radius">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
参考资料：http://css3.jz123.cn/index.html
