HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<link rel="stylesheet" href="shoppingcar.css">
<link rel="stylesheet" href="taobaoItem.css">
<script src="/购物车页面/js/jquery-2.1.0.min.js"></script>
</head>
<body>
<!-- 最顶部信息条 -->
<div id="R_nav06" class="h_top clear"></div>
<!-- 有logo的-->
<div class="shopping_logo_div clear">
<div class="logo_con clear">
<!-- logo -->
<div class="shop_logo fl">
<img class="shop_logoimg fl" src="taobaoItemImage/logo.png" alt="">
<h2 class="fl">购物车</h2>
</div>
<!-- 搜索框 -->
<div class="fl">
<div class="shop_search fl clear">
<input class="fl search_input" type="text" placeholder="宝贝" />
<div class="shop_searchBtn fl jb">搜索</div>
</div>
</div>
</div>
<div class="content">
<!-- 底部结算条 -->
<div class="clear jiesuan">
<span></span>
<span>删除</span>
<span>清除失效宝贝</span>
<span>移入收藏夹</span>
<span>分享</span>
<span class="goodSum">已选商品0件</span>
<span class="goodPrice">合计(不含运费): 00.00 </span>
<span class="endprice">结算</span>
</div>
<hr>
<!-- head -->
<div class="clear" style="height: 60px;line-height: 60px">
<div style="width: 130px" class="fl">
<label><input class="allBox" type="checkbox">全选</label>
</div>
<div style="width:370px" class="fl">
<span>商品信息</span>
</div>
<div style="width:122px" class="fl">
<span>单价</span>
</div>
<div style="width:122px" class="fl">
<span>数量</span>
</div>
<div style="width:122px" class="fl">
<span>金额</span>
</div>
<div style="width:122px" class="fl">
<span>操作</span>
</div>
</div>
<div>
<div>
<div class="shop_div">
<div>
<div class="goods_div clear">
<input class="check" style="position: absolute;top: 15px;left: 15px;" type="checkbox" />
<div class="fr">
<img class="goods_img goodsindex01 fl" src="image/第一行代码Java.png" alt="">
<div class="goods_ind fl" style="width:180px;padding:0px 10px">
<span>芳册解觉原创 A5 裸装本你在我梦里如此长久日式手账本空白涂鸦本子</span>
</div>
<div style="width:160px;padding:0px 10px" class="fl">
<span>颜色分类：少年同游</span>
</div>
<div style="width:122px" class="fl">
<span>￥</span>
<span class="dj"> 15.00 </span>
</div>
<div style="width:122px" class="fl">
<button class="jian" style="width:15px">-</button>
<input class="shu" style="width: 20px" type="text" value="1"
readonly="readonly">
<button class="jia" style="width:15px">+</button>
</div>
<div class="zongjia fl" style="width:122px">
<span>￥</span>
<span class="zongjia1">15.00</span>
</div>
<div class="gongneng fl" style="width:122px">
<span>移入收藏夹</span><br>
<span class="del">删除</span><br>
<span class="xsgoods">相似宝贝</span>
</div>
</div>
</div>
<div class="goods_div clear">
<input class="check" style="position: absolute;top: 15px;left: 15px;" type="checkbox" />
<div class="fr">
<img class="goods_img goodsindex01 fl" src="image/第一行代码Java.png" alt="">
<div class="goods_ind fl" style="width:180px;padding:0px 10px">
<span>芳册解觉原创 A5 裸装本你在我梦里如此长久日式手账本空白涂鸦本子</span>
</div>
<div style="width:160px;padding:0px 10px" class="fl">
<span>颜色分类：少年同游</span>
</div>
<div style="width:122px" class="fl">
<span>￥</span>
<span class="dj"> 20.50 </span>
</div>
<div style="width:122px" class="fl">
<button class="jian" style="width:15px">-</button>
<input class="shu" style="width: 20px" type="text" value="1"
readonly="readonly">
<button class="jia" style="width:15px">+</button>
</div>
<div class="zongjia fl" style="width:122px">
<span>￥</span>
<span class="zongjia1">20.50</span>
</div>
<div class="gongneng fl" style="width:122px">
<span>移入收藏夹</span><br>
<span class="del">删除</span><br>
<span class="xsgoods">相似宝贝</span>
</div>
</div>
</div>
<div class="goods_div clear">
<input class="check" style="position: absolute;top: 15px;left: 15px;" type="checkbox" />
<div class="fr">
<img class="goods_img goodsindex01 fl" src="image/第一行代码Java.png" alt="">
<div class="goods_ind fl" style="width:180px;padding:0px 10px">
<span>芳册解觉原创 A5 裸装本你在我梦里如此长久日式手账本空白涂鸦本子</span>
</div>
<div style="width:160px;padding:0px 10px" class="fl">
<span>颜色分类：少年同游</span>
</div>
<div style="width:122px" class="fl">
<span>￥</span>
<span class="dj"> 10.00 </span>
</div>
<div style="width:122px" class="fl">
<button class="jian" style="width:15px">-</button>
<input class="shu" style="width: 20px" type="text" value="1"
readonly="readonly">
<button class="jia" style="width:15px">+</button>
</div>
<div class="zongjia fl" style="width:122px">
<span>￥</span>
<span class="zongjia1">10.00</span>
</div>
<div class="gongneng fl" style="width:122px">
<span>移入收藏夹</span><br>
<span class="del">删除</span><br>
<span class="xsgoods">相似宝贝</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(() => {
//结算
$(".endprice").click(() => {
let neirong = $(event.target).parent().nextAll().eq(2).find("span").text()
console.log(neirong);
alert(neirong)
})
const zongjia = () => {
let goodszongjia = 0;
let goodsnum = 0;
$(".goods_div :checked").each((index, element) => {
// 使用箭头函数作为 each 的回调
const zongjia = parseFloat(
$(element) // 改用 element 参数
.parent()
.find(".zongjia1")
.text()
);
goodszongjia += zongjia;
goodsnum++;
});
$(".goodPrice").text(`合计(不含运费): ${goodszongjia.toFixed(2)}`);
$(".goodSum").text(`已选商品 ${goodsnum} 件`);
};
// 全选框
$(".allBox").click(() => {
var ff = $(event.target).prop("checked")
if (ff) {
$(".check").prop("checked", true)
zongjia()
}
})
//复选框
// $(".check").click(() => {
// let zj = parseFloat($(event.target).parent().find(".zongjia1").text())
// alert(zj)
// })
//prev()上一个 next()下一个
$(".jia").click(() => {
let oo = parseInt($(event.target).prev().val())
oo++
$(event.target).prev().val(oo)
//总价
let danjia = $(event.target).parent().prev().find(".dj").text()
zong = danjia * oo
$(event.target).parent().next().find(".zongjia1").text(zong.toFixed(2))
zongjia()
})
$(".jian").click(() => {
var oo = parseInt($(event.target).next().val())
if (oo == 1) {
alert("至少购买一件")
} else {
oo--
$(event.target).next().val(oo)
zongjia()
}
//总价减少 toFixed(2):保留两位小数
let danjia = $(event.target).parent().prev().find(".dj").text()
zong = danjia * oo
$(event.target).parent().next().find(".zongjia1").text(zong.toFixed(2))
zongjia()
})
})
</script>
</body>
</html>css:
.content{
width: 990px;
margin: 0 auto;
}
body{
background: #fff !important;
}
.shopping_logo_div{
width: 990px;
margin: 0 auto
}
.fl{
float: left;
}
.fr{
float: right;
}
*{
padding: 0px;
margin: 0px
}
.clear::after{
content: "";
width: 0px;
height: 0px;
display: block;
clear: both;
}
span{
font-size: 12px;
}
.mr20{
margin-right: 20px;
}
.jiesuan{
position: fixed;bottom: 0px; width:990px;height: 40px;;background: #E5E5E5;
z-index: 1;
}
.jiesuan span{
padding-top: 13px;
width:80px;
float: left;
}
.jiesuan>span:nth-child(7){
width:190px;
float: left;
}
.jiesuan>span:last-child{
width:120px;
height: 100%;
line-height: 100%;
float: right;
background: #ff5000;
}
.head{
height: 40px;line-height: 40px
}
.del{
cursor: pointer;
}
.shop_div{
width: 988px;border: 1px solid #ccc;margin-bottom: 20px;
}
.goods_div{
height:107px;padding-top:20px;border-top: 1px solid #e7e7e7;position: relative;background: #FCFCFC
}
.shouhou{
height: 53px;
line-height: 53px;
padding-left: 40px;
}
.shouhou span{
cursor: pointer;
margin-right: 20px;
}
.shouhou span:hover{
color: blue
}
.xsgoods{
position: relative;
top: 3px;
display: none;
}
.goods_div:hover .xsgoods{
display: block;
}
.gongneng span:hover{
cursor: pointer;
color: #ff5000;
}
.goods_ind:hover{
cursor: pointer;
color: #ff5000;
}
.zongjia span{
color: #ff5000;
font-size: 16px;
}
.middile{
background: #FCFCFC
}
.goods_img{
border: 1px solid #ccc;
width: 83px;
height:83px;
}
.endprice{
text-align: center;
font-size: 18px;
color: #fff;
font-weight: 600;
}
.check{
opacity: 0.5;
}
.delshop:hover{
color: #ff5000;
cursor: pointer;
}
.delshop{
margin-right: 20px;
font-size: 16px
}
.shop_search{
margin-top: 23px;
text-align: center;
width: 760px;
margin-left: 70px;
}
.shop_search input{
outline:none;
padding: 8px;
width: 555px;
height: 20px;
border: 2px solid #ff5000;
margin: 0 auto;
}
.shop_search .shop_searchBtn{
position: relative;
left: -2px;
text-align: center;
line-height: 40px;
color: #fff;
font-family: "宋体";
font-size: 22px;
font-weight: 700;
width: 76px;
height: 40px;
}
.shop_logo{
margin-top: 15px;
margin-right: 30px;
}
.shop_logo h2{
margin-top: 10px;
margin-left: 24px;
}
.fanhui{
display: none;
position: fixed;right: 40px;bottom: 80px;background: #ccc;color: #fff;padding: 6px;font-size: 14px;
}
.fanhui:hover{
cursor: pointer;
}
button{
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #ccc;
border: none;
cursor: pointer;
}
img:hover{
cursor: pointer;
}
input{
outline:none;
}css:
*{
padding: 0;
margin: 0
}
body{
background: #f1f1f1;
}
li{
list-style: none
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear::after{
content: "";
display: block;
clear: both;
width: 0;
height: 0;
}
.h_top{
width: 100%;
height:37px ;
background: #f5f5f5;
}
.h_top_con{
height: 37px;
line-height:35px;
margin: 0 auto;
width: 1190px;
padding-left: 3px;
padding-right: 3px;
}
.h_top_con li{
position: relative;
border: 1px solid transparent;
font-size: 12px;
float: left;
color: #6c6c6c
}
.h_top_con ul li:hover span{
color:#ff9900;
}
.h_top_con ul li:hover{
border: 1px solid rgb(226, 226, 226);
border-bottom: 1px solid #fff;
border-top:1px solid transparent;
cursor: pointer;
background: #fff;
z-index: 1;
}
.h_top_con ul .bgnone:hover{
border:1px solid transparent;
background:#f5f5f5;
}
.h_top_con ul li{
text-align: center
}
.h_top_con ul li .tu{
position: relative;top:2px;margin-right:3px
}
.h_top_con li:hover div{
display: block;
}
.h_top_con_l li{
z-index: 1;
width: 77px;
}
.h_top_con li img{
position: relative;
top: -2px;
margin-left: 8px;
}
.h_top_con_l li:nth-child(2){
width: 128px ;
}
.h_top_con_r li:nth-child(-n+4){
width: 84px !important;
}
.h_top_con_r li:nth-child(-n+6){
width: 80px ;
}
.h_top_con_r li:nth-child(7){
width: 98px ;
}
.pr{
position: relative;
}
.pa{
position: absolute;
}
.bs{
box-shadow: 0px 1px 1px rgb(226, 226, 226);
}
.area{
padding-top: 5px;
padding-bottom: 5px;
border: 1px solid #fff;
width: 270px;
height: 278px;
overflow: auto;
}
.area p{
padding-left: 10px;
text-align: left;
}
.area p:hover{
background: rgb(226, 226, 226);
}
.pri{
width: 266px;
height: 121px;
border: 1px solid #fff;
}
.pri_t p{
height: 29px;
text-align: left;
margin: 0px 5px 0px 5px;
}
.portrait{
margin-left: 30px;
width: 53px;
height: 53px;
border-radius: 53px;
background: url("taobaoItemImage/portrait.jpg");
background-size:100%
}
.por p{
text-align: left;
position: relative;
top: -8px;
margin: 0px 0px 0px 30px;
}
.look{
position: relative;
top: -10px;
margin: 0 auto;
width: 250px;
height: 26px;
line-height: 26px;
background:#fff0e8;
}
.ab{
display: none;
position: absolute;
top: 36px;
}
.bgfff{
background: #fff;
}
.message{
width: 280px;
height: 33px;
padding: 5px;
}
.message p{
text-align: right
}
.mytaobao{
padding-top: 5px;
padding-bottom: 5px;
width: 90px;
height: 60px;
}
.mytaobao p:hover ,.shoucang p:hover,.maijia p:hover,.kefu p:hover{
background: rgb(226, 226, 226);
}
.shoucang{
padding-top: 5px;
padding-bottom: 5px;
width: 78px;
height: 60px;
}
.maijia{
padding-top: 5px;
padding-bottom: 5px;
width: 83px;
height: 210px;
}
.kefu{
padding-top: 5px;
padding-bottom: 5px;
width: 70px;
height: 60px;
}
.mytaobao p ,.shoucang p,.maijia p,.area p,.kefu p{
padding-left: 4px;
text-align: left;
height: 30px;
}
.web{
display: none;
position: absolute;
top: 36px;
right: -1px;
width: 1190px;
height: 300px;
}
.web>div{
text-align: left;
padding: 10px;
margin: 0;
float: left;
height: 280px;
width: 276.5px;
border-right: 1px solid #eee
}
.web .h1,.web .h2,.web .h3,.web .h4{
margin-bottom: 5px;
line-height: 16px;
padding: 0px;
height: 18px;
font-size: 18px;
}
.web .h1{
color:#fc581e;
}
.web .h2{
color:#a6bd47;
}
.web .h3{
color:#d9609c;
}
.web .h4{
color:#41a8de;
}
.web .h1_1 div{
padding-left: 10px;
padding-right: 10px;
width: 24px;
height: 29px;
line-height: 29px;
border-radius: 6px;
}
a.yiqi{
color: #000;
}
a.yiqi:hover{
color: #ff5000;
}
.yiqidiv:hover a{
color: #ff5000;
}
.web .h2_1 div{
padding-left: 10px;
padding-right: 10px;
width: 38px;
height: 29px;
line-height: 29px;
border-radius: 6px;
}
.web .h3_1 div,.web .h4_1 div{
padding-left: 10px;
padding-right: 10px;
width: 50px;
height: 29px;
line-height: 29px;
border-radius: 6px;
}
.web .h1_1 div:hover{
background: #fc581e;
color: #fff;
}
.web .h2_1 div:hover{
background: #a6bd47;
color: #fff;
}
.web .h3_1 div:hover{
background: #d9609c;
color: #fff;
}
.web .h4_1 div:hover{
background: #41a8de;
color: #fff;
}
.web .h1_1{
width: 69px
}
.web .h2_1,.web .h3_1{
width: 92px
}
.web .h4_1{
width: 138px
}
.logo_div{
height: 122px;
width: 100%;
background: #fff;
}
.logo_con{
margin: 0 auto;
padding-top: 25px;
width:1190px;
height: 108px;
}
.logo{
width: 190px;
text-align: center;
margin-top: 10px;
}
.search{
text-align: center;
width: 760px;
margin-left: 70px;
}
.search input{
outline:none;
padding: 8px;
width: 555px;
height: 20px;
border: 2px solid #ff5000;
border-radius: 20px 0px 0px 20px;
margin: 0 auto;
}
.jb{
background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%);
}
.logo_con_t div{
cursor: pointer;
margin-right: 5px;
border-radius: 7px 7px 0px 0px;
text-align: center;
width: 36px;
height: 23px;
float: left;
font-size: 10px;
line-height: 23px;
}
.logo_con_t div:nth-child(1){
margin-left: 86px;
color: #fff;
}
.logo_con_t div:nth-child(2),.logo_con_t div:nth-child(3){
color: #ff5000;
}
.logo_con_t div:hover{
background-color: #FFEEE5 !important;
}
.searchBtn{
position: relative;
left: -2px;
text-align: center;
line-height: 40px;
color: #fff;
font-family: "宋体";
font-size: 22px;
font-weight: 700;
width: 76px;
height: 40px;
border-radius: 0px 20px 20px 0px ;
}
.logo_con_b{
margin-left: 70px;
}
.logo_con_b a{
color: #6c6c6c;
font-size: 10px;
margin-right: 4px;
text-decoration: none
}
.logo_con_b a:hover{
color: #ff5000;
}
.color_ff5000{
color: #ff5000 !important;
}
.icon{
width: 62px;
height: 62px;
}
.Q_icon p{
font-size: 13px;
color: #ff5000;
text-align: center;
}
.Q_icon{
padding: 3px;
text-align: center;
width: 76px;
height: 84px;
border:1px solid #eee
}
.Q_icon_close{
cursor: pointer;
text-align: center;
width: 16px;
height: 16px;
line-height: 16px;
border:1px solid #eee
}
.nav_div{
width: 100%;
height: 30px;
}
.nav{
color: #fff;
font-size: 18px;
font-family: "宋体";
font-weight: 700;
width:1190px;
height: 30px;
line-height: 30px;
margin: 0 auto;
}
.nav .list{
text-align: center;
width: 190px;
background: #ff5000;
}
.nav ul li{
position: relative;
padding-left: 10px;
float: left;
}
.nav ul span{
margin-left: 10px;
float: left;
}
.nav ul img:last-child{
display: none;
left: 30%;
top: -18px;
position: absolute;
}
.nav ul li:last-child{
height: 30px;
}
.nav ul li:hover img{
display: block;
}
.nav ul li:hover{
cursor: pointer;
}
.main{
width: 1190px;
margin: 0 auto;
}
.main_left{
z-index: 99;
background: #fff;
width: 188px;
height: 520px;
border: 1px solid #ff5000;
border-top: 0px;
}
.main_left ul{
position: relative;
padding: 4px 0px 4px 0px;
}
.main_left li{
z-index: 99;
font-size: 14px;
padding:3px 12px 3px 22px;
height: 26px;
line-height: 26px;
}
.main_left li a{
color: #6c6c6c;
text-decoration: none;
}
.main_left li a:hover{
text-decoration:underline;
}
.main_left li img{
position: relative;
top:2px;
}
.main_left li:hover{
color: #ff5000;
background: #FFEEE5;
}
.main_left li:hover a{
color: #ff5000;
}
.main_li_div{
display: none;
z-index: 99;
position: absolute;
top: 0px;
left: 190px;
width: 708px;
height: 521px;
background: #13d0a1;
box-shadow: 1px 1px 1px #ccc
}
.main_left li:hover>div{
color: #fff;
display: block;
}
.banner{
z-index: -1;
width: 520px;
height: 520px;
margin: 10px;
margin-bottom: 0;
}
.banner_t{
width: 520px;
height: 280px;
line-height: 280px;
background: #ccc;
margin-bottom: 10px;
position: relative;
}
.banner_t ul{
text-align: center;
position: absolute;
right: 42.7%;
bottom: 15px;
width: 76px;
height: 12px;
background: rgba(255,255,255,0.3);
border-radius: 15px;
}
.banner_t li{
margin:2px 3px;
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
.banner_t ul li:first-child{
background: #ff5000;
margin-left: 6px;
}
.banner_t .pre,.banner_t .next{
display: none;
position: absolute;
top:45%;
width: 21px;
height:15px;
padding-top: 7.5px;
padding-bottom: 7.5px;
background: rgba(0,0,0,0.3);
}
.banner_t .pre{
left: 0px;
border-radius: 0px 15px 15px 0px ;
}
.banner_t .next{
right: 0px;
border-radius: 15px 0px 0px 15px ;
}
.banner_t .next img{
position: relative;
left: 5px;
}
.banner_t .next img,.banner_t .pre img{
position: absolute;
top: 6px;
}
.banner_t .bt_img{
cursor: pointer;
display: none;
width: 520px;
height: 280px;
position: absolute;
top: 0px;
left: 0px;
}
.banner_b .bb_img{
cursor: pointer;
display: none;
bottom: 0px;
position: absolute;
width: 520px;
}
.banner_t>img:first-child{
display: block;
}
.banner_b .bb_img01{
display: block;
}
.banner_b{
position: relative;
width: 520px;
height: 221px;
/* background: #ccc; */
}
.banner_b ul{
position: absolute;
top: 19px;
width: 520px;
height: 3px;;
}
.banner_b li{
float: left;
width: 86.6px;
height: 3px;
background: #ff1648;
}
.banner_b ul li:first-child{
background: #000;
}
.banner_b .pre,.banner_b .next{
display: none;
position: absolute;
top:45%;
width: 21px;
height:15px;
padding-top: 7.5px;
padding-bottom: 7.5px;
background: rgba(0,0,0,0.3);
}
.banner_b .pre{
left: 0px;
border-radius: 0px 15px 15px 0px ;
}
.banner_b .next{
right: 0px;
border-radius: 15px 0px 0px 15px ;
}
.banner_b .next img{
position: relative;
left: 5px;
top:-2px;
}
.banner_b .pre img{
position: relative;
left: 1px;
top:-2px;
}
.bb_num{
font-size: 10px;
width: 10px
}
.picture{
margin: 10px 10px 0px 0px;
width: 160px;
}
.picture_t{
height: 280px;
margin-bottom: 10px;
}
.picture_b{
font-size: 10px;
color: rgb(136, 128, 128);
position: relative;
height: 221px;
}
.main_right{
margin: 10px 0px 0px 0px;
width: 290px;
height: 512px;
/* background: #ccc; */
}
.picture_b img{
left: 0px;
position: absolute;
bottom: 0px;
}
.main_r_t{
padding: 0px 16px;
padding-top: 5px;
text-align: center;
width: 258px;
height: 140px;
background: url("taobaoItemImage/main_r_bg.png");
}
.main_r_t .portrait{
margin: 0px auto;
margin-bottom: 5px;
}
.main_r_btn div{
margin-top: 10px;
font-size: 14px;
width:74px;
height: 25px;
line-height: 25px;
color: #fff;
margin-right: 9px;
border-radius: 6px;
}
.main_r_btn div:first-child{
width: 92px;
}
.main_r_btn div:last-child{
margin-right: 0px;
}
.main_r_lidiv{
background: #fff;
}
.main_r_lidiv ul{
height: 108px;
position: relative;
padding: 0px 12px
}
.main_r_lidiv li{
margin-right: 26px;
float: left;
line-height: 54px;
height: 54px;
}
.main_r_lidiv .main_last{
margin-right: 0px;
}
.main_r_lidiv ul>div{
width: 268px;
display: none;
font-size: 12px;
background: #fff;
position: absolute;
top: 54px;
}
.main_r_lidiv01{
display: block !important;
}
.main_r_lidiv div p{
line-height: 20px
}
.main_r_lidiv li:hover+div{
display: block;
}
.main_r_lidiv li a{
text-decoration: none;
color:#000;
}
.main_r_lidiv li a:hover{
cursor: pointer;
text-decoration: underline;
text-decoration:2px;
color:#ff5000;
font-weight: 600;
}
.main_r_b>ul{
position: relative;
}
.main_r_b>ul>li{
font-size: 12px;
z-index: 10 ;
float: left;
height: 48px;
width: 38.4px;
padding: 16px;
border:1px solid #fff;
border-right: 1px solid #f4f4f4;
background: #fff;
border-bottom: 1px solid #ff5000;
border-top:1px solid #f4f4f4;
}
/* .main_r_b li:first-child{
border:1px solid #ff5000;
border-bottom: 1px solid #fff;
} */
.main_r_b>ul>li:last-child{
border:1px solid transparent;
border-bottom: 1px solid #ff5000;
border-right: 1px solid transparent;
border-top:1px solid #f4f4f4;
}
.main_r_b>ul>li:hover{
color: #ff5000;
border:1px solid #ff5000;
border-bottom: 1px solid #fff;
}
.main_r_b>ul+div{
/* z-index: -1; */
border:1px solid #ff5000;
top:-1px;
position: relative;
width: 262px;
height: 123px;
padding: 18px;
background-color: #fff;
padding: 13px;
}
.main_r_b .div01 ul li{
height: 30px;
font-size: 12px;
float: left;
margin-left: 23px;
}
.main_r_b .div01 ul li:first-child{
float: left;
margin-left: 0px;
}
.taobao_tt{
cursor: pointer;
position: relative;
background: #fff;
width: 852px;
height: 62px;
line-height: 30px;
padding: 19px;
margin-right: 10px;
}
.toutiao{
width: 1190px;
margin: 0 auto;
}
.toutiao01:hover{
color:#ff5000
}
.al{
font-size: 12px;
padding-top: 5px;
padding-left: 13px;
height: 103px;
width: 277px;
background: #fff;
}
.al img{
width: 32px;
height: 32px;
margin: 5px 9.4px 2px 9.4px;
border-radius: 5px
}
.lifeyanjiu{
padding-left: 20px;
padding-top: 20px;
height: 146px;
width:1170px;
margin: 0 auto;
margin-top: 10px;
background: #fff;
}
img：hover{
cursor: pointer;
}
.lifeyj_img img{
margin-bottom: 20px;
height: 26px;
}
.lifeyj_div div div:first-child{
margin-right: 10px;
width: 82px;
height: 82px;
border-radius: 50%;
border: 1px solid #13d0a1
}
.lifeyj_div>div{
float: left;
width: 195px;
height: 82px;
}
.lifeyj_div div:hover div:first-child{
border-color: #ff5000;
}
.lifeyj_div div div{
float: left;
}
.lifeyj_div div p{
color: #f4f4f4;
font-size: 14px;
margin-bottom: 5px;
float: left;
}
.lifeyj_div div p:last-child{
font-size: 12px;
}
.lifeyj_div div p:last-child img{
position: relative;
top:1px;
}
.lifeyj_div div div:nth-child(2){
font-size: 18px;
margin: 8px 0 5px 0;
}
.lifeyj_div div:hover div:nth-child(2){
color: #ff5000;
}
.lifeyanjiu01{
background: url("taobaoItemImage/lifeyj01.jpg_.webp");
}
.lifeyanjiu02{
background: url("taobaoItemImage/lifeyj02.jpg_.webp");
}
.lifeyanjiu03{
background: url("taobaoItemImage/lifeyj03.jpg_.webp");
}
.lifeyanjiu04{
background: url("taobaoItemImage/lifeyj04.jpg_.webp");
}
.lifeyanjiu05{
background: url("taobaoItemImage/lifeyj05.jpg_.webp");
}
.lifeyanjiu06{
background: url("taobaoItemImage/lifeyj06.jpg_.webp");
}
.fastshopping{
padding: 0px 0px 0px 20px;
width: 1170px;
margin: 0 auto;
height: 264px;
background: #fff;
margin-bottom: 10px;
}
.fastshopping .head{
color:#f4f4f4;
font-size: 12px;
height: 66px;
line-height: 66px;
}
.fastshopping .head img{
margin-right: 16px;
position: relative;
top: 6px
}
.fastshopping .head span{
color: #ff5000;
background: #ffe4dc;
}
.fastshopping_con>div{
float: left;
width: 390px;
height: 182px;
}
.fastshopping_con>div div:first-child img,.fastshopping_con>div>div:first-child{
margin-right: 10px;
width: 182px;
height: 182px;
}
.fastshopping_con>div>div:first-child:hover{
background: #000;
opacity: 0.7;
}
.tiaoall{
background: #ffe4dc;
width: 160px;
height: 7px;
border-radius: 7px;;
}
.tiaoall .tiao{
background: #ff5000;
width: 90px;
height: 7px;
border-radius: 7px;;
}
.fs14{
font-size: 14px;
}
.fs16{
font-size: 16px;
}
.fs18{
font-size: 18px;
}
.fs10{
font-size: 10px;
}
.fs20{
font-size: 20px;
}
.color_ccc{
color: #ccc
}
.ydgg{
width: 1190px;
margin: 0 auto;
height: 70px;
background: #fff;
margin-bottom: 10px;
}
.shihui{
height: 250px;
width: 1190px;
margin: 0 auto;
background: #fff;
}
.shihui_head{
height: 55px;
line-height: 55px;
}
.shihui_head>div:first-child{font-family:'宋体';margin:18px;margin-left:25px;width: 5px;height: 18px;background-color: #fe3338}
.shihui_con>div{
float: left;
width: 236px;
height: 194px;
border: 1px solid transparent;
border-top: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4
}
.shihui_con>div:last-child{
border-right: 1px solid transparent
}
.shihui_con>div:hover{
border: 1px solid #ff5000;
}
.shihui_con>div:hover div:first-child{
color: #ff5000;
}
.shihui_con>div div:first-child{
margin: 30px 8px 0px 20px;
font-size: 19px;
font-family: "宋体"
}
.shihui_con img{
margin: 0px 10px 0px 20px;
width: 120px
}
.qiandao{
margin-top: 15px;
width: 78px;
height: 25px;
line-height: 25px;
text-align: center;
color: #ff5000;
border-radius: 15px;
border: 1px solid #ff5000;
}
.r_nav{
position: absolute;
/* left:90px; */
margin-left: 68px;
top:120px;
width: 50px;
height:400px;
}
.r_nav a{
text-decoration: none
}
.r_nav a>div{
background: #fff;
text-align: center;
width: 50px;
height:50px;
}
.r_nav a>div>div{
padding-top: 6px;
font-size: 14px;
margin: 0 auto;
width: 33px;
height:44px;
border-bottom: 1px solid #f4f4f4
}
.r_nav a>div:hover{
font-weight: 700;
background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%) !important;
color: #fff !important;
}
.r_nav a>div:hover div{
font-weight: 700;
background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%) !important;
color: #fff !important;
}
.r_nav a:first-child>div{
border-radius: 12px 12px 0px 0px;
background-image: -webkit-linear-gradient(left,#ff9000 0,#ff5000 100%);
color: #fff;
}
.r_nav a:last-child>div{
line-height: 35px;
border-radius: 0px 0px 12px 12px;
}
.like{
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
width: 1190px;
height: 1066px;
background: #fff;
}
.like_head{
height: 55px;
line-height: 55px;
}
.like_head>div:first-child{font-family:'宋体';margin:18px;margin-left:25px;width: 5px;height: 18px;background-color: #ff9f00}
.like_con ul li{
position: relative;
float: left;
width: 236px;
height: 335px;
border: 1px solid #f1f1f1;
border-right: 1px solid transparent;
border-top: 1px solid transparent;
}
.like ul li:nth-child(-n+5){
border-top: 1px solid #f1f1f1;
}
.like ul li:nth-child(5n+1){
border-left: 1px solid transparent;
}
.like ul li:hover{
border: 1px solid #ff5000;
}
.like ul li:hover{
border: 1px solid #ff5000;
}
.like ul li>img:first-child{
height: 197px;
margin: 18px 18px 1px 18px;
}
.like_con ul li>div:nth-child(1){
height: 90px;
width: 236px;
position: absolute;
bottom: 0px;
background: #ff5000;
color: #fff
}
.like_con ul li>div:last-child{
display: none;
margin:0px ;
height: 90px;
width: 236px;
position: absolute;
bottom: 0px;
background: #ff5000;
color: #fff
}
.like_con ul li>div{
margin:0px 18px 30px
}
.fs24{
font-size: 24px;
}
.like ul li:hover>div:last-child{
display: block;
}
hr{
border: none;
border-top: 1px solid #f4f4f4;
margin: 3px 0px;
}
.fs13{
font-size: 13px;
}
.like_con ul li>div:last-child>div{width: 127px;padding-top: 20px;margin:0 auto;text-align: center}
.end{
width: 1190px;
height: 200px;
margin: 0 auto;
}
.end>div:first-child{
width: 225px;margin: 0 auto;text-align: center;margin-top:26px;color: #cdcdd1;margin-bottom:45px;
}
.end>div:last-child>div{
width: 297px;height: 95px;float: left;
}
.end>div:last-child>div div:first-child{
margin-left: 17px;
font-family: "宋体";
font-size: 18px
}
.end>div:last-child>div span{
font-size: 12px;
color:#ccc;
margin-left: 17px;
margin-right: 10px;
}
.end>div:last-child>div span:hover{
cursor: pointer;
color:#ff5000;
}
.end>div:last-child>div>div{
margin-bottom: 10px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
