<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.14</title>
</head>
<body>
<h2>购物清单</h2>
<p>牛奶</p>
<p>pingguo</p>
<p>电风扇</p>
<hr>
<!-- 对于多个具有关联的内容 应该使用列表元素来包装-->
<ul>
<li>牛奶</li>
<li>pingguo</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:bolder;
color: #666666;
margin-bottom: 20px;
}
table,th,td {
border:1px; solid: #666666;
}
table tr:first-child{
background: blueviolet;
}
table tr:hover{ /*鼠标在的地方变色 逼格高*/
background: #efefef;
color: coral;
}
table tr td img { /*图片边 变小圆角 美观*/
padding: 5px;
border-radius: 10px;
}
/*将a标签模拟为按钮 */
table tr td a{
/*线去掉下划线*/
text-decoration-line:none ;
width: 140px;
height: 40px;
padding: 5px;
border: 1px; solid: black;
color: black;
border-radius: 8px;
}
table tr td a:hover{ /*伪类 鼠标上去会变 颜色 大小*/
background:black ;
font-size: 1.1em
;
color: #666666;
}
</style>
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>pingpai</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>1箱</td>
<td><img src="images/niounai.jpg" width="100" </td>
<td><a href="跳转网址">点击buy </a></td>
</tr>
<tr>
<td>2</td>
<td>pingguo</td>
<td>红富士</td>
<td>5kg</td>
<td><img src="images/pingguo.jpg" width="100" </td>
<td><a href="跳转网址">点击buy </a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>美的</td>
<td>1台</td>
<td><img src="images/dianfengshan.jpg" width="100" </td>
<td><a href="跳转网址">点击buy</a></td>
</tr>
</table>
</body>
</html>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.14</title>
</head>
<body>
<h2>购物清单</h2>
<p>牛奶</p>
<p>pingguo</p>
<p>电风扇</p>
<hr>
<!-- 对于多个具有关联的内容 应该使用列表元素来包装-->
<ul>
<li>牛奶</li>
<li>pingguo</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:bolder;
color: #666666;
margin-bottom: 20px;
}
table,th,td {
border:1px; solid: #666666;
}
table tr:first-child{
background: blueviolet;
}
table tr:hover{ /*鼠标在的地方变色 逼格高*/
background: #efefef;
color: coral;
}
table tr td img { /*图片边 变小圆角 美观*/
padding: 5px;
border-radius: 10px;
}
/*将a标签模拟为按钮 */
table tr td a{
/*线去掉下划线*/
text-decoration-line:none ;
width: 140px;
height: 40px;
padding: 5px;
border: 1px; solid: black;
color: black;
border-radius: 8px;
}
table tr td a:hover{ /*伪类 鼠标上去会变 颜色 大小*/
background:black ;
font-size: 1.1em
;
color: #666666;
}
</style>
<table>
<caption>购物清单</caption>
<tr>
<th>编号</th>
<th>名称</th>
<th>pingpai</th>
<th>数量</th>
<th>缩略图</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>牛奶</td>
<td>伊利</td>
<td>1箱</td>
<td><img src="images/niounai.jpg" width="100" </td>
<td><a href="跳转网址">点击but </a></td>
</tr>
<tr>
<td>2</td>
<td>pingguo</td>
<td>红富士</td>
<td>5kg</td>
<td><img src="images/pingguo.jpg" width="100" </td>
<td><a href="跳转网址">点击buy </a></td>
</tr>
<tr>
<td>3</td>
<td>电风扇</td>
<td>美的</td>
<td>1台</td>
<td><img src="images/dianfengshan.jpg" width="100" </td>
<td><a href="跳转网址">点击buy </a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
