博客列表 >3月22日作业

3月22日作业

kaclod的博客
kaclod的博客原创
2018年03月23日 11:40:16690浏览

QQ截图20180323113254.jpg

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.JPG2.JPG3.JPG

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议