实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
table{
width: 700px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table caption{
font-size: 3rem;
font-weight: bolder;
color: #666;
margin-bottom: 20px;
}
table,th,td{
border:1px solid #666;
}
table tr:first-child{
background-color:lightgreen;
}
table tr:hover{
background-color: #efefef;
color: coral;
}
table tr td img{
padding: 5px;
border-radius: 10px;
}
table tr td a {
text-direction-line:none;
width:140px;
height: 40px;
padding: 5px;
border: 1px solid black;
background-color: white;
color: black;
border-radius: 8px;
}
table tr td a:hover{
background-color: black;
font-size: 1.1em;
color: white;
}
</style>
</head>
<body>
<h2>购物清单</h2>
<p>牛奶</p>
<p>果</p>
<p>电风扇</p>
<hr>
<!-- 对于多个具有关联性的元素，应该使用列表元素包装 -->
<ul>
<li>牛奶</li>
<li>果</li>
<li>电风扇</li>
</ul>
<hr>
<!-- 如果要对一组相关事务具体描述，应该合适表格标签 -->
<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>一箱</td>
<td><img src="images/milk.jpg" width='100' alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
<tr>
<td>2</td>
<td>果</td>
<td>红富士</td>
<td>2kg</td>
<td><img src="images/apple.jpg" alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>格力</td>
<td>1台</td>
<td><img src="images=/fans.jpg" alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
