作业：制作表格内容展示
实例
<!DOCTYPE html>
<html>
<head>
<title>制作表格</title>
<meta charset="utf-8">
<style type="text/css">
table {
border-collapse: collapse; /*折叠表格线*/
width: 700px;
text-align: center;
margin: 20px auto;/*距顶部距离*/
}
table caption {
font-size: 2rem;
font-weight: bolder;
color: #666;
margin-bottom: 20px;
}
table td{
height: 80px; /*定义内容表格高度*/
}
table, th, td {
border: 1px solid #666;
}
table tr:first-child {
background-color: lightgreen;/*第一行表格背景颜色*/
}
table tr:hover {
background-color: #efefef;/*鼠标移上以后的表格背景颜色*/
color: blue;/*鼠标移上以后的字体颜色*/
}
table tr td img {
height: 60px;
padding: 5px;/*图片圆角*/
border-radius: 10px;
}
table tr td a {
text-decoration: none;
width:140px;
height:40px;
padding:5px;/*定义a标签的圆角度*/
border:0px solid red;/*定义a标签的边框像素及颜色*/
background: red;/*定义背景颜色*/
color:white;/*定义字体颜色*/
border-radius: 8px;/*定义圆角深度*/
}
table tr td a:hover {/*定义鼠标移上以后的事件改变*/
background: black;
color:white;
}
</style>
</head>
<body>
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>品名</th>
<th>数量</th>
<th>约略图</th>
<th>选定</th>
</tr>
<tr>
<td>1</td>
<td>手机</td>
<td>小米</td>
<td>1部</td>
<td><img src="images/mini.jpg" ></td>
<td><a href="http://jd.com">点击选定</a></td>
</tr>
<tr>
<td>2</td>
<td>手机</td>
<td>vivo</td>
<td>1部</td>
<td><img src="images/vivo.jpg" ></td>
<td><a href="http://jd.com">点击选定</a></td>
</tr>
<tr>
<td>3</td>
<td>手机</td>
<td>oppo</td>
<td>1部</td>
<td><img src="images/oppo.jpg" ></td>
<td><a href="http://jd.com">点击选定</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
