实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" type="images/x-icon" href="images/12.png">
<title>采购清单</title>
</head>
<body>
<h1>电脑采购清单 </h1>
<style type="text/css">
.tupian{
width: 90px;
border-radius:20px;
padding: 6px
}
table,tr,th,td{
border: 1px solid #666;
border-collapse: collapse;
text-align: center;
padding: 6px
}
caption{
font-weight: bold;
font-size: 2.5rem;
margin-bottom: 20px;/*设置离边框的距离*/
color: #a4e656
}
table tr th{
background-color: skyblue;
}
table tr:hover{
background-color: yellow;
color: blue;
}
table tr td a{
text-decoration-line: none;
width: 100px;
height: 60px
background-color:white;/*设置按钮边宽时要输入不然边款样式出不来*/
color: black;
border: 1px solid #666;
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>
<th>图片样式</th>
<th>放入购物车</th>
</tr>
<tr>
<td>主板</td>
<td>技嘉H61-HM</td>
<td>1片</td>
<td><del>399元</del></td>
<td>326元</td>
<td>3年</td>
<td><img src="images/jijia.jpg" class="tupian"></td>
<td ><a href="http://www.taobao.com">点击购~买</a></td>
</tr>
<tr>
<td>CPU</td>
<td>intel 3200</td>
<td>1盒</td>
<td><del>499元</del></td>
<td>452元</td>
<td>3年</td>
<td><img src="images/cpu.jpg" class="tupian"></td>
<td ><a href="http://www.taobao.com">点击购~买</a></td>
</tr>
<tr>
<td>内存条</td>
<td>金士顿ddr3-1333</td>
<td>1条</td>
<td><del>215元</del></td>
<td>183元</td>
<td>3年</td>
<td><img src="images/nei.jpg" class="tupian"></td>
<td ><a href="http://www.taobao.com">点击购~买</a></td>
</tr>
<tr>
<td>硬盘</td>
<td>西部数据500g硬盘</td>
<td>1块</td>
<td><del>333元</del></td>
<td>300元</td>
<td>3年</td>
<td><img src="images/ying.jpg" class="tupian"></td>
<td><a href="http://www.taobao.com">点击购~买</a></td>
</tr>
<tr>
<td>机箱/电源</td>
<td>钢琴烤漆机箱+250W大风扇电源</td>
<td>1套</td>
<td><del>120元</del></td>
<td>118元</td>
<td>1年</td>
<td><img src="images/ji.jpg" class="tupian"></td>
<td><a href="http://www.taobao.com">点击购~买</a></td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
运行图片实例
问题解答
学习PHP为什么要学习HTML？
答：HTML是直接面向用户的一种标记语言，学习html更能使前端和后端更好的传输，对于今后用PHP编写更能有一个直观的认识，PHP可以看作是动态的HTML，前端体验出现报错诺不能全面了解就有可能出现误判。
为什么选择PHP作为后端开发的语言？
答：1.PHP开发周期速度快，讲究速度的时代往往其他语言不能在有限的时间内达到PHP的速度。
2.学习PHP对新手能更好的入门；相比其他后端语言时间成本不用那么高‘
课后总结：
text-decoration-line: none;/*去掉下划线*/
border:1px solid black;/*设置表格实线*/
border-collapse: collapse;/*表格双线可以去掉*/
padding:3px;/*整体释放3px空间*/
font-size: 3rem;/*1rem=10px*/