品优购项目--购物车结算页面

最新推荐文章于 2024-09-06 22:50:28 发布

WangJiaYi948

最新推荐文章于 2024-09-06 22:50:28 发布

阅读量5.1k

点赞数 2

本文链接：https://blog.csdn.net/WangJiaYi948/article/details/82794219

版权

这篇博客展示了品优购项目的购物车结算页面，包括HTML结构和CSS样式设计，详细解析了如何实现该页面的功能和视觉效果。

摘要由CSDN通过智能技术生成

效果图
在这里插入图片描述

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>品优购购物车结算</title>
	<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/shoppingcar-settlement.css">
</head>
<body>
	<div class="shoutcut">
		<div class="w">
			<div class="fl">
				<ul>
					<li>品优购欢迎您！</li>
					<li>
						<a href="#">请登录</a>
						<a href="#" class="style-red">免费注册</a>
					</li>
				</ul>
			</div>
			<div class="fr">
				<ul>
					<li><a href="#">我的订单</a></li>
					<li><div class="spacer"></div></li>

					<li><a href="#">我的品优购</a><i class="icomoon"></i></li>
					<li><div class="spacer"></div></li>

					<li><a href="#">品优购会员</a></li>
					<li><div class="spacer"></div></li>

					<li><a href="#">企业采购</a></li>
					<li><div class="spacer"></div></li>

					<li><a href="#">关注品优购</a><i class="icomoon"></i></li>
					<li><div class="spacer"></div></li>

					<li><a href="#">客户服务</a><i class="icomoon"></i></li>
					<li><div class="spacer"></div></li>

					<li><a href="#">网站导航</a><i class="icomoon"></i></li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="header">
		<div class="w">
			<div class="logo fl">
				<h1>
					<a href="index.html" title="品优购">品优购</a>
				</h1>
			</div>
			<span>购物车</span>
			<div class="set_inp">
				<input type="text" placeholder="自营">
				<button>搜索</button>
			</div>
		</div>
	</div>

	<div class="main clearfix">
		<div class="w">
			<h2>全部商品  11</h2>
			<div class="sellhd">
				<ul>
					<li><input type="checkbox" checked="checked">全选</li>
					<li>商品</li>
					<li>单价(元)</li>
					<li>数量</li>
					<li>小计(元)</li>
					<li>操作</li>
				</ul>
			</div>

			<div class="box">
				<div class="boxhd">
					<input type="checkbox">
					<div class="czzy">传智自营</div>
					<span>运费: ￥6.00 <em>还差￥99.00免运费</em></span>
				</div>

				<div class="boxbd">
					<ul>
						<li class="short">
							<ul>
								<li>
									<input type="checkbox">
									<img src="img/setimg/01.gif" alt="">
								</li>
								<li class="sho-pro">
									<p>苹果(Apple)MD463FE/A <br>MAC Thunderbolt雷电接口 至千兆以太网转<br></p>
									<i></i><span>购买礼品包装</span>
								</li>
								<li>
									尺码:Thunderbolt至千兆...
								</li>
									<li>248.00</li>
								<li>
									<div class="youhuo">
										<div class="yh1">-</div>
										<div class="yh2">1</div>
										<div class="yh3">+</div>
									</div>
									<div class="youhuo">有货</div>
								</li>
								<li>248.00</li>
								<li>
									<a href="#">删除</a> <br>
									<a href="#">移到我的关注</a>
								</li>
							</ul>
						</li>
						<li class="short special">
							<ul>
								<li>
									<input type="checkbox">
									<img src="img/setimg/02.gif" alt="">
								</li>
								<li class="sho-pro"&g

最低0.47元/天解锁文章