实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品服务</title>
<style>
table,th,td {
border: 1px solid #000000
}
table {
border-collapse: collapse;
text-align: center;
width: 50%;
margin: 50px auto;
box-shadow: 5px 5px 5px #888;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
}
table caption {
font-size: 25px;
font-weight: bolder;
margin-bottom: 25px;
}
th,td {
padding: 10px;
}
th {
background-color: rgba(255,106,106,0.3);
color: #FF6A6A;
}
td img {
border-radius: 50%;
box-shadow:6px 6px 6px #888;
}
.abc {
color: #8B795E;
font-size: 20px;
font-weight: bolder;
}
.biaoti {
color: #1E90FF;
font-size: 20px;
font-weight: bolder;
}
</style>
</head>
<body>
<table>
<caption>¤ 尚辰网络产品服务 ¤</caption>
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>产品图片</th>
<th>价格</th>
<th>说明</th>
</tr>
<tr>
<td>1</td>
<td class="biaoti">网站建设</td>
<td><img src="1.jpg" alt="" width="150"></td>
<td>2000起</td>
<td class="abc">PC+手机端</td>
</tr>
<tr>
<td>2</td>
<td class="biaoti">公众号开发</td>
<td><img src="2.jpg" alt="" width="150"></td>
<td>1000起</td>
<td class="abc">根据功能需求定制</td>
</tr>
<tr>
<td>3</td>
<td class="biaoti">小程序开发</td>
<td><img src="3.png" alt="" width="150"></td>
<td>1500起</td>
<td class="abc">根据功能需求定制</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
