2018-08-14

<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>