效果图展示
html+js部分
关于购物车实现的功能
1、仿京东购物车页面效果实现
2、购物车已有商品展示
3、数量增减
4、小计
5、汇总
6、全选
7、全选并汇总
8、单个商品复选
9、单个商品复选并汇总
10、全选和复选互动
11、删除商品
12、删除商品并汇总
13、删除和全选互动
14、添加商品展示
15、添加商品手动轮播
16、添加商品自动轮播
17、添加商品到购物车
18、添加商品到购物车并汇总
19、添加商品到购物车并重复添加处理
20、添加商品到购物车代码封装
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的购物车</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
</head>
<body>
<div id="contain">
<div id="banner">
<div class="banner1">
<div class="banner2">
<ul>
<li><img src="img/小房子_03.png"></li>
<li><a href="#">京东首页</a></li>
<li><i class="fa fa-map-marker" aria-hidden="true"></i></li>
<li>
<option>广东</option>
</li>
</ul>
</div>
<div class="banner3">
<ul>
<li><a href="#">余生</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span></li>
<li><a href="#">我的订单</a></li>
<li><span>|</span></li>
<li><a href="#">我的京东</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span></li>
<li><a href="#">京东会员</a></li>
<li><span>|</span></li>
<li><a href="#">企业采购</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span>
<li>
<li><a href="#">客户服务</a><i class="fa fa-chevron-down" aria-hidden="true"></i></li>
<li><span>|</span></li>
<li><a href="#">网站导航</a></li>
<li><span>|</span>
<li>
<li><a href="#">手机京东</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div class="content1">
<div class="logo"><img src="img/京东购物车项目.png"><a href="#">购物车</a></div>
<div class="from">
<input type="text" class="search" value=''>
<span class='photo' title="未选择取任何文件">
<img src="camera.png" alt="">
</span>
<button class='button'>
<i>搜索</i>
</button>
</div>
</div>
<div class="content2">
<div class="dl">
<ul>
<li class="sanjiao"><img src="img/三角警告_07.png"></li>
<li class="denglu">你还没有登录!请登录后购物车的商品将保存到你的账号中</li>
<li><button class="dl1"><i>立即登录</i></button></li>
</ul>
</div>
</div>
<div class="content3" id="jd_cart">
<div class="jdsp">
<div class="allshopping">
<ul>
<li><em>全部商品</em></li>
<li>
<hr class="underscorecharacter" />
</li>
</ul>
</div>
<div class="region">
<ul>
<li>配送至:</li>
<li>
<select class="area">
<option>广东省汕头市龙湖区</option>
</select>
</li>
</ul>
</div>
</div>
<div class="operationbox">
<div class="allcheck">
<input type="checkbox" checked id="checkAll" />全选
</div>
<div class="shopping">商品</div>
<div class="nullbox"></div>
<div class="unitprice">单价</div>
<div class="amount">数量</div>
<div class="subtotal">小计</div>
<div class="system">操作</div>
</div>
</div>
<div id="content5">
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手机1.png"></div>
<div class="phoneinformation"><a href="#">小米10 Pro 双模5G手机【下单送豪</br>   礼】骁龙865 新品游戏手机小米10pro</a></div>
<div class="phonechoose" title="珍珠白">珍珠白 8+258GB</br>官方标配</div>
<div class="price">¥4699.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">¥4699.00</div>
<div class="opreate"><a href="#">删除</a></div>
</div>
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手机2.png"></div>
<div class="phoneinformation"><a href="#">小米10 5G游戏手机【至高12期分期0</br>首付】 钛银黑 8G+256G</a></div>
<div class="phonechoose" title="钛银黑">钛银黑</br>8G+256G</div>
<div class="price">¥3788.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">¥3788.00</div>
<div class="opreate"><a href="#">删除</a></div>
</div>
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手机3.png"></div>
<div class="phoneinformation"><a href="#">Apple 苹果 iphone 11 手机 黄色 全网通 128GB</a></div>
<div class="phonechoose" title="黄色">黄色</br>全网通 128GB</div>
<div class="price">¥5489.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">¥5489.00</div>
<div class="opreate"><a href="#">删除</a></div>
</div>
<div class="phonebox1">
<div class="check"><input type="checkbox" checked id="checkAll" /></div>
<div class="phonepicture"><img src="img/手机4.png"></div>
<div class="phoneinformation"><a href="#">Apple 苹果 iphone 11 手机 绿色 全网通 128GB</a></div>
<div class="phonechoose" title="绿色">绿色</br>全网通 128GB</div>
<div class="price">¥5399.00</div>
<div class="number">
<button οnclick="calc(this)">-</button>
<span> 1 </span>
<button οnclick="calc(this)">+</button>
</div>
<div class="total">¥5399.00</div>
<div class="opreate"><a href="#">删除</a></div>
</div>
</div>
<div class="Bottombox">
<div class="bottombox">
<ul>
<li><input type="checkbox" checked id="checkAll" />全选</li>
<li><a href="#">删除选中商品</a></li>
<li><a href="#">移到关注</a></li>
<li><a href="#">清理购物车</a></li>
</div>
<div class="rightbottombox">
<div class="select">
已选择<span>4</span>件商品<i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="bottomprice">
总价:<span>¥19375.00</span>
</div>
<div class="settlement">
<button>去结算</button>
</div>
</div>
</div>
</div>
<div id="guessyoulike">
<h2 class="guesswhatyoulike">猜你喜欢</h2>
<hr class="guesswhatyoulike1">
<div id="goodlistdiv">
<ul id="goodlist">
</ul>
<div class="left">
<</div> <div class="right">>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="footer1">
<div class="fourzt">
<ul>
<li><img src="img/多_03.png"></li>
<li><i class="ttf">品类齐全,轻松购物</i></li>
<li><img src="img/快_03.png"></li>
<li><i class="ttf">多仓直发,极速配送</i></li>
<li><img src="img/好_03.png"></li>
<li><i class="ttf">正品行货,精致服务</i></li>
<li><img src="img/ʡ_03.png"></li>
<li><i class="ttf">天天低价,畅选无忧</i></li>
</ul>
</div>
<hr>
<div class="btbox">
<div class="bt1">
<h2>购物指南</h2>
<ul>
<li><a href="#">购物流程</a></li>
<li><a href="#">会员介绍</a></li>
<li><a href="#">生活旅行/团购</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">大家电</a></li>
<li><a href="#">联系客服</a></li>
</ul>
</div>
<div class="bt2">
<h2>配送方式</h2>
<ul>
<li><a href="#">上门自提</a></li>
<li><a href="#">211限时达</a></li>
<li><a href="#">配送服务查询</a></li>
<li><a href="#">配送费收取标准</a></li>
<li><a href="#">海外配送</a></li>
</ul>
</div>
<div class="bt3">
<h2>支付方式</h2>
<ul>
<li><a href="#">货到付款</a></li>
<li><a href="#">在线支付</a></li>
<li><a href="#">分期付款</a></li>
<li><a href="#">公司转账</a></li>
</ul>
</div>
<div class="bt4">
<h2>售后服务</h2>
<ul>
<li><a href="#">售后政策</a></li>
<li><a href="#">价格保护</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#">返修/退换货</a></li>
<li><a href="#">取消订单</a></li>
</ul>
</div>
<div class="bt5">
<h2>特色服务</h2>
<ul>
<li><a href="#">夺宝岛</a></li>
<li><a href="#">DIY装机</a></li>
<li><a href="#">延保服务</a></li>
<li><a href="#">京东E卡</a></li>
<li><a href="#">京东通信</a></li>
<li><a href="#">京东鱼智能</a></li>
</ul>
</div>
</div>
<hr>
<div class="dxbox">
<div class="dbdht">
<ul>
<li><a href="#">关于我们</a></li>
<li><span>|</span></li>
<li><a href="#">联系我们</a></li>
<li><span>|</span></li>
<li><a href="#">联系客服</a></li>
<li><span>|</span></li>
<li><a href="#">合作招商</a></li>
<li><span>|</span></li>
<li><a href="#">商家帮助</a></li>
<li><span>|</span></li>
<li><a href="#">营销中心</a></li>
<li><span>|</span></li>
<li><a href="#">手机京东</a></li>
<li><span>|</span></li>
<li><a href="#">友情链接</a></li>
<li><span>|</span></li>
<li><a href="#">销售联盟</a></li>
<li><span>|</span></li>
<li><a href="#">京东社区</a></li>
<li><span>|</span></li>
<li><a href="#">风险监测</a></li>
<li><span>|</span></li>
<li><a href="#">隐私政策</a></li>
<li><span>|</span></li>
<li><a href="#">京东公益</a></li>
<li><span>|</span></li>
<li><a href="#">English Site</a></li>
<li><span>|</span></li>
<li><a href="#">Media & IR</a></li>
</ul>
</div>
<div class="dbdht1">
<ul>
<li><a href="#">京公网安备 11000002000088号</a></li>
<li><span>|</span></li>
<li>京ICP证070359号</li>
<li><span>|</span></li>
<li><a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a></li>
<li><span>|</span></li>
<li>新出发京零 字第大120007号</li>
</ul>
</div>
<div class="dbdht2">
<ul>
<li>互联网出版许可证编号新出网证(京)字150号</li>
<li><span>|</span></li>
<li><a href="#">出版物经营许可证</a></li>
<li><span>|</span></li>
<li><a href="#">网络文化经营许可证京网文[2014]2148-348号</a></li>
<li><span>|</span></li>
<li>违法和不良信息举报电话:4006561155</li>
<li><span>|</span></li>
</ul>
</div>
<div class="dbdht3">
<ul>
<li>
<p>Copyright © 2004-2020京东JD.com版权所有</p>
</li>
<li><span>|</span></li>
<li>消费者维权热线:4006067733 <a href="#">经营证照 </a></li>
<li><span>|</span></li>
<li> (京)网械平台备字(2018)第00003号 </li>
<li><span>|</span></li>
<li><a href="#"> 营业执照</a></li>
</ul>
</div>
<div class="dbdht4">
<ul>
<li><img src="img/国旗_03.png"></li>
</ul>
</div>
<div class="dbdht5">
<ul>
<li>京东旗下网站: <a href="#">京东钱包</a>
<li>
<li><span>|</span></li>
<li> <a href="#">京东智联云</a></li>
</ul>
</div>
<div class="dbdht6">
<ul>
<ul>
<li><img src="img/网站_03.png"></li>
<li class="zt">可信网站</br>信用评价</li>
<li><img src="img/网警_03.png"></li>
<li class="zt">网络警察</br>提醒你</li>
<li><img src="img/诚信_03.png"></li>
<li class="zt1">诚信网站</li>
<li><img src="img/互联_03.png"></li>
<li class="zt">网上有害信</br>息举报专区</li>
<li><img src="img/下载_03.png"></li>
<li class="zt">网络举报</br>APP下载</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//手动轮播
//获取左右按钮,加单击事件
var guessyoulike = document.getElementById("guessyoulike");
var leftDiv = guessyoulike.getElementsByClassName("left")[0];
var rightDiv = guessyoulike.getElementsByClassName("right")[0];
var ul = document.getElementById("goodlist");
//向左移动
var timer = null;
leftDiv.onclick = leftMove;
function leftMove() {
//获取ul当前的left值
var left = Math.ceil(ul.offsetLeft / 280) * 280; //重新计算left值是280的倍数
left -= 280;
if (left < -1120) {
left = 0;
}
//运动效果
//ul.style.left=left+"px";
clearInterval(timer); //停止上次定时器
timer = setInterval(function() { //开启定时器两个参数
leftDiv.onclick = null; //一次运动没有完成时不能再次点击
if (ul.offsetLeft > left) { //还没到目标位置
var newLeft = ul.offsetLeft - 5; //计算一小步
ul.style.left = newLeft + "px"; //运动一小步
} else {
clearInterval(timer); //停止定时器
ul.style.left = left + "px"; //修正最终位置
leftDiv.onclick = leftMove; //本次定时器结束单击事件再次有效
}
}, 20); //每隔20秒调用一次函数
}
//向右移动
rightDiv.onclick = rightMove;
function rightMove() {
//获取ul当前的left值
var left = Math.ceil(ul.offsetLeft / 280) * 280;
left += 280;
if (left > 150) {
left = -1120;
}
//ul.style.left=left+"px";
clearInterval(timer);
timer = setInterval(function() {
rightDiv.onclick = null;
if (ul.offsetLeft < left) { //还没到目标位置
var newLeft = ul.offsetLeft + 5;
ul.style.left = newLeft + "px";
} else {
clearInterval(timer);
ul.style.left = left + "px";
rightDiv.onclick = rightMove;
}
}, 20)
}
//鼠标滑入和滑出时左右箭头现实
var autoMoveTimer = null;
guessyoulike.onmouseover = function() { //显示
leftDiv.style.display = "block";
rightDiv.style.display = "block";
clearInterval(autoMoveTimer);
}
guessyoulike.onmouseout = function() { //隐藏
leftDiv.style.display = "none";
rightDiv.style.display = "none";
autoMove();
}
//自动轮播
function autoMove() {
var left = -1120;
autoMoveTimer = setInterval(function() {
if (ul.offsetLeft > left) {
var newLeft = ul.offsetLeft - 1;
ul.style.left = newLeft + "px";
} else {
ul.style.left = 0;
}
}, 20)
}
autoMove();
//添加商品到购物车
//1.自动生成商品列表
//商品数据
var goodsArr = [{
imgUrl: "img/phone.jpg",
name: "华为(HUAWEI)荣耀9Play3",
price: "868"
},
{
imgUrl: "img/phone2.jpg",
name: "天语H5全面屏",
price: "668"
},
{
imgUrl: "img/phone3.jpg",
name: "OPPO Find X2手机",
price: "4999"
},
{
imgUrl: "img/phone4.jpg",
name: "vivo X50 5G手机",
price: "3498"
},
{
imgUrl: "img/phone5.jpg",
name: "三星 Galaxy A90",
price: "2699"
},
{
imgUrl: "img/phone6.jpg",
name: "Redmi 10X天玑820",
price: "1799"
},
{
imgUrl: "img/phone7.jpg",
name: "vivo S5 8GB+128GB",
price: "1998"
},
{
imgUrl: "img/phone8.jpg",
name: "vivo X30 双模5G",
price: "2998"
},
];
//把以上商品放入ul列表
//获取存放的商品ul
var goodlist = document.getElementById("goodlist");
//遍历数组通过函数来进行处理
//创建li
goodsArr.forEach(function(el, idx) {
var li = document.createElement("li");
goodlist.appendChild(li);
//创建li中的内容
var htmlStr = "<div><img src='" + el.imgUrl + "'></div>"
htmlStr += "<div>" + el.name + "</div>";
htmlStr += "<div>¥" + el.price + "</div>";
htmlStr += "<div οnclick='addCart(" + idx + ")'><a href='#'>添加到购物车</a></div>";
li.innerHTML = htmlStr;
})
//实现商品到购物车
function addCart(i) {
//一.如果添加的商品已经在购物车存在,则在数量上增加即可
//通过要添加的商品名称与购物车商品名称对比
//如果有相同的名称,则表示此商品已经添加过
//(1)获取购物车中所有的商品名称
//(a)获取content5所有行
var content5 = document.getElementById("content5");
var alldiv = content5.children;
//console.log(alldiv);
//(b)获取所有商品名称
var allGoodsNameArr = [];
for (var k = 0; k < alldiv.length; k++) {
//console.log(k);
//console.log(alldiv[k]);
allGoodsNameArr.push(alldiv[k].children[2].innerText);
//console.log(alldiv[k].children.length);
}
//(2)查找要添加的商品名称是否存在于购物车
var index = allGoodsNameArr.findIndex(function(v) {
return v == goodsArr[i].name;
}); //返回-1,表示在数组中不存在要比较的对象
if (index != -1) { //如果添加的商品已经存在于购物车中
//获取已添加商品中所在盒子中的数量加1
var n = alldiv[index].getElementsByTagName("span")[0].innerText;
n++;
alldiv[index].getElementsByTagName("span")[0].innerText = n;
//更新小计 单价*数量
var price = alldiv[index].getElementsByClassName('price')[0].innerText.substr(1);
console.log(price);
alldiv[index].getElementsByClassName('total')[0].innerHTML = "¥" + n * price;
//更新总计
total();
return; //不再执行下面的代码,即购物车中不再添加新行
}
var content5 = document.getElementById("content5");
var newDiv = document.createElement("div");
var phonebox1 = newDiv.classList.add("phonebox1");
content5.appendChild(newDiv);
//二.如果购物车没有此商品,则商品添加此商品到购物车中
var newDiv1 = document.createElement("div");
newDiv.appendChild(newDiv1);
var check = newDiv1.classList.add("check");
var newCheckbox = document.createElement("input");
newCheckbox.setAttribute("type", "checkbox");
newCheckbox.setAttribute("checked", true);
newDiv1.appendChild(newCheckbox);
console.log(allCheckbox.length);
var arr = Array.from(allCheckbox);
checkAll.checked = arr.every(function(v) {
return v.checked;
});
//实现复选功能
newCheckbox.onchange = function() {
// var arr = Array.from(allCheckbox);
//只要数组中元素的checked值有一个为假,every函数的返回值为假
checkAll.checked = arr.every(function(v) {
return v.checked;
});
total();
}
//放入图片
var newDiv2 = document.createElement("div");
newDiv.appendChild(newDiv2);
var phonepicture = document.createElement("img");
newDiv2.appendChild(phonepicture);
phonepicture.src = goodsArr[i].imgUrl;
phonepicture.width = 104;
phonepicture.height = 104;
newDiv2.className = 'phonepicture1';
//放入商品名称
var newDiv3 = document.createElement("div");
newDiv.appendChild(newDiv3);
var phoneinformation = document.createElement("a");
phoneinformation.setAttribute("href", "#");
newDiv3.appendChild(phoneinformation);
phoneinformation.innerText = goodsArr[i].name;
phoneinformation.width = 300;
phoneinformation.height = 100;
newDiv3.className = 'phoneinformation';
//放入一个空盒子
var newDiv4 = document.createElement("div");
newDiv4.className = 'phonechoose1';
newDiv.appendChild(newDiv4);
//放入单价
var newDiv5 = document.createElement("div");
newDiv5.className = 'price';
newDiv.appendChild(newDiv5);
newDiv5.innerHTML = "¥" + goodsArr[i].price;
//放入数量
var newDiv6 = document.createElement("div");
newDiv6.className = 'number';
newDiv.appendChild(newDiv6);
newDiv6.innerHTML = '<button οnclick="calc(this)">-</button><span> 1 </span><button οnclick="calc(this)">+</button>';
//放入小计
var newDiv7 = document.createElement("div");
newDiv7.className = 'total';
newDiv.appendChild(newDiv7);
newDiv7.innerHTML = "¥" + goodsArr[i].price;
total();
//删除操作
var newDiv8 = document.createElement("div");
newDiv8.className = 'opreate';
newDiv.appendChild(newDiv8);
newDiv8.innerHTML = "<a href='#'>删除</a>";
newDiv8.getElementsByTagName('a')[0].onclick = function() {
this.parentNode.parentNode.remove(); //删除行
total();
var arr = Array.from(allCheckbox);
//只要数组中元素的checked值有一个为假,every函数的返回值为假
checkAll.checked = arr.every(function(v) {
return v.checked;
});
//删除全部商品后全选按钮不再被选中
if (allCheckbox.length === 0) {
checkAll.checked = false;
}
};
}
//删除
var content5 = document.getElementById("content5");
var allA = content5.getElementsByTagName("a"); //拿到所有a
//console.log(allA);
for (var i = 1; i < allA.length; i += 2) { //遍历奇数a
allA[i].onclick = function() {
this.parentNode.parentNode.remove(); //删除整个盒子
total(); //重新总计
//由每一个盒子复选框状态决定全选按钮状态
//把复选框集合转成数组
var arr = Array.from(allCheckbox);
//只要数组中元素的checked值有一个为假,every函数的返回值为假
checkAll.checked = arr.every(function(v) {
return v.checked;
});
//删除全部商品后全选按钮不再被选中
if (allCheckbox.length === 0) {
checkAll.checked = false;
}
}
}
//获取全选按钮复选框
var checkAll = document.getElementById("checkAll");
var content5 = document.getElementById("content5");
var allCheckbox = content5.getElementsByTagName("input"); //获取盒子中所有的复选框
console.log(allCheckbox.length);
for (var i = 0; i < allCheckbox.length; i++) {
allCheckbox[i].onchange = function() {
total();
//由每一个盒子复选框状态决定全选按钮状态
//把复选框集合转成数组
var arr = Array.from(allCheckbox);
//只要数组中元素的checked值有一个为假,every函数的返回值为假
checkAll.checked = arr.every(function(v) {
return v.checked;
}); //对数组里每个元素进行遍历
}
}
//全选和全不选功能实现
checkAll.onchange = function() {
for (var i = 0; i < allCheckbox.length; i++) {
allCheckbox[i].checked = checkAll.checked;
}
total();
}
//*****************01
function total() {
//三.总计
var content5 = document.getElementById("content5");
var alldiv = content5.children;
var allCheckbox = content5.getElementsByTagName("input"); //获取盒子中所有的复选框
//console.log(allCheckbox);
var total = 0;
for (var i = 0; i < alldiv.length; i++) {
//累加复选框选中的盒子进行小计
if (allCheckbox[i].checked) { //复选框选中状态
total += parseFloat(alldiv[i].children[6].innerText.substr(1));
}
}
//console.log(total);
//找到最后一个总计
var content = document.getElementById("content");
var Bottombox = content.getElementsByClassName("Bottombox")[0];
var rightbottombox = Bottombox.getElementsByClassName("rightbottombox")[0];
var bottomprice = rightbottombox.getElementsByClassName("bottomprice")[0];
//console.log(bottomprice);
bottomprice.innerHTML = "总价" + "¥" + total.toFixed(2);
}
function calc(btn) {
//一.数量增减
var div = btn.parentNode;
var spanArr = div.getElementsByTagName("span");
var span = spanArr[0];
var n = parseInt(span.innerText);
if (btn.innerText == '-') {
n--;
if (n < 1) {
n = 1;
}
} else {
n++;
}
span.innerText = n;
//二.小计
var pricediv = div.previousElementSibling;
var price = pricediv.innerText.substr(1);
var sumdiv = div.nextElementSibling;
sumdiv.innerHTML = "¥" + price * n;
total();
}
</script>
</html>
二.css部分
*{
margin: 0px;
padding: 0px;
}
body{
font-size:15px ;
font-family: "黑体";
}
ul li{
list-style: none;
}
ul li a{
text-decoration: none;
}
#contain{
width: 1920px;
}
#banner{
width: 1920px;
height: 40px;
background: lightgrey;
}
#content{
width: 1250px;
margin: 0px auto;
}
#footer{
width: 1920px;
height: 840px;
background: #EEEEEE;
display: flex;
align-items: center;
justify-content: center;
}
.banner1{
width: 1250px;
height: 40px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.banner2{
width: 162px;
height: 25px;
}
.banner3{
width: 864px;
height: 25px;
}
.content1{
width: 1250px;
height: 140px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 270px;
height: 80px;
font-size: 25px;
}
.logo a{
text-decoration: none;
color: black;
position: relative;
bottom: 15px;
}
.from{
width: 420px;
height: 34px;
border: 3px solid #e2231a;
}
.content2{
width: 1250px;
height: 60px;
background: lightgoldenrodyellow;
display: flex;
align-items: center;
border: 1px solid yellow;
}
.content3{
width: 1250px;
}
#guessyoulike{
width:1250px ;
height: 466px;
margin: 0px auto;
margin-top: 20px;
overflow: scroll;
position: relative;
}
.footer1{
width: 1250px;
height: 760px;
}
.fourzt{
width: 1110px;
height: 60px;
margin: 0px auto;
margin-top: 20px;
}
.btbox{
width: 1110px;
height: 320px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: flex-start;
}
.dxbox{
width: 1250px;
height: 300px;
}
.bt1{
width: 105px;
height: 200px;
}
.bt2{
width: 115px;
height: 200px;
margin-left:130px ;
}
.bt3{
width: 105px;
height: 200px;
margin-left:110px ;
}
.bt4{
width: 105px;
height: 200px;
margin-left: 140px;
}
.bt5{
width: 100px;
height: 200px;
margin-left: 145px;
}
.dbdht{
width: 1250px;
height: 40px;
}
.dbdht1{
width: 960px;
height: 30px;
margin: 0px auto;
}
.dbdht2{
width: 1054px;
height: 30px;
margin: 0px auto;
}
.dbdht3{
width: 980px;
height: 30px;
margin: 0px auto;
}
.dbdht4{
width: 809px;
height: 30px;
margin: 0px auto;
}
.dbdht5{
width: 687px;
height: 50px;
margin:0px auto;
}
.banner2 ul li{
float: left;
}
.banner2 ul li a:hover{
color: red;
}
.banner2 ul li a{
color: lightslategrey;
}
.banner2 ul{
margin-top:5px ;
}
.banner3 ul li{
float: left;
}
.banner3 ul{
margin-left: 300px;
margin-top: 5px;
color: grey;
}
.banner3 ul li a:hover{
color: red;
}
.banner3 ul li a{
color: grey;
}
.search{
width: 365px;
height: 34px;
border: 1px solid transparent;
background: transparent;
line-height: 34px;
overflow: hidden;
}
.button{
width: 58px;
height: 34px;
background: #E2231A;
border: 1px solid transparent;
outline: none;
cursor: pointer;
position: absolute;
top: 93px;
right: 315px;
}
button:hover{
background-color:#c81623 ;
}
.dl{
width: 700px;
height: 32px;
margin-left: 50px;
}
.dl1{
width: 73px;
height: 30px;
background: #C81623;
}
.dl1:hover{
color: red;
}
.dl ul li{
float: left;
}
.sanjiao{
margin-top:10px ;
}
.denglu{
font-size: 20px;
color: darkorange;
}
.fourzt ul li{
float: left;
font-size:20px ;
color: black;
}
.bt1 ul li a:hover{
color: red;
}
.bt1 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt1 ul li{
padding-top: 5px;
}
h2{
color: #777;
}
.bt2 ul li a:hover{
color: red;
}
.bt2 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt2 ul li{
padding-top: 5px;
}
.bt3 ul li a:hover{
color: red;
}
.bt3 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt3 ul li{
padding-top: 5px;
}
.bt4 ul li a:hover{
color: red;
}
.bt4 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt4 ul li{
padding-top: 5px;
}
.bt5 ul li a:hover{
color: red;
}
.bt5 ul li a{
color:grey ;
font-size: 16px;
margin-top: 10px;
}
.bt5 ul li{
padding-top: 5px;
}
.dbdht ul li{
float: left;
margin-top: 10px;
margin-left:5px ;
}
.dbdht ul li a:hover{
color: red;
}
.dbdht ul li a{
color: grey;
font-size: 15px;
}
span{
color: grey;
}
.dbdht1 ul li{
float: left;
margin-top:5px ;
color: grey;
padding-right: 5px;
}
.dbdht1 ul li a{
color: grey;
}
.dbdht1 ul li a:hover{
color: red;
}
.dbdht2 ul li{
float: left;
margin-top:5px ;
color: grey;
padding-right: 5px;
}
.dbdht2 ul li a{
color: grey;
}
.dbdht2 ul li a:hover{
color: red;
}
.dbdht3 ul li{
float: left;
padding-right: 5px;
color: grey;
margin-top: 5px;
}
.dbdht3 ul li a{
color: grey;
}
.dbdht3 ul li a:hover{
color: red;
}
.dbdht3 ul li p{
margin-top: -2px;
}
.dbdht5 ul li{
float: left;
padding-right: 5px;
color: grey;
margin-top: 5px;
}
.dbdht5 ul li a{
color: grey;
}
.dbdht5 ul li a:hover{
color: red;
}
.dbdht5 ul{
margin-left:150px;
}
.dbdht6 ul li{
float: left;
}
.dbdht6 {
width: 686px;
height: 50px;
margin: 0px auto;
}
.zt{
position: relative;
bottom: 2px;
color: dimgrey;
padding-right: 20px;
}
.zt1{
position: relative;
top: 5px;
color: dimgrey;
padding-right: 20px;
}
h3{
margin-top: 10px;
padding-left:10px ;
padding-right: 10px;
}
.sp a{
color: red;
font-size: 20px;
text-decoration: none;
}
.sp em{
font-style:normal ;
display: block;
line-height:40px ;
}
.sp1 hr{
border-bottom:1px solid red ;
margin-top: 8px;
}
.dq ul li{
float: left;
font-size: 18px;
}
.dq1{
width: 220px;
height: 27px;
margin-top: -2px;
font-size: 17px;
}
.dq2{
margin-left:16px ;
}
.jdsp{
width: 1250px;
height: 53px;
display: flex;
align-items: center;
justify-content: space-between;
}
.operationbox{
width: 1250px;
height: 52px;
display: flex;
align-items: center;
background: lightgrey;
}
.phonebox{
width: 1250px;
height: 272px;
background: #FFFF00;
display: flex;
align-items: center;
border:2px solid ;
border-color:grey mintcream mintcream mintcream;
}
.phonebox1{
width: 1250px;
height: 272px;
border:2px solid ;
border-color:grey mintcream mintcream mintcream;
display: flex;
align-items: center;
}
.Bottombox{
width: 1250px;
height: 69px;
border: 1px solid white;
display: flex;
align-items: center;
justify-content: space-between;
}
.allshopping{
width: 110px;
height: 40px;
font-size: 20px;
line-height: 40px;
}
.allshopping ul li{
color: red;
}
.underscorecharacter{
margin-top:4px ;
border-color: red;
}
em,i,u{
font-style: normal;
}
.ttf{
position: relative;
top: 5px;
}
.fourzt ul li{
font-size: 25px;
color: #000000;
}
.region{
width: 260px;
height: 40px;
font-size: 15px;
margin-top: 10px;
line-height: 30px;
}
.region ul li{
float: left;
}
.area{
width: 190px;
height: 31px;
}
.allcheck{
text-align: center;
width: 133px;
height: 32px;
line-height: 25px;
}
.shopping{
width: 208px;
height: 32px;
line-height: 27px;
text-align: center;
}
.nullbox{
width: 300px;
height: 32px;
}
.unitprice{
width: 160px;
height: 32px;
text-align: right;
line-height: 25px;
}
.amount{
width: 140px;
height: 32px;
text-align: center;
line-height: 25px;
}
.subtotal{
width: 140px;
height: 32px;
text-align: right;
line-height:25px ;
}
.system{
width: 75px;
height: 32px;
line-height: 25px;
text-align: right;
}
.check{
width: 16px;
height: 100px;
text-align: right;
margin-left: 40px;
}
.phonepicture{
width: 142px;
height: 100px;
text-align: center;
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: red;
}
.phoneinformation{
width: 300px;
height: 100px;
text-align: center;
}
.phonechoose{
width: 250px;
height: 100px;
}
.price{
width: 100px;
height: 100px;
}
.number{
width: 180px;
height: 100px;
}
.total{
width:98px ;
height: 100px;
}
.opreate{
height: 100px;
}
.bottombox{
width: 343px;
height: 27px;
text-align: center;
}
.bottombox ul li{
float: left;
padding-left: 5px;
padding-top: 5px;
}
.bottombox ul{
margin-left: 43px;
}
.rightbottombox{
width: 490px;
height: 68px;
display: flex;
}
.select{
height: 69px;
}
.bottomprice{
margin-left: 20px;
font-size: 30px;
color: grey;
}
.bottomprice span{
color: red;
}
.settlement button{
position: relative;
left: 5px;
margin-left:10px;
padding:20px;
padding-left:20px;
width:120px;
background:#F00;
font-size:18px;
font-weight: 800;
color:#FFF
}
.guesswhatyoulike{
color: red;
}
.guesswhatyoulike1{
width: 90px;
border-color:red ;
}
#goodlist li{
float: left;
width: 280px;
height: 360px;
border: 1px dashed #CACACA;
margin-top: 5px;
}
.phonechoose1{
width: 300px;
height: 100px;
}
#goodlist{
width: 2260px;
height: 400px;
border: 1px dashed #cacaca;
position: absolute;
margin-top: 2px;
}
#guessyoulike .left,#guessyoulike .right{
position: absolute;
width: 40px;
height: 100px;
line-height: 100px;
background-color: lightgray;
top: 100px;
font-size: 40px;
display: none;
}
#guessyoulike .left{
left: 0;
}
#guessyoulike .right{
right: 0;
text-align: center;
}
#goodlistdiv{
width:1130px ;
height: 370px;
margin-left: 46px;
margin-right: 46px;
position: absolute;
overflow: hidden;
}