制作购物清单

最新推荐文章于 2022-11-25 19:31:52 发布

Jingyao2021

最新推荐文章于 2022-11-25 19:31:52 发布

阅读量5.9k

点赞数 1

分类专栏： HTML5网页设计文章标签： form标签

本文链接：https://blog.csdn.net/qq_40486952/article/details/99208062

版权

HTML5网页设计专栏收录该内容

2 篇文章

订阅专栏

效果图：
在这里插入图片描述
html5代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物清单</title>
	<style>
		table{width: 700px;margin:auto;border:1px solid #000000;border-collapse: collapse;}
		table caption{padding:10px;font:bold 1.2em/1.5 arial microsoft yahei;}
		table tr{padding: 10px; border: 1px solid #999999;text-align: center;height: 100px;}
		img{width: 80px;height: 80px;margin:auto;padding: 10px;}
		span{color: #FF0099;font:bold 2em arial microsoft yahei sans-serif;}
		button{background-color: #FF0099;color: #FFFFFF;width: 100px;height: 40px;border-style: none;font:bold 1.2em microsoft yahei;}
		.align{text-align: right;}
		.l-align{text-align: left;}
		.height{height: 60px;}
	</style>
</head>
<body>
	<table>
		<caption>您的购物清单</caption>
		<tr class="height">
			<th class="l-align">图形</th>
			<th>名称</th>
			<th>单价</th>
			<th>数量</th>
			<th>总计</th>
		</tr>
		<tr>
			<td class="l-align"><img src="../images/cup.jpg" alt="cup"></td>
			<td>水杯</td>
			<td>10</td>
			<td>2</td>
			<td>20</td>
		</tr>
		<tr>
			<td class="l-align"><img src="../images/basket.jpg" alt="basket"></td>
			<td>篮子</td>
			<td>15</td>
			<td>2</td>
			<td>30</td>
		</tr>
		<tr>
			<td class="l-align"><img src="../images/bathtub.jpg" alt="bathtub"></td>
			<td>儿童浴盆</td>
			<td>20</td>
			<td>1</td>
			<td>20</td>
		</tr>
		<tr>
			<td class="l-align"><img src="../images/mop.jpg" alt="mop"></td>
			<td>拖把</td>
			<td>13</td>
			<td>1</td>
			<td>13</td>
		</tr>
		<tr>
			<td colspan="5" class="align">总价：<span>83&nbsp&nbsp&nbsp</span><button>去结算</button></td>
		</tr>
	</table>
</body>
</html>