购物车页面布局与样式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45637785/article/details/102648129

步骤及代码如下

第一步创建一个class为warpper的最大的容器

第二步做出最顶部搜索及标题行class为header-tittle

<div class="header-tittle">
				<div class="header-tittle-left">
					<a href="#"></a>
				</div>
				<div class="header-tittle-right">
					<div class="header-tittle-right-panel">
						<a href="#">宝贝</a>
						<span class="sanjiao"></span>
						<div class="header-tittle-right-none">
							<a href="#">宝贝</a>
							<a href="#">天猫</a>
							<a href="#">店铺</a>
						</div>
						<input type="text" class="header-tittle-right-input">
						<span class="fangda"></span>
					</div>
					<button class="btn-search">搜索</button>
				</div>
			</div>

##  第三步做出如图部分

在这里插入图片描述

	<div class="header-shangpin">
				<ul>
					<li><a href="#">全部商品 3</a></li>
					<li><a href="#">降价商品0</a></li>
					<li><a href="#">库存紧张 0</a></li>
				</ul>
				<div class="header-shangpin-right">
					已选商品（不含运费）<span>0.00</span>
					<a href="#">结算</a>
				</div>
			</div>
			<div class="quan">
				<div class="quan-box">
					<input type="checkbox" />&nbsp;&nbsp;全选
				</div>
				<div class="quan-box-shangxin">商品信息</div>
				<div class="quan-box-danjia indent">单价</div>
				<div class="quan-box-danjia">数量</div>
				<div class="quan-box-danjia margin">金额</div>
				<div class="quan-box-caozuo">操作</div>
			</div>

第四步做出如图部分

在这里插入图片描述

<div class="dianpu">
				<input type="checkbox" />&nbsp;&nbsp;
				<span></span>&nbsp;&nbsp;店铺：龙颜氏&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#"></a>
			</div>
			<ul class="gouwuche">
				<li class="gouwuche-1">
					<input type="checkbox" />
				</li>
				<div class="gouwuche-imghe">
					<img src="img/O1CN011vQX0jjnJOxaoa2_!!3969446167.jpg_80x80.jpg" />
					<a href="#">绿帽子男恶搞分手好基友创意冬季针织毛线帽女当然选择原谅帽</a>
					<div class="gouwuche-imghe-xiao">
					<img src="img/xcard.png" />
					<img src="img/T1bnR4XEBhXXcQVo..-14-16.png"/>
					<img src="img/T1EQA5FpVgXXceOP_X-16-16.jpg"/>
					</div>
				</div>
				<div class="gouwuche-xiangqing">
					<p>尺码：可调节</p>
					<p>颜色分类：当然是选择原谅<br>她 荧光绿</p>
				</div>
				<li class="danjia-num">
					<p><del>￥9.91</del></p>
					<p>￥9.90</p>
				</li>
				<li class="shuliang-num">
					<p>1</p>
				</li>
				<li class="jine-num">
					<p>￥9.90</p>
				</li>
				<li class="gouwuche-caozuo">
					<p><a href="#">移入收藏夹</a></p>
					<p><a href="#">删除</a></p>
				</li>
			</ul>
			
			
			
			
			<div class="dianpu daintop-2">
				<input type="checkbox" />&nbsp;&nbsp;
				<span></span>&nbsp;&nbsp;店铺：天猫国际进口超市&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#"></a>
			</div>
			<ul class="gouwuche">
				<li class="gouwuche-1">
					<input type="checkbox" />
				</li>
				<div class="gouwuche-imghe">
					<img src="img/TB2M_BUGQyWBuNjy0FpXXassXXa_!!2549841410.jpg_80x80.jpg" />
					<a href="#">任天堂switch游戏机ns主机中国香港保税仓极速发货日版单机标配</a>
					<div class="gouwuche-imghe-xiao">
					<img src="img/xcard.png" />
					<img src="img/T1bnR4XEBhXXcQVo..-14-16.png"/>
					<img src="img/T1EQA5FpVgXXceOP_X-16-16.jpg"/>
					</div>
				</div>
				<div class="gouwuche-xiangqing">
					<p>版本类型：日版</p>
					<p>套餐：单机标配</p>
					<p>颜色分类：红蓝手柄</p>
				</div>
				<li class="danjia-num">
					<p><del>￥2599.00</del></p>
					<p>￥2199.00</p>
				</li>
				<li class="shuliang-num">
					<p>1</p>
				</li>
				<li class="jine-num">
					<p>￥2199.00</p>
				</li>
				<li class="gouwuche-caozuo">
					<p><a href="#">移入收藏夹</a></p>
					<p><a href="#">删除</a></p>
				</li>
			</ul>
			
			<div class="dianpu daintop-2">
				<input type="checkbox" />&nbsp;&nbsp;
				<span></span>&nbsp;&nbsp;店铺：PlayStation官方旗&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="#"></a>
			</div>
			<ul class="gouwuche">
				<li class="gouwuche-1">
					<input type="checkbox" />
				</li>
				<div class="gouwuche-imghe">
					<img src="img/O1CN010aJs7U1z0CnFDbusR_!!2318796651.jpg_80x80.jpg" />
					<a href="#">索尼官方官网直营Sony PlayStation 4 PS4 Pro主机国行家用游戏机</a>
					<div class="gouwuche-imghe-xiao">
					<img src="img/xcard.png" />
					<img src="img/T1bnR4XEBhXXcQVo..-14-16.png"/>
					<img src="img/T1EQA5FpVgXXceOP_X-16-16.jpg"/>
					</div>
				</div>
				<div class="gouwuche-xiangqing">
					<p>版本类型：中国大陆</p>
					<p>套餐：单机标配</p>
					<p>颜色分类：PS4 Pro 1TB 黑<br>色（标配单手柄）</p>
				</div>
				<li class="danjia-num">
					<p>￥2999</p>
					<p>￥2799.00</p>
				</li>
				<li class="shuliang-num">
					<p>1</p>
				</li>
				<li class="jine-num">
					<p>￥2799.00</p>
				</li>
				<li class="gouwuche-caozuo">
					<p><a href="#">移入收藏夹</a></p>
					<p><a href="#">删除</a></p>
				</li>
			</ul>

第五步做出底部

在这里插入图片描述

<div class="footer">
				<div class="footer-left">
					<span>
					<input type="checkbox" />
					<a href="#">全选</a>
					</span>
					<a href="#">删除</a>
					<a href="#">移入收藏夹</a>
					<a href="#">分享</a>
				</div>
				<div class="footer-jiesuan">
					<span>已选商品&nbsp;<span>0</span>件&nbsp;</span>
					<span>合计（不含运费）：</span>
					<span class="zongjine">
						0.00
					</span>
					<a href="#" class="footer-btn-jie">结算</a>
				</div>
			</div>

样式代码如下

*{
	margin: 0;
	padding: 0;
	font-size: 12px;
	outline: none;
	text-decoration: none;
	list-style: none;
}
/*最大的容器*/
.warpper{
	width: 990px;
	height: 790px;
	margin: auto;
	margin-top:50px;
}
del{
	text-decoration:line-through;
}
/*最顶部搜索及标题行*/
.header-tittle{
	width:990px;
	height: 95px;
	position: relative;
}
/*顶部左边标题图片*/
.header-tittle-left a{
	float: left;
	position: absolute;
    display: block;
    width: 181px;
    height: 45px;
    overflow: hidden;
    background-image: url(../img/TB800-600.png);
    top: 15px;
    left: 0;
    background-position: -110px 0;
    background-color: #fff;
}
/*顶部右边标题搜索框*/
.header-tittle-right-panel{
	width: 422px;
	height: 29px;
	border: solid 3px #f50;
	position: absolute;
	right:90px;
	top: 15px;
}
/*搜索框的宝贝*/
.header-tittle-right-panel a{
	display:inline-block;
	width: 74px;
	height: 29px;
	color: #6b6b6b;
	background-color: #f5f5f5;
	line-height: 29px;
	border-right:solid 1px #E5E5E5;
	text-align: center;
}
/*小三角*/
.header-tittle-right-panel span.sanjiao{
	display: inline-block;
	width: 13px;
	height: 7px;
	    left: -23px;
    position: relative;
	background-image: url(../img/TB800-600.png);
	background-position: -95px -75px;
}
/*宝贝框隐藏部分*/
.header-tittle-right-none{
	width: 75px;
	height:87px;
	position: absolute;
	top: 0;
	border-left:solid 1px #E5E5E5;
	border-right:solid 1px #E5E5E5;
	border-bottom:solid 1px #E5E5E5;
	opacity: 0;
}
.header-tittle-right-none:hover{
	opacity: 1;
}
/*隐藏部分文字及样式*/
.header-tittle-right-none a{
	width: 74px;
	height: 29px;
    text-align:center;
    line-height: 29px;
    color: #6b6b6b;
    background-color: #FFFFFF;
}
/*宝贝显示*/
.header-tittle-right-panel a:hover{
	background-color:#f5f5f5;
}
/*搜索input*/
.header-tittle-right-input{
	width: 342px;
	height: 29px;
	border: none;
	position: absolute;
	left:75px;
	top: 0;
	z-index: 1;
}
.header-tittle-right-input:hover{
	z-index: 1000;
	background-color:white;
}
/*input内的放大镜*/
.header-tittle-right-panel span.fangda{
	display: inline-block;
	width: 13px;
	height: 13px;
	background-image: url(../img/T1400-200.png);
	background-position:-380px -20px;
	position: absolute;
	left: 85px;
	top:9px;
	z-index: 2;
}
/*搜索按钮*/
.btn-search{
	width: 93px;
	height: 35px;
	background-color: #FF4400;
	font-size: 20px;
	color: white;
	position: absolute;
	right:0;
	border: none;
	top: 15px;
}
/*商品导航栏*/
.header-shangpin{
	position: relative;
	width: 990px;
	height: 31px;
	border-bottom:2px solid #E6E6E6;
}
/*商品栏的文字*/
.header-shangpin li{
	width: 124px;
	height:31px;
	float: left;
}
/*鼠标移上去底框变色*/
.header-shangpin li:hover{
	border-bottom: solid 2px #FF4400;
}
/*文字颜色大小及右边框*/
.header-shangpin li a{
	display: inline-block;
	width: 123px;
	text-align: center;
	font-size: 16px;
	color: #FF4400;
	font-weight: bold;
	border-right:solid 1px #E8E8E8;	
}
.header-shangpin li:nth-child(2) a,.header-shangpin li:nth-child(3) a{
	color: #333;
}
/*去掉库存紧张的右边框*/
.warpper .header-shangpin li:nth-child(3) a{
	border-right: none;
}
/*商品导航栏右边的结算部分*/
.header-shangpin-right{
	font-size: 14px;
	position: absolute;
	right: 0;
}
/*价格的颜色*/
.header-shangpin-right span{
	color: #FF4400;
	font-weight: bold;
	font-size: 14px;
}
/*结算按钮*/
.header-shangpin-right a{
	text-align: center;
	line-height: 25px;
	display: inline-block;
	border-radius: 3px;
	width: 55px;
	height: 25px;
	font-size: 14px;
	color: white;
	background-color: #AAAAAA;
}
/*全选栏*/
.quan{
	display: flex;
	justify-content: space-between;
	width: 990px;
	height: 50px;
	text-align: center;
	line-height: 55px;
}
/*全选后面的box*/
.quan-box{
	width: 80px;
	height: 50px;
	font-size: 14px;
}
.quan-box-shangxin{
	text-indent: 20px;
	width: 302px;
	height: 50px;
	text-align: left;
}
.quan-box-danjia{
	text-align: left;
	width: 120px;
	height: 50px;
}
/*文字单价文本缩进*/
.indent{
	text-indent:61px;
}
.margin{
	position: relative;
	left: -28px;
}
.quan-box-caozuo{
	text-align: left;
	width: 84px;
	height: 50px;
}
/*店铺栏*/
.dianpu{
	width: 990px;
	height: 38px;
	padding-left: 15px;
	line-height: 38px;
}
/*金牌店铺图标*/
.dianpu span{
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url(../img/TB800-600.png);
	background-position:-20px -126px;
}
/*店铺的动态图*/
.dianpu a{
	display: inline-block;
	width: 16px;
	height: 17px;
	background-image: url(../img/T15-130-60.gif);
	background-position:47px -3px;
	position: relative;
	top:3px;
}
/*购物车的大小*/
ul.gouwuche{
	width: 988px;
	height: 130px;
	border: solid 1px #ccc;
}
/*统一购车的li的部分样式*/
ul.gouwuche li{
	position:relative;
	display: inline-block;
}
/*第一个checkbox按钮的li*/
.gouwuche-1{
	float: left;
	width:45px;
	height: 119px;
}
/*购物车内按钮样式*/
.gouwuche-1 input{
	position: absolute;
	top: 15px;
	left: 15px;
}
/*装商品图片以及信息的盒子*/
.gouwuche-imghe{
	float: left;
	padding-top: 20px;
	width: 290px;
	height: 110px;
}
/*装商品图片以及信息的盒子 里面文字信息*/
.gouwuche-imghe a{
	vertical-align: top;
	color: #222;
	width: 186px;
	height: 36px;
	display: inline-block;
}
.gouwuche a:hover{
	color: red;
	text-decoration: underline;
}
/*装商品图片以及信息的盒子小图部分*/
.gouwuche-imghe-xiao{
	position: relative;
	top:-20px;
	left: 85px;
	width: 186px;
	height: 24px;
}
/*购物车详情部分*/
.gouwuche-xiangqing{
	width:160px;
	height: 98px;
	float: left;
	padding-top: 20px;
	color: #bbb
}
/*单价价格数字*/
.danjia-num{
	width: 92px;
	height: 99px;
	padding-top: 20px;
	padding-left: 8px;
}
.danjia-num p:nth-child(1){
	color: #BBBBBB;
}
.danjia-num p:nth-child(2){
	font-size: 13px;
	font-weight: bold;
}
/*数量数字*/
.shuliang-num{
	width: 120px;
	height: 99px;
}
.shuliang-num p{
	display: inline-block;
	position:relative;
	text-align: center;
	line-height: 25px;
	top: -13px;
	width: 41px;
	height: 25px;
	border: solid 1px #bbb;
}
/*金额的数字*/
.jine-num{
	color: #FF4400;
	font-weight: bold;
	top: -20px;
	width: 112px;
	height: 99px;
}
.jine-num p{
	font-size: 14px;
}
.gouwuche-caozuo{
	left: 67px;
	width: 60px;
	height: 99px;
}
/*操作的文字*/
.gouwuche-caozuo a{
	color: black;
}
/*图片加边框*/
.gouwuche-imghe img:nth-child(1){
	border: solid 1px #ccc;	
}
/*店铺栏与的margin-top*/

.daintop-2{
	margin-top: 20px;
}
/*底部*/
.footer{
	width: 990px;
	height: 50px;
	margin-top:15px;
	background-color: #E5E5E5;
}
/*footer左边*/
.footer-left{
	float: left;
	width: 300px;
	height: 50px;
	line-height: 50px;
	display: flex;
	justify-content: space-between;
}
.footer div a{
	color:black;
}
/*footer右边*/
.footer-jiesuan{
	width: 400px;
	height: 50px;
	line-height: 50px;
	display: flex;
	justify-content: space-between;
	float: right;
}
.footer-jiesuan span span{
	color: #FF0000;
	font-size: 18px;
	font-weight: bold;
}
/*总金额num*/
.zongjine{
	color: #FF0000;
	font-size: 22px;
}
/*底部结算按钮*/
.warpper .footer-btn-jie{
	width: 120px;
	height: 50px;
	background-color:#B0B0B0;
	color: white;
	text-align: center;
	font-size:22px;
}