手机端电商购物车增减数量页面效果代码

代码语言:html

所属分类:电商

代码描述:手机端电商购物车页面效果代码

代码标签: 购物车 增减 数量 页面 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
	<script>
	function setRem(){
		var html=document.querySelector("html");
		var width=html.getBoundingClientRect().width;
		html.style.fontSize=width/20+"px";
	}
	setRem();
	window.addEventListener("orientationchange",setRem);
	window.addEventListener("resize",setRem);
	</script>
	<style>
	*{margin: 0;padding: 0;}
	body{color: #444;background:white;}
	.header{
		position: relative;
		width:100%;
		height: 2.25rem;
		font-size: 1rem;
		line-height: 2.25rem;
		color:#333;
		text-align: center;

		}
		.icon-zuojiantou{
			position: absolute;
			left: 0.7rem;
			font-size: 1.5rem;
		}
		.icon-fenxiang{
			position: absolute;
			right: 0.7rem;
			font-size: 1.5rem;
		}
		.one{
			width: 100%;
			height:8.8rem;
			border-bottom:1px solid #000;
			position:relative;
			color: #fff;
			padding: 0.3rem;

		}
		.one .beijing img{
			width:100%;
			height:8.8rem;
		}
		.one .login{
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height: 100%;
			background:rgba(0,0,0,0.5);
		}
		.one1{
			width:25%;
			display: inline-block;
			vertical-align: top;

			}
		p{margin: 0;padding: 0;}
		.one1 img{
			width:3rem;
			height: 3rem;
			border-radius: 15px;
			background: #000;
			margin-left: 0.8rem;
			margin-bottom: 0.5rem;
			margin-top: 1.25rem;
		}
		.one1 span{
			font-size: 0.7rem;
		}
		.one1 .icon-jinakangbaoicons12{
			font-size: 1rem;
			margin-left: 0.6rem;
			color:rgb(173,173,171);
			color: #fff;
		}
		.one2{
			width:53%;
			display: inline-block;
			vertical-align: top;
			margin-top: 1.1rem;
			margin-left: -0.7rem;
			font-size: 0.7rem;
			line-height: 1.3rem;
		}
		.one2 .icon-dianhua{
			font-size: 0.8rem;
			color:rgb(173,173,171);
			color: #fff;
		}
		.one2 .icon-weizhi{
			font-size: 0.8rem;
			color:rgb(173,173,171);
			color: #fff;
		}
		.one2 .p1{
			font-size: 1.1rem;
			margin-bottom: 0.2rem;
		}
		.one2 .s1{
			margin-left: 1rem;
			margin-right: 2rem;
		}
		.one3{
			width:18%;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			margin-top: 2.2rem;
			margin-left: 0.5rem;
		}
		.one3 .i1{
			display: inline-block;
			width: 1.7rem;
			height: 1.7rem;
			background:  rgb(55,199,184);
			text-align: center;
			line-height: 1.7rem;
			border-radius: 1.7rem;
			margin-bottom: 1rem;
		}
		.one3 .icon-dianhua{
			font-size: 0.9rem;
		}
		.one3 .icon-youjiantou{
			font-size: 0.7rem;
		}
		.one4{
			border-top:4px dashed #fff;
			width:90%;
			margin-left: 0.9rem;
			margin-top: 0.5rem;
			display: inline-block;
			font-size: 0.6rem;
			line-height: 2.2rem;
		}
		.one4 img{
			width: 1.5rem;
			height: 1.5rem;
			display: inline-block;
			vertical-align: middle;
		}
		.one4 span{
			margin-right: 0.5rem;
		}
		.one4 .icon-youjiantou{

			font-size: 0.8rem;
			margin-left: 1rem;
		}
		.two{
			width:90%;
			height: 1.8rem;
			margin-left: 0.7rem;
			margin-top: 0.7rem;
			border-bottom: 2px solid #ccc;

		}
		.two li{
			list-style:none;
			float: left;
			font-size: 1rem;
			margin-left: 4.5rem;
		}
		.two li:last-child{
			width:3rem;
			text-align: center;
			margin-left: 4rem;
			border-bottom: 4px solid rgb(55,199,184);
			padding-bottom: 0.45rem;
		}
		.three{
			display: inline-block;
			width: 90%;
			height: 5rem;
			margin-left: 0.7rem;
			border-bottom:1px solid #ccc;
		}
		.three .three1{
			width:23%;
			display: inline-block;
			vertical-align: top;
			text-align: center;
		}
		.three .three1 img{
			width:3.8rem;
			height: 3.8rem;
			margin-top: 0.5rem;
		}
		.three .three2{
			width: 35%;
			display: inline-block;
			vertical-align: top;
			margin-top: 0.4rem;
			margin-left: 0.5rem;
			line-height: 1.2rem;
		}
		.three2 .p2{
			font-size: 0.9rem;
		}
		.three2 .p3{
			font-size: 0.6rem;
			color: #999;	
		}
		.three2 .p3 span{
			margin-left: 0.3rem;
		}
		.three2 .p4{
			font-size: 0.9rem;
			color:red;
		}
		.three2 .p4 span:last-child{
			font-size: 0.6rem;
		
		}
		.three .three3{
			width: 30%;
			display: inline-block;
			vertical-align: top;
			line-height: 4.5rem;
			text-align: right;
		}
		.three .jia{
			display: inline-block;
			vertical-align: top;
		}
		.three .icon-jiahao{
			font-size:1rem;
			color: rgb(55,199,184);
		}
		.three .jian{
			display: inline-block;
			vertical-align: top;
		}
		.three .icon-jianhao{
			font-size:1rem;
			color: rgb(55,199,184);
		}
		.four{
			width:100%;
			position: fixed;
			bottom: 0;

		}
		.four .top{
			width: 3.5rem;
			height: 3.5rem;
			border-radius: 3.5rem;
			border:2px solid #999;
			margin-bottom:0.5rem;
			margin-left: 2rem;

		}
		.four .bottom{
			position: absolute;
			left: 0;
			bottom:0;
			width:100%;
			height:3rem;
			border-top: 2px solid #999;
			background: #fff;
		}
		.bottom .last{
			width: 0.8rem;
			height: 0.8rem;
			border-radius: 50%;
			background: red;
			color: #fff;
			margin-top: -3rem;
			margin-left: 2rem;
			font-size: 0.8rem;
			line-height: 0.8rem;
		}
		.four .four1{
			float: left;
			width:3rem;
			height: 3rem;
			border-radius: 3rem;
			border:0.2rem solid #fff;
			margin-left: 2.1rem;
			margin-top: -1rem;
			background: #ccc;
			text-align: center;
			line-height: 3rem;
		}
		.four .icon-unie62d{
			font-size: 1.5rem;
			font-weight: bold;
			color: #fff;
		}
		.four .four2{
			float: left;
			font-size: 0.8rem;
			margin-top: 0.3rem;
			margin-left: 1rem;
			line-height: 1.2rem;
		}
		.four2 .p6 span{
			color: red;
			font-size: 1rem;
		}
		.four2 .p5{
			font-size: 0.7rem;
		}
		.four .four3{
			float: left;
			width:5rem;
			height: 3rem;
			background: #ccc;
			position: fixed;
			right: 0;
			font-size: 1.2rem;
			color: #fff	;
			text-align: center;
			line-height: 3rem;
		}
		.loge{visibility: hidden;}
		.last{visibility: hidden;}
	</style>
</head>
<body>
	<div class="header">
		<i class="fa fa-lg fa-angle-left" style="position: absolute;left: 0.7rem;top:0.6rem;"></i>
		<span>靓丽女装店</span>
		<i class="fa fa-lg fa-share-square-o" style="position: absolute;right: 0.7rem;top:0.6rem;"></i>
	</div>
	<div class="one">
		<div class="beijing">
			<img src="//repo.bfw.wiki/bfwrepo/image/5e15dae696d11.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_200,/quality,q_90" alt="">
		</div>
		<div class="login">
			<div class="one1">
				<img src="//repo.bfw.wiki/bfwrepo/image/5e0e941197338.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="">
				<i class="fa fa-heart-o" style="margin-left: 0.9rem;"></i>
				<span>收藏</span>
			</div>
			<div class="one2">
				<p class="p1">魅丽图书专营店</p>
				<p>
				
					<span>电话:13888888888</span>
				</p>
		.........完整代码请登录后点击上方下载按钮下载查看

网友评论0