<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建表格清单</title>
</head>
<body>
<h>购物清单 [8-14课程]</h1>
<!-- 对于多个关联性的内容，应该使用列表元素来包装
ur 列表-->
<ul>
<li>ap，ple</li>
<li>ba，nana</li>
<li>pe，ar</li>
</ul>
<hr>
<p>创建一个表格清单</p>
<!-- 建列表 采用 td tr-->
<style type="text/css">
table{
width: 800px;
text-align: center;
margin: 20px auto;
border-collapse: collapse;
}
table caption{
font-size: 3rem; /*1rem=10px*/
font-weight: bolder; /*加粗*/
color: #666; /*设置颜色*/
margin-bottom: 20px; /*下边距*/
}
table ,th ,td{
border: 2px solid #666; /*设置边框 颜色 1px粗*/
}
table tr:first-child{
background-color: lightgreen;
/*选择table下的第一行，设置背景*/
}
table tr：hover{
background-color: #efefef; /*背景设置成浅灰色*/
color: coral; /*改变字体的颜色：珊瑚色*/
}
table tr td img{
padding: 5px; /*间隙*/
border-radius: 20px; /*设置图片的圆角*/
}
table tr td a{
text-decoration:none; /*去除下划线*/
width: 140px;
height: 40px;
padding: 1px; /*间隙*/
border:1px solid black; /*添加外框*/
background-color: white; /*背景色*/
color: black; /*字体颜色*/
border-radius: 10px; /*圆角*/
}
table tr td a:hover{
background-color: black;
color: white;
}
</style>
<table>
<caption style="font-size: 20px;">购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>品，牌</th>
<th>数量</th>
<th>图片</th>
<th>购地址</th>
</tr>
<tr>
<td>1</td>
<td>ap，ple</td>
<td>红富士 </td>
<td>1，箱</td>
<td><img src="images/apple.jpeg" width="70" alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
<tr>
<td>2</td>
<td>banana</td>
<td>香，港</td>
<td>1打</td>
<td><img src="images/banana.jpg" width="70" alt=""></td>
<td><a href="http://jd.com">点击购</a></td>
</tr>
</table>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
