HTML .CSS实现购物车（cart）

最新推荐文章于 2024-05-28 01:06:19 发布

从此再无྅

最新推荐文章于 2024-05-28 01:06:19 发布

阅读量3.1k

点赞数 3

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_67519129/article/details/125324385

版权

一、购物车页面演示

.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link href="css/common.css" rel="stylesheet"/>
		<link href="css/cart.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="all">
			<iframe class="iheader" src="header.html"></iframe>
			
			<div class="cars">
				<table>
					<tr class="tr1">
						<th>商品名称</th>
						<th>市场价</th>
						<th>定购价</th>
						<th>数量</th>
						<th>操作</th>
					</tr>
					<tr class="tra">
						<td>
							<a><img src="img/ico_checkout.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a>
							<span><img src="img/cake1_s1.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span>
							<span>[悦轩饼家蛋糕]榴芒双拼(约2磅)一双拼蛋糕</span>
							</td>
						<td><p style="text-decoration: line-through; text-align: center;">￥298</p></td>
						<td style="text-align: center;">￥198</td>
						<td style="text-align: center;">2</td>
						<td style="text-align: center;">删除</td>
					</tr>
					<tr class="tra">
						<td>
							<a><img src="img/ico_checkout.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a>
							<span><img src="img/cake2.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span>
							<span>[悦轩饼家蛋糕]芒果千层(900g)</span>
							</td>
						<td><p style="text-decoration: line-through; text-align: center;">￥289</p></td>
						<td style="text-align: center;">￥169</td>
						<td style="text-align: center;">1</td>
						<td style="text-align: center;">删除</td>
					</tr>
					<tr class="tra">
						<td>
							<a><img src="img/ico_unchecked.png" style="width: 20px;height: 20px;margin-top: 15px;"/></a>
							<span><img src="img/cake3.jpg" style="width: 100px;height: 80px; margin-top: -20px;"/></span>
							<span>[悦轩饼家蛋糕]榴莲香雪(约2磅)一榴莲蛋糕</span>
							</td>
						<td><p style="text-decoration: line-through; text-align: center;">￥260</p></td>
						<td style="text-align: center;">￥149</td>
						<td style="text-align: center;">2</td>
						<td style="text-align: center;">删除</td>
					</tr>
				</table>
			</div>
			<div class="carx">
				<p class="carje" style="font-size: 12px;">应付金额:<span style="color: orange;font-weight: bold;">￥565</span>
				<a style="color: aliceblue;font-weight: bold;width: 50px; height: 50px;
				 background-color: orange;border: 1px solid orangered;width: 50px;height: 48px;font-size: 19px;">去结算</a>
				</p>
			</div>
			<iframe class="ifooter" src="footer.html"></iframe>
		</div>
	</body>
</html>

.css

.all{
	width:1300px;
	margin: auto;
	/* border: 1px solid red; */
}
.iheader{
	height: 80px;
}
iframe{
	width: 1230px;
}
#carbig{
	border: 1px dashed beige;
	width: 1100px;
	/* line-height: 800PX; */
}
table {
	font-size: 12px;
	border: 1px dashed black;
	width: 1200px;
	height: 400px;
	/* text-align: center; */
	border-collapse: collapse;
}
table th{
	/* border: 1px solid black; */
	/* text-align: center; */
}
table th td {
/* text-align: center; */
/* border: 1px blue solid; */
}
table tr td{
	/* border: 1px solid black; */
	/* text-align: center; */
}
table tr{
	border: 1px dashed gainsboro;
}
.carx{
	border: 1px dashed gainsboro;
	width: 1200px;
	line-height: 50px;
	margin-top: 10px;
/* 	line-height: 50px; */
}
.all .carx .carje{
	text-align:end;
	
}

.all .cars .tr1{
	border: 1px dashed gainsboro;
	background-color: gray;
}

二、表单知识点

（1）、表单

（1）、why:在页面里，需要通过表单装载数据，然后才能把数据提交给服务器

（2）、how

1、表单元素：form、input（text、button、checkbox、button、select、option、table）

（1）下拉框select常用属性：size=n：可以看到多行数据选项；

multiple:可以选择多行数据选项

（2）、HTML5里的新标签元素：feildset:类十余winform里的grop；

datalist 可以自定义输入文本的下拉框

（3）、文本框：placeh0lder属性，用来进行文本输入提示语

三、购物车实现效果