0814课程作业

<h2>购物清单</h2>

<p>牛奶</p>

<p>苹1果</p>

<p>电风扇</p>

<hr>

<!-- 对于多个具有关联性的内容，应该用列表元素进行包装 -->

<ul>

<li>牛奶</li>

<li>苹1果</li>

<li>电风扇</li>

</ul>

<hr>

<!-- 如果要对一组相关的事物具体描述，应该使用表格 -->

<style type="text/css">

       table{

             width :700px;

             text-align: center;

             margin: 20px auto;

             border-collapse: collapse;

            }

table caption{

             font-size: 3rem;/* 1rem=10px */

             font-weight:border;

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

/*将a标签包装成按钮样式*/

 table tr td a{

              text-decoration-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;

              color: white;}

</style>

<table>

<caption>购物清单</caption>

<!-- ctrl+shift+D  快速复制 -->

<tr>

<th>编号</th>

<th>名称</th>

<th>品1牌</th>

<th>数量</th>

<th>缩略图</th>

<th>操作</th>

</tr>

<tr>

<td>1</td>

<td>牛奶</td>

<td>伊利</td>

<td>1箱</td>

<td><img src="" width="100"></td>

<td><a href="http://jd.com">点击购1买</a></td>

</tr>

<tr>

<td>2</td>>

<td>苹1果</td>

<td>红富士</td>

<td>5斤</td>

<td><img src="" width="100"></td>

<td><a href="http://jd.com">点击购1买</a></td>

</tr>

<tr>

<td>3</td>>

<td>电风扇</td>

<td>美的</td>

<td>1台</td>

<td><img src="" width="100"></td>

<td><a href="http://jd.com">点击购1买</a></td>

</tr>

</table>