实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>软件介绍</title> <style> table,th,td { border:1px solid black; } table { border-collapse:collapse; text-align:center; width:80%; /*水平,垂直,像素,颜色*/ box-shadow:8px 8px 5px #888888; margin:50px auto; background-image:url(images/bgimage.jpg); background-repeat:no-repeat; background-size:cover; } table caption { font-size:1.7em; font-weight:bolder; margin:30px; } th,td { padding:5px; } table img { width: 150px; box-shadow:5px 5px 5px #888888; } .brown,th { background-color: rgba(155,155,0,0.5); color:red; } #weixin { color:brown; } </style> </head> <body> <table > <caption>软件价格表</caption> <tr> <th>ID </th> <th>产品</th> <th>价格</th> <th>是否年费</th> <th>产品图片</th> <th>简介</th> <th rowspan="6" class="brown">优惠活动进行中...</th> </tr> <tr> <td>1</td> <td>点餐收银软件</td> <td>98</td> <td>否</td> <td><img src="images/1.jpg" alt="点餐收银软件" ></td> <td>为你省钱的餐饮软件</td> </tr> <tr> <td>2</td> <td>会员软件</td> <td>80</td> <td>是</td> <td><img src="images/2.jpg" alt="会员软件" ></td> <td>帮你留住客人的会员管理软件</td> </tr> <tr> <td>3</td> <td>库存软件</td> <td>180</td> <td>是</td> <td><img src="images/3.jpg" alt="库存软件" ></td> <td>无需到店,即可掌控仓库供货情况</td> </tr> <tr> <td>4</td> <td>厨房显示</td> <td>195</td> <td>否</td> <td><img src="images/4.jpg" alt="厨房显示" ></td> <td>同步收银点餐系统,后厨工作更有序</td> </tr> <tr> <td>5</td> <td id="weixin">微信点餐</td> <td>259</td> <td>是</td> <td><img src="images/5.jpg" alt="厨房显示" ></td> <td>扫码点餐支付,操作轻松高效</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例