<h2>购物清单</h2>
<p>牛奶</p>
<p>苹 果</p>
<p>电风扇</p>
<hr>
<ul>
<li>牛奶</li>
<li>苹 果</li>
<li>电风扇</li>
</ul>
<hr>
<style type="text/css">
table{ /*控制标签*/
width: 700px; /*寬度*/
text-align: center; /*属性规定元素中的文本的水平对齐方式 這裡居中*/
margin:20px auto; /*属性在一个声明中设置所有外边距属性*/
border-collapse: collapse; /*格边框显示为一条单独的边框*/
}
table caption{ /*控制表格下面的定义caption*/
font-size: 3rem; /*控制字体大小 1rem =10px*/
font-weight: bolder; /*设置字体的粗细，这里是粗 可以 bold*/
color:#000;
margin-bottom: 20px /*/*属性设置元素的下外边距，这里是 购物清单 和 表格下面的 两个之间的距离*/*/
}
table,th,td{ /*控制三个标签*/
border: 1px solid #666; /*border是属性在一个声明设置所有的边框属性，1px solid是实线的意思,#666 简写 #666666*/
}
table tr:first-child{
/*选取属于其父元素的首个子元素的指定选择器。*/
background-color: lightgreen;/*设置背景颜色浅绿色*/
}
table tr:hover{
background-color: #efefef;
color:coral;
}
table td tr img{
padding:5px;/*属性在一个声明中设置所有内边距属性*/
border-radius: 10px;/*属性是一个简写属性，用于设置四个 border-*-radius 属性。*/
}
table tr td a{
text-decoration-line: none;
width: 140px;
height: 40px;
padding:3px;
border:1px solid black;
background-color: white;
color:black;
border-radius: 8px;
}
table tr td a:hover{
background-color: black;
color:white;
}
</style>
<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/milk.jpg"></td>
<td><a href="http://www.jd.com">点击购 买</a></td>
</tr>
<tr>
<td>2</td>
<td>苹 果</td>
<td>富士</td>
<td>1箱</td>
<td><img src=".images/milk.jpg"></td>
<td><a href="http://www.jd.com">点击购 买</a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>美的</td>
<td>1箱</td>
<td><img src=".images/milk.jpg"></td>
<td><a href="http://www.jd.com">点击购 买</a></td>
</tr>
</table>
<hr>