<!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>Document</title>
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./index2.css">
</head>
<body>
<div class="app">
<div class="top">
<div class="top_box">
<div class="top_box_box1"></div>
<div class="top_box_box2">
<i class="iconfont"></i>
</div>
</div>
</div>
<div class="nav">
<div class="nav_box">
<div class="nav_box_box1">
<p>广州</p>
<i class="fa fa-map-marker"></i>
<!-- <i class="iconfont"></i> -->
</div>
<div class="nav_box_box2">
<ul>
<li class="hoverchange">
<a href="javascript:void(0)">你好,请登录</a>
<a href="javascript:void(0)">免费注册</a>
</li>
<li class="line hoverchange">
<a href="javascript:void(0)">我的订单</a>
</li>
<li class="line hoverchange hoverchange1">
<a href="javascript:void(0)">我的京东</a>
<i class="iconfont"></i>
</li>
<li class="line hoverchange">
<a href="javascript:void(0)">京东会员</a>
</li>
<li class="line hoverchange hoverchange2">
<a href="javascript:void(0)">企业采购</a>
<i class="iconfont"></i>
</li>
<li class="line hoverchange hoverchange3">
<a href="javascript:void(0)">客户服务</a>
<i class="iconfont"></i>
</li>
<li class="line hoverchange hoverchange4">
<a href="javascript:void(0)">网站导航</a>
<i class="iconfont"></i>
</li>
<li class="line hoverchange sanjiao">
<a href="javascript:void(0)">手机京东</a>
<span></span>
</li>
</ul>
</div>
</div>
</div>
<div class="content">
<!-- 隐藏模块 -->
<div class="zero">
<!-- <img src="./img/03af759428d7c048.gif" alt=""> -->
<img src="./img/867a9d58e5321643.gif" alt="">
</div>
<div class="unshow0">
<div class="firbox">
<div class="firbox_0">
<div class="firbox_one">
<ul>
<li><a href="javascript:void(0)">待处理订单</a></li>
<li><a href="javascript:void(0)">返修退换货</a></li>
<li> <a href="javascript:void(0)">降价商品</a></li>
</ul>
</div>
<div class="firbox_two">
<ul>
<li><a href="javascript:void(0)">消息</a></li>
<li><a href="javascript:void(0)">我的问答</a></li>
<li><a href="javascript:void(0)">我的关注</a></li>
</ul>
</div>
</div>
<div class="firbox_1">
<div class="firbox_1_box1">
<ul>
<li><a href="javascript:void(0)">我的京东</a></li>
<li><a href="javascript:void(0)">我的白条</a></li>
</ul>
</div>
<div class="firbox_1_box2">
<ul>
<li><a href="javascript:void(0)">我的优惠券</a></li>
<li><a href="javascript:void(0)">我的理财</a></li>
</ul>
</div>
</div>
</div>
<div class="secbox">
<div class="secbox_0">
<div class="secbox_one">
<ul>
<li><a href="javascript:void(0)">企业购</a></li>
<li><a href="javascript:void(0)">工业品</a></li>
</ul>
</div>
<div class="secbox_two">
<ul>
<li><a href="javascript:void(0)">商用场景馆</a></li>
<li><a href="javascript:void(0)">礼品卡</a></li>
</ul>
</div>
</div>
</div>
<div class="thibox">
<div class="firbox_0">
<p>客户</p>
<div class="firbox_one">
<ul>
<li><a href="javascript:void(0)">帮助中心</a></li>
<li><a href="javascript:void(0)">在线客服</a></li>
<li> <a href="javascript:void(0)">电话客服</a></li>
<li> <a href="javascript:void(0)">金融咨询</a></li>
</ul>
</div>
<div class="firbox_two">
<ul>
<li><a href="javascript:void(0)">售后服务</a></li>
<li><a href="javascript:void(0)">意见建议</a></li>
<li><a href="javascript:void(0)">客服邮箱</a></li>
<li><a href="javascript:void(0)">全球售客服</a></li>
</ul>
</div>
</div>
<div class="firbox_1">
<p>商户</p>
<div class="firbox_1_box1">
<ul>
<li><a href="javascript:void(0)">合作招商</a></li>
<li><a href="javascript:void(0)">商家后台</a></li>
<li><a href="javascript:void(0)">商家帮助</a></li>
</ul>
</div>
<div class="firbox_1_box2">
<ul>
<li><a href="javascript:void(0)">学习中心</a></li>
<li><a href="javascript:void(0)">京麦工作台</a></li>
<li><a href="javascript:void(0)">规则平台</a></li>
</ul>
</div>
</div>
</div>
<div class="foubox">
<div class="firbox_0 foubox_box0">
<div class="linebox">
<p>特色主题</p>
<div class="firbox_one foubox_box">
<ul>
<li><a href="javascript:void(0)">京东试用</a></li>
<li><a href="javascript:void(0)">京东会员</a></li>
<li> <a href="javascript:void(0)">装机大师</a></li>
<li> <a href="javascript:void(0)">优惠券</a></li>
<li> <a href="javascript:void(0)">京东金融科技</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">京东金融</a></li>
<li><a href="javascript:void(0)">京东预售</a></li>
<li><a href="javascript:void(0)">0元评测</a></li>
<li><a href="javascript:void(0)">秒杀</a></li>
<li><a href="javascript:void(0)">In货推荐</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">全球售</a></li>
<li><a href="javascript:void(0)">买什么</a></li>
<li><a href="javascript:void(0)">定期送</a></li>
<li><a href="javascript:void(0)">闪购</a></li>
<li><a href="javascript:void(0)">陪伴计划</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">国际站</a></li>
<li><a href="javascript:void(0)">俄语站</a></li>
<li><a href="javascript:void(0)">港澳站</a></li>
<li><a href="javascript:void(0)">印尼站</a></li>
<li><a href="javascript:void(0)">I出海招商</a></li>
</ul>
</div>
</div>
<div class="linebox linebox1">
<p>行业频道</p>
<div class="firbox_one foubox_box">
<ul>
<li><a href="javascript:void(0)">手机</a></li>
<li><a href="javascript:void(0)">电脑办公</a></li>
<li> <a href="javascript:void(0)">服装城</a></li>
<li> <a href="javascript:void(0)">母婴</a></li>
<li> <a href="javascript:void(0)">整车</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">智能数码</a></li>
<li><a href="javascript:void(0)">家用电脑</a></li>
<li><a href="javascript:void(0)">京东生鲜</a></li>
<li><a href="javascript:void(0)">食品</a></li>
<li><a href="javascript:void(0)">图书</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">玩3C</a></li>
<li><a href="javascript:void(0)">京东智能</a></li>
<li><a href="javascript:void(0)">家装城</a></li>
<li><a href="javascript:void(0)">农贸频道</a></li>
<li><a href="javascript:void(0)">京东元器件</a></li>
</ul>
</div>
</div>
<div class="linebox linebox1">
<p>生活服务</p>
<div class="firbox_one foubox_box">
<ul>
<li><a href="javascript:void(0)">京东众筹</a></li>
<li><a href="javascript:void(0)">京东小金库</a></li>
<li> <a href="javascript:void(0)">水电煤</a></li>
<li> <a href="javascript:void(0)">机票酒店</a></li>
<li> <a href="javascript:void(0)">游戏</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">白条</a></li>
<li><a href="javascript:void(0)">理财</a></li>
<li><a href="javascript:void(0)">彩票</a></li>
<li><a href="javascript:void(0)">电影票</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">京东金融App</a></li>
<li><a href="javascript:void(0)">话费</a></li>
<li><a href="javascript:void(0)">旅行</a></li>
<li><a href="javascript:void(0)">京东到家</a></li>
</ul>
</div>
</div>
<div class="linebox linebox1">
<p>更多精选</p>
<div class="firbox_one foubox_box">
<ul>
<li><a href="javascript:void(0)">合作招商</a></li>
<li><a href="javascript:void(0)">企业采购</a></li>
<li> <a href="javascript:void(0)">乡村招募</a></li>
<li> <a href="javascript:void(0)">京东社区</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">京东通信</a></li>
<li><a href="javascript:void(0)">服务市场</a></li>
<li><a href="javascript:void(0)">校园加盟</a></li>
<li><a href="javascript:void(0)">游戏社区</a></li>
</ul>
<ul>
<li><a href="javascript:void(0)">京东E卡</a></li>
<li><a href="javascript:void(0)">办公生活馆</a></li>
<li><a href="javascript:void(0)">京友邦</a></li>
<li><a href="javascript:void(0)">知识产权维护</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="search">
<div class="search_box1">
<input type="text" size="500" placeholder="请输入商品名称" style="color:#999">
<i class="iconfont camera"></i>
</div>
<div class="search_box2">
<i class="iconfont"></i>
</div>
</div>
<div class="shopcar">
<i class="iconfont"></i>
<a href="javascript:void(0);">我的购物车</a>
<span class="circle">0</span>
</div>
<div class="ewm">
<img src="./img/59a51bf6Nb8e478cc.png" alt="">
</div>
<div class="inpbottext">
<ul>
<li>
<a href="javascript:void(0);" class="inpbottext_a1">三件享七折</a>
<a href="javascript:void(0);" class="inpbottext_a2">低价提前享</a>
</li>
<li><a href="javascript:void(0);">母婴玩具</a></li>
<li><a href="javascript:void(0);">全球好物</a></li>
<li><a href="javascript:void(0);">149减100</a></li>
<li><a href="javascript:void(0);">三件七折</a></li>
<li><a href="javascript:void(0);">1111神劵</a></li>
<li><a href="javascript:void(0);">靓丽潮电</a></li>
<li><a href="javascript:void(0);">家电预售</a></li>
</ul>
</div>
<div class="inpbottext1">
<ul>
<li>
<a href="javascript:void(0);">秒杀</a>
</li>
<li><a href="javascript:void(0);">优惠券</a></li>
<li><a href="javascript:void(0);">PLUS会员</a></li>
<li><a href="javascript:void(0);">闪购</a></li>
<li><a href="javascript:void(0);" class="line">拍卖</a></li>
<li><a href="javascript:void(0);">京东时尚</a></li>
<li><a href="javascript:void(0);">京东超市</a></li>
<li><a href="javascript:void(0);">京东生鲜</a></li>
<li><a href="javascript:void(0);" class="line">全球购</a></li>
<li><a href="javascript:void(0);">京东金融</a></li>
</ul>
</div>
</div>
<div class="realcontent">
<div class="asideleft">
<ul>
<li><a href="javascript:void(0);">家用电器</a>
</li>
<li>
<a href="javascript:void(0);">手机</a>
<span>/</span>
<a href="javascript:void(0);">运营商</a>
<span>/</span>
<a href="javascript:void(0);">数码</a>
</li>
<li>
<a href="javascript:void(0);">电脑</a>
<span>/</span>
<a href="javascript:void(0);">办公</a>
</li>
<li>
<a href="javascript:void(0);">家居</a>
<span>/</span>
<a href="javascript:void(0);">家具</a>
<span>/</span>
<a href="javascript:void(0);">家装</a>
<span>/</span>
<a href="javascript:void(0);">厨具</a>
</li>
<li>
<a href="javascript:void(0);">男装</a>
<span>/</span>
<a href="javascript:void(0);">女装</a>
<span>/</span>
<a href="javascript:void(0);">童装</a>
<span>/</span>
<a href="javascript:void(0);">内衣</a>
</li>
<li>
<a href="javascript:void(0);">美妆</a>
<span>/</span>
<a href="javascript:void(0);">个护清洁</a>
<span>/</span>
<a href="javascript:void(0);">宠物</a>
</li>
<li>
<a href="javascript:void(0);">女鞋</a>
<span>/</span>
<a href="javascript:void(0);">箱包</a>
<span>/</span>
<a href="javascript:void(0);">钟表</a>
<span>/</span>
<a href="javascript:void(0);">珠宝</a>
</li>
<li>
<a href="javascript:void(0);">男鞋</a>
<span>/</span>
<a href="javascript:void(0);">运动</a>
<span>/</span>
<a href="javascript:void(0);">护卫</a>
</li>
<li>
<a href="javascript:void(0);">房产</a>
<span>/</span>
<a href="javascript:void(0);">汽车</a>
<span>/</span>
<a href="javascript:void(0);">汽车用品</a>
</li>
<li>
<a href="javascript:void(0);">母婴</a>
<span>/</span>
<a href="javascript:void(0);">玩具乐器</a>
</li>
<li>
<a href="javascript:void(0);">食品</a>
<span>/</span>
<a href="javascript:void(0);">酒类</a>
<span>/</span>
<a href="javascript:void(0);">生鲜</a>
<span>/</span>
<a href="javascript:void(0);">特产</a>
</li>
<li>
<a href="javascript:void(0);">艺术</a>
<span>/</span>
<a href="javascript:void(0);">礼品鲜花</a>
<span>/</span>
<a href="javascript:void(0);">农贸绿植</a>
</li>
<li>
<a href="javascript:void(0);">医药保健</a>
<span>/</span>
<a href="javascript:void(0);">计生情趣</a>
</li>
<li>
<a href="javascript:void(0);">图书</a>
<span>/</span>
<a href="javascript:void(0);">音像</a>
<span>/</span>
<a href="javascript:void(0);">电子书</a>
</li>
<li>
<a href="javascript:void(0);">机票</a>
<span>/</span>
<a href="javascript:void(0);">酒店</a>
<span>/</span>
<a href="javascript:void(0);">旅游</a>
<span>/</span>
<a href="javascript:void(0);">生活</a>
</li>
<li>
<a href="javascript:void(0);">理财</a>
<span>/</span>
<a href="javascript:void(0);">众筹</a>
<span>/</span>
<a href="javascript:void(0);">白条</a>
<span>/</span>
<a href="javascript:void(0);">保险</a>
</li>
<li>
<a href="javascript:void(0);">安装</a>
<span>/</span>
<a href="javascript:void(0);">维修</a>
<span>/</span>
<a href="javascript:void(0);">清洗保养</a>
</li>
<li><a href="javascript:void(0);">工业品</a></li>
</ul>
</div>
<div class="middle">
<!-- asideleft鼠标悬停时的东西 -->
<div class="mouseoverappera">
<ul>
<li class="li" data-index="0">1</li>
<li class="li" data-index="1">2</li>
<li class="li">3</li>
<li class="li">4</li>
<li class="li">5</li>
<li class="li">6</li>
<li class="li">7</li>
<li class="li">8</li>
<li class="li">9</li>
<li class="li">10</li>
<li class="li">11</li>
<li class="li">12</li>
<li class="li">13</li>
<li class="li">14</li>
<li class="li">15</li>
<li class="li">16</li>
<li class="li">17</li>
<li class="li">18</li>
</ul>
</div>
<div class="lunbo">
<div id="box">
<!-- <ul>
<li> -->
<img src="./img/lunbo/1.jpg" class="img1" id="img1" data-index="0">
<img src="./img/lunbo/2.jpg" class="img1" id="img2" data-index="1">
<img src="./img/lunbo/3.jpg" class="img1" id="img3" data-index="2">
<img src="./img/lunbo/4.jpg" class="img1" id="img4" data-index="3">
<img src="./img/lunbo/5.jpg" class="img1" id="img5" data-index="4">
<img src="./img/lunbo/6.jpg" class="img1" id="img6" data-index="5">
<img src="./img/lunbo/7.jpg" class="img1" id="img7" data-index="6">
<img src="./img/lunbo/8.jpg" class="img1" id="img8" data-index="7">
<div id="littlecircle" class="littlecircle">
<ul id="ul3" class="ul3">
<li class="changecolor changecolor1"></li>
<li class="changecolor1"></li>
<li class="changecolor1"></li>
<li class="changecolor1"></li>
<li class="changecolor1"></li>
<li class="changecolor1"></li>
<li class="changecolor1"></li>
<li class="changecolor1"></li>
</ul>
</div>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
<!-- asideright -->
<div class="asideright">
<div class="right_box1">
<img src="./img/acc0a4025aa0b209.jpg" alt="">
<img src="./img/26ec55ba70646fe6.png" alt="">
<!-- <img src="./img/5b7d28b4N61eff295.jpg" alt=""> -->
<img src="./img/5bc8582bNaf54afba.jpg" alt="">
</div>
<div class="right_box2">
<div class="inimg">
<img src="./img/no_login.jpg" alt="">
</div>
<div class="right_box2_1">
<p>Hi~欢迎来到京东!</p>
<span><a href="javascript:void(0);">登录</a></span>
<span><a href="javascript:void(0);">注册</a></span>
<div class="right_box2_1_text">
<button class="btntxt1">新人福利</button>
<button class="btntxt2">PLUS会员</button>
</div>
</div>
<div class="right_box2_2">
<div class="rtxt">
<a href="javascript:void(0);" class="moveline1">促销</a>
<a href="javascript:void(0);" class="line linechange moveline2">公告</a>
<a href="javascript:void(0);" class="more">更多</a>
</div>
<div class="redline"></div>
<div class="list1">
<ul>
<li><a href="javascript:void(0);">超值预售1元最高抵1111</a></li>
<li><a href="javascript:void(0);">极米Play X 陪你随时看电影</a></li>
<li><a href="javascript:void(0);">图书文娱乐每满100减30</a></li>
<li><a href="javascript:void(0);">11.1 联想新品独家首发</a></li>
</ul>
</div>
<div class="list2">
<ul>
<li><a href="javascript:void(0);">京东图书勋章体系改版公告</a></li>
<li><a href="javascript:void(0);">京东PLUS会员权益更新及会费调整</a></li>
<li><a href="javascript:void(0);">京东启用全新客服电话“950618”</a></li>
<li><a href="javascript:void(0);">关于召回普利司通(天津)轮胎有限公司2个规格乘用车轮胎的公告</a></li>
</ul>
</div>
</div>
<div class="right_box2_3">
<ul class="right_box2_3_ul">
<li class="li1 li2" data-index="0">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">话费</a>
</li>
<li class="li1 li2" data-index="1">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">机票</a>
</li>
<li class="li1 li2" data-index="2">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">酒店</a>
</li>
<li class="li1 li2" data-index="3">
<div class="icon">
<i class="iconfont icon1 i1"></i>
</div>
<a href="javascript:void(0);">游戏</a>
</li>
<li class="li1" data-index="4">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">企业购</a>
</li>
<li class="li1" data-index="5">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">加油卡</a>
</li>
<li class="li1" data-index="6">
<div class="icon">
<i class="iconfont icon2 i1"></i>
</div>
<a href="javascript:void(0);" class="li_a1">电影票</a>
<span>惠</span>
</li>
<li class="li1" data-index="7">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);" class="li_a2">火车票</a>
<span>抢</span>
</li>
<li class="li1" data-index="8">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">众筹</a>
</li>
<li class="li1" data-index="9">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">理财</a>
</li>
<li class="li1" data-index="10">
<div class="icon">
<i class="iconfont icon2 i1"></i>
</div>
<a href="javascript:void(0);">礼品卡</a>
</li>
<li class="li1" data-index="11">
<div class="icon">
<i class="iconfont i1"></i>
</div>
<a href="javascript:void(0);">白条</a>
</li>
</ul>
<i class="iconfont close"></i>
<ul class="changebox changebox5">
<li>
<a href="javascript:void(0);" class="changeboxa changeboxa1" style="padding-top: 4px">话费充值</a>
<div class="huafei_1 huafei_00">
<ul class="huaifei_2 huafei_0">
<li>
<span>号码</span>
<input type="text" placeholder="请输入手机号">
</li>
<li>
<span>面值</span>
<select name="" id="">
<option value="">20元</option>
<option value="">30元</option>
<option value="" selected>50元</option>
<option value="">100元</option>
</select>
</li>
<li><span class="huafeiprice">¥98.0-¥100.0</span></li>
<li><button class="btntxt2">快速充值</button></li>
<li><a href="javascript:void(0);" class="jiantxt">抢90减50元话费劵</a></li>
</ul>
</div>
<div class="huafei_3 huafei_00">
<ul class="huafei_4">
<li>
<span>号码</span>
<input type="text" placeholder="移动/联通/电信">
</li>
<li>
<span>流量</span>
<select name="" id="country">
<option value="">全国</option>
<option value="" selected>省内</option>
</select>
<select name="" id="liuliang">
<option value="">50M</option>
<option value="" selected>100M</option>
</select>
</li>
<li><span class="huafeiprice">¥7.5-¥10.0</span></li>
<li><button class="btntxt2">快速充值</button>
<a href="javascript:void(0);" class="jiantxt">App Store充值卡</a>
</li>
</ul>
</div>
<div class="huafei_5 huafei_00">
<ul class="huafei_6">
<li>
<span>号码</span>
<input type="text" placeholder="支持部分地区移动">
</li>
<li>
<span>月费</span>
<select name="" id="country">
<option value="">38元</option>
<option value="">48元</option>
<option value="">58元</option>
<option value="" selected>88元</option>
</select>
</li>
<li><span class="huafeiprice">500分钟1G流量</span></li>
<li><button class="btntxt2">办理变更</button>
</li>
</ul>
</div>
</li>
<li><a href="javascript:void(0);" class="changeboxa">流量充值</a></li>
<li><a href="javascript:void(0);" class="changeboxa">套餐变更</a></li>
</ul>
<ul class="changebox1 changebox changebox5">
<li>
<a href="javascript:void(0);" class="changeboxa changeboxa1" style="padding-top: 4px">国内机票</a>
<div class="huafei_1 huafei_00">
<ul class="huaifei_2 huafei_0">
<li class="lucheng">
<input type="radio">
<span>单程</span>
<input type="radio">
<span>往返</span>
</li>
<li class="citychange">
<span>出发</span>
<input type="text" placeholder="城市">
</li>
<li class="citychange">
<span>到达</span>
<input type="text" placeholder="城市">
</li>
<li>
<span>日期</span>
<input type="text" placeholder="出发" style="text-indent: 45px">
</li>
<li>
<button class="btntxt2">机票查询</button>
<a href="javascript:void(0);" class="jiantxt">当季热门特惠机票</a>
</li>
</ul>
</div>
<div class="huafei_3 huafei_00">
<ul class="huafei_4">
<li class="lucheng">
<input type="radio" value="单程">
<span>单程</span>
<input type="radio">
<span>往返</span>
</li>
<li>
<span>出发</span>
<input type="text" placeholder="城市" style="text-indent: 45px">
</li>
<li>
<span>到达</span>
<input type="text" placeholder="城市" style="text-indent: 45px">
</li>
<li>
<span>日期</span>
<input type="text" placeholder="出发" style="text-indent: 45px">
</li>
<li><button class="btntxt2">机票查询</button>
<a href="javascript:void(0);" class="jiantxt">国际机票任性搜</a>
</li>
</ul>
</div>
<div class="huafei_5 huafei_00">
<ul class="huafei_6">
<li>
<img src="./img/978daf4a074e663a.jpg" alt="">
</li>
<li style="margin-left: 10px">
<img src="./img/5ad864baN5950aa1b.jpg" alt="">
</li>
</ul>
</div>
</li>
<li class="changeboxa00"><a href="javascript:void(0);" class="changeboxa">国际/港澳台</a></li>
<li class="changeboxa01"><a href="javascript:void(0);" class="changeboxa">特惠</a></li>
</ul>
<ul class="changebox1 changebox changebox2 changebox5">
<li style="width:68px">
<a href="javascript:void(0);" class="changeboxa changeboxa1" style="padding-top: 4px">国内/港澳台</a>
<div class="huafei_1 huafei_00">
<ul class="huaifei_2 huafei_0">
<li class="luchneg">
<span>目的地</span>
<input type="text" placeholder="城市">
</li>
<li class="citychange">
<span>入住日期</span>
<input type="text" placeholder="城市" style="text-indent: 30px">
</li>
<li class="citychange">
<span>离店日期</span>
<input type="text" placeholder="城市" style="text-indent: 30px">
</li>
<li>
<input type="text" placeholder="酒店/商圈/地标" style="text-indent: 40px;width:160px">
</li>
<li>
<button class="btntxt2">机票查询</button>
<a href="javascript:void(0);" class="jiantxt">当季热门特惠机票</a>
</li>
</ul>
</div>
<div class="huafei_3 huafei_00">
<ul class="huafei_6">
<li>
<img src="./img/5a4b4f01N0f4c970d.jpg" alt="">
</li>
<li style="margin-left: 10px">
<img src="./img/113259177db2af6d.jpg" alt="">
</li>
</ul>
</div>
</li>
<li class="changeboxa00" style="text-align: center"><a href="javascript:void(0);" class="changeboxa">促销活动</a></li>
</ul>
<ul class="changebox changebox3 changebox5">
<li>
<a href="javascript:void(0);" class="changeboxa changeboxa1" style="padding-top: 4px;">视频/娱乐</a>
<div class="huafei_1 huafei_00">
<ul class="huaifei_2 huafei_0">
<li>
<span>服务类型</span>
<input type="text" placeholder="类型" style="width:102px;text-indent: 30px">
</li>
<li>
<span>充值时长</span>
<select name="" id="" value="时长" style="width:102px;">
<option value="" selected>时长</option>
<option value="">1个月</option>
<option value="">3个月</option>
<option value="">半年</option>
<option value="">1年</option>
</select>
</li>
<li><span class="huafeiprice">¥0.00</span></li>
<li id="lucheng">
<input type="radio">
<span>直充</span>
<input type="radio">
<span>卡密</span>
</li>
<li><button class="btntxt2">快速充值</button></li>
</ul>
</div>
<div class="huafei_3 huafei_00">
<ul class="huafei_4">
<li>
<span>游戏</span>
<input type="text" placeholder="游戏">
</li>
<li>
<span>面值</span>
<select name="" id="country" style="width:124px">
<option value="">10元</option>
<option value="" selected>50元</option>
<option value="">100元</option>
</select>
</li>
<li><span class="huafeiprice">¥0.00</span></li>
<li id="lucheng1">
<input type="radio">
<span>直充</span>
<input type="radio">
<span>卡密</span>
</li>
<li><button class="btntxt2">快速充值</button>
<a href="javascript:void(0);" class="jiantxt">月卡低至10元</a>
</li>
</ul>
</div>
<div class="huafei_5 huafei_00">
<ul class="huafei_6">
<li>
<span>QQ</span>
<input type="text" placeholder="Q币">
</li>
<li>
<span>面值</span>
<select name="" id="country">
<option value="">1元</option>
<option value="">5元</option>
<option value="">10元</option>
<option value="" selected>50元</option>
</select>
</li>
<li><span class="huafeiprice">¥0.99</span></li>
<li id="lucheng2">
<input type="radio">
<span>直充</span>
</li>
<li><button class="btntxt2">快速充值</button>
<a href="javascript:void(0);" class="jiantxt">月卡低至10元</a>
</li>
</ul>
</div>
</li>
<li style="text-align: center"><a href="javascript:void(0);" class="changeboxa">点卡</a></li>
<li style="text-align: center"><a href="javascript:void(0);" class="changeboxa">QQ</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./jquery-1.12.2.js"></script>
<!-- 下面的是用来兼容IE8使用after和before无效的 -->
<script src="./jquery.pseudo.js"></script>
<script src="./index.js"></script>
<script src="./PIE_IE678.js"></script>
<script src="./luobo.js"></script>
<script>
</script>
//部分样式代码未上传
</html>
JS部分;
$(function () {
// 点Xtop消失逻辑代码
$(".iconfont").on("click", function () {
$(".top").css({
"display": "none"
})
});
// 1鼠标移入
$(".unshow0").css({
"display": "none"
})
$(".hoverchange1").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".firbox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第一部分隐藏区域鼠标移入显示
$(".firbox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange1").css({
"background-color": "#fff"
})
$(".firbox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第一部分隐藏区域鼠标移出显示
$(".firbox").on("mouseout", function () {
$(".hoverchange1").css({
"background-color": "#e3e4e5",
})
$(".unshow0").css({
"display": "none"
})
})
// 1鼠标移出
$(".hoverchange1").on("mouseout", function () {
$(".firbox").css({
"display": "none"
})
$(".unshow0").css({
"display": "none"
})
$(".zero").css({
"display": "block"
})
})
// 2鼠标移入
$(".hoverchange2").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".secbox").css({
"display": "block",
"background-color": "#fff"
}).siblings().css({
"display": "none"
})
})
// 第二部分隐藏区域鼠标移入显示
$(".secbox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange2").css({
"background-color": "#fff"
})
$(".secbox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第二部分隐藏区域鼠标移出显示
$(".secbox").on("mouseout", function () {
$(".hoverchange2").css({
"background-color": "#e3e4e5",
})
})
// 2鼠标移出
$(".hoverchange2").on("mouseout", function () {
$(".secbox").css({
"display": "none"
})
$(".unshow0").css({
"display": "none"
})
})
// 3鼠标移入
$(".hoverchange3").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".thibox").css({
"display": "block",
"background-color": "#fff"
}).siblings().css({
"display": "none",
})
})
// 第三部分隐藏区域鼠标移入显示
$(".thibox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange3").css({
"background-color": "#fff"
})
$(".thibox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第三部分隐藏区域鼠标移出显示
$(".thibox").on("mouseout", function () {
$(".hoverchange3").css({
"background-color": "#e3e4e5",
})
})
// 3鼠标移出
$(".hoverchange3").on("mouseout", function () {
$(".thibox").css({
"display": "none"
})
$(".unshow0").css({
"display": "none"
})
})
// 4鼠标移入
$(".hoverchange4").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".foubox").css({
"display": "block",
"background-color": "#fff"
}).siblings().css({
"display": "none",
})
})
// 第四部分隐藏区域鼠标移入显示
$(".foubox").on("mouseover", function () {
$(".unshow0").css({
"display": "block"
})
$(".hoverchange4").css({
"background-color": "#fff"
})
$(".foubox").css({
"display": "block",
"background-color": "#fff"
})
})
// 第四部分隐藏区域鼠标移出显示
$(".foubox").on("mouseout", function () {
$(".hoverchange4").css({
"background-color": "#e3e4e5",
})
})
// 4鼠标移出
$(".hoverchange4").on("mouseout", function () {
$(".foubox").css({
"display": "none"
})
$(".unshow0").css({
// "display": "none"
})
})
})
//asideleft鼠标悬停出现隐藏页
var leftlength = document.getElementsByClassName("li");
$(".asideleft li").on("mouseover", function () {
$(".mouseoverappera").css("display", "block");
var index = $(this).index();
$(leftlength).eq(index).css({
"display": "block"
}).siblings().css({
"display": "none"
})
$(this).on("mouseout", function () {
$(".mouseoverappera").css("display", "none");
$(leftlength).eq(index).css({
"display": "none"
})
})
})
// aside部分主要为12宫格逻辑部分
// redline移动逻辑
$(".moveline1").on("mouseover", function () {
$(".redline").animate({
"margin-left": 12
}, 350);
$(".list2").css("display", "none");
$(".list1").css("display", "block");
})
$(".moveline2").on("mouseover", function () {
$(".redline").animate({
"margin-left": 72
}, 350);
$(".list1").css("display", "none");
$(".list2").css("display", "block");
})
//12宫格鼠标悬停变红逻辑
var li1 = document.getElementsByClassName('li1');
var i1 = document.getElementsByClassName("i1");
for (let i = 0; i < li1.length; i++) {
li1[i].onmouseover = function () {
var ind = $(this).data("index");
$(this).children("a").css("color", "#f00");
$(i1).eq(ind).css("color", "#f00");
// 离开变回原来的逻辑
$(this).on("mouseout", function () {
var ind1 = $(this).data("index");
$(this).children("a").css("color", "#bea68d");
$(i1).eq(ind).css("color", "#bea68d");
})
}
}
// 九宫格前四个鼠标移动向上移动逻辑
var li2 = document.getElementsByClassName("li2");
var redlinex = document.getElementsByClassName("redline5");
// 鼠标悬停在话费机票酒店游戏时切换不同盒子的逻辑
var changeboxx = document.getElementsByClassName("changebox5");
for (var i = 0; i < li2.length; i++) {
li2[i].onmouseover = function () {
var ind = $(this).data("index");
$(this).children("a").css("color", "#f00");
$(changeboxx).eq(ind).css("display", "block").siblings(".changebox5").css("display", "none");
$(i1).eq(ind).css("color", "#f00");
$(".right_box2_3").animate({
"top": "235"
}, 100, function () {
for (let i = 0; i < 4; i++) {
i1[i].style.display = "none";
}
})
// 12宫格前四个底部红色线出现
$(this).on("mouseover", function () {
$(this).css({
"border-bottom": "2px solid #f00"
}).siblings().css({
"border-bottom": "none"
})
})
$(".close").css("display", "block");
$(".close").animate({
"bottom": "150"
})
// 12宫格前四个底部内容框出现
$(".changebox").animate({
"bottom": "-35"
}, 300)
// 离开变回原来的逻辑
$(this).on("mouseout", function () {
var ind1 = $(this).data("index");
$(this).children("a").css("color", "#bea68d");
$(i1).eq(ind).css("color", "#bea68d");
})
}
}
// 话费充值等鼠标悬停出现不同div盒子逻辑
var huafeiul = document.getElementsByClassName("huafei_00");
var changeboxa = document.getElementsByClassName("changeboxa");
for (let i = 0; i < changeboxa.length; i++) {
changeboxa[i].onmouseover = function () {
var icount = i;
$(huafeiul).eq(icount).css("display", "block").siblings().css("display", "none");
$(".changeboxa1").css("display", "inline-block")
}
}
// 点击关闭图标,12宫格变回原来的样式逻辑
$(".close").on("click", function () {
$(".close").css("display", "none");
$(changeboxx).css("display", "none");
$(".right_box2_3").animate({
"top": "270"
}, 50, function () {
for (let i = 0; i < 4; i++) {
i1[i].style.display = "block";
}
})
// 12宫格回归原位的时候,1-4宫格的底部的红线消失
$(li2).css("border-bottom", "none");
})
lunbo.js部分:
var left = document.getElementById("left");
var right = document.getElementById("right");
var img = document.getElementsByClassName("img1");
// console.log(img);
var li = document.getElementsByClassName("changecolor1");
// console.log(li);
// 默认的索引为0;
var index = 0;
// 默认改变的索引也为0;
var changeindex = 0;
var changeindex1 = 0;
// 左侧点击事件
left.onclick = function () {
// 1.0根据索引获取到当前对象
for (var i = 0; i < 8; i++) {
// 当索引等于遍历的值的时候
if (i == index) {
// 原先的索引加1
changeindex = index - 1;
// 这是跟着图片改变下面的圆圈的样式
$(li).eq(changeindex).addClass("changecolor");
$(li).eq(index).removeClass("changecolor");
// 当前索引小于0的时候,要进行改变,将当前索引变成最后一个图片的索引
if (changeindex < 0) {
changeindex = 7;
$("img").eq(index).css("display", "none");
$("img").eq(changeindex).css("display", "block");
}
// 原先样式隐藏
$("img").eq(index).css("display", "none");
// 加1以之后的索引的样式显示
$("img").eq(changeindex).css("display", "block");
}
}
// 将增加后的索引赋值给index,作为后来再次右侧点击事件的时候索引;
index = changeindex;
}
// 右侧点击事件
right.onclick = function () {
// 调用右侧点击事件
move();
}
// 鼠标点击圆圈引发的图片改变逻辑,点击那张图片就到那张图片的
// for (let i = 0; i < li.length; i++) {
// li[i].onclick = function () {
// // 点击当前索引变成i
// index = i;
// // 当前索引对应的图片显示,其他隐藏
// $("img").eq(i).css("display", "block").siblings("img").css("display", "none");
// // 将所有圆圈的样式移除
// $("#ul3 li").removeClass("changecolor");
// // 让点击的圆圈样式显示
// $("#ul3 li").eq(index).addClass("changecolor");
// }
// }
// ie8时点击圆点出现相对的页面则使用这个这段代码
function b(i) {
return function c() {
// 点击当前索引变成i
index = i;
// 当前索引对应的图片显示,其他隐藏
$("img").eq(i).css("display", "block").siblings("img").css("display", "none");
// 将所有圆圈的样式移除
$(li).removeClass("changecolor");
// 让点击的圆圈样式显示
$(li).eq(index).addClass("changecolor");
}
}
for (var i = 0; i < li.length; i++) {
li[i].onclick = b(i);
}
// 封装右侧点击事件
function move() {
// 1.0根据索引获取到当前对象
for (var i = 0; i < 8; i++) {
// 当索引等于遍历的值的时候
if (i == index) {
// 原先的索引加1
changeindex1 = index + 1;
// 原先样式隐藏
// 这是跟着图片改变下面的圆圈的样式
$(li).eq(changeindex1).addClass("changecolor");
$(li).eq(index).removeClass("changecolor");
$("img").eq(index).css("display", "none");
// 加1以之后的索引的样式显示
$("img").eq(changeindex1).css("display", "block");
// 进行判断,如果index超过4的时候,索引要变成0;重新开始
if (changeindex1 > 7) {
$("img").eq(index).css("display", "none");
$("img").eq(changeindex1).css("display", "block");
changeindex1 = 0;
$(li).eq(changeindex1).addClass("changecolor");
}
}
}
// 将增加后的索引赋值给index,作为后来再次右侧点击事件的时候索引;
index = changeindex1;
}
// 定时器,隔几秒就图片变化一次(调用move())
setInterval(function () {
move();
}, 2000);
// IE浏览器上要使用上面这种格式,我去
// setInterval(()=>{
// move();
// },2000);
CSS样式:
第一部分:
#box {
width: 600px;
height: 480px;
/* border: 1px solid #f00; */
text-align: center;
margin: 0 auto;
float: left;
overflow: hidden;
position: relative;
}
/* 图片 */
.lunbo #box ul li img {
float: left;
/* width: 100%; */
/* display: none; */
width: 590px;
height: 480px;
/* padding: 10px 10px 0 10px!important; */
z-index:4;
}
#box ul li img:first-child {
display: block;
}
#littlecircle {
width: 150px;
height: 30px;
line-height: 30px;
/* border: 1px solid #f00; */
position: absolute;
bottom: 10px;
left: 16%;
margin-left: -50px;
}
#littlecircle #ul3 {
overflow: hidden;
width: 150px;
height: 30px;
line-height: 30px;
/* z-index:4; */
}
.ul3 li {
/*这里记住设置的时候不要前面使用id,不然会在修改样式的时候要用到important,不好修改,而且这里在IE8兼容的时候就是因为(#littlecircle #ul li)这样使用的导致在IE8浏览器的时候,后来添加的样式addClass(changecolor)添加样式border-radius添加失效 */
width: 12px;
height: 12px;
cursor: pointer;
border-radius: 50%;
behavior: url(./PIE.htc);
position: relative;
/*支持IE8圆角 不行就加 position:relative;再不行就加z-index: 10 */
/* background: #f00; */
float: left;
border-radius: 50%;
margin-left: 4px;
margin-top: 5px;
overflow: hidden;
border: 3px solid #AEA8B2;
opacity: 1;
text-shadow: 1px 1px #fff;
}
/* 默认的样式 */
.changecolor {
width: 15px !important;
height: 15px !important;
cursor: pointer;
background: #fff;
float: left;
margin-left: 4px;
margin-top: 4px!important;
z-index: 4;
border: 3px solid #E2B5E6 !important;
}
#left {
width: 40px;
height: 70px;
background: url("./img/arrow/arr.png") 0px 0px no-repeat;
position: absolute;
left: 15px;
top: 50%;
margin-top: -35px;
}
#right {
width: 40px;
height: 70px;
background: url("./img/arrow/arr.png") -44px 0px no-repeat;
position: absolute;
right: 415px;
top: 50%;
margin-top: -35px;
}
CSS部分:
第二部分:
@font-face {
font-family: 'iconfont';
src: url('./font/iconfont.eot');
src:
url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
url('./font/iconfont.woff') format('woff'),
url('./font/123456iconfont.ttf') format('truetype'),
url('./font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
* {
padding: 0;
margin: 0 auto;
list-style: none;
box-sizing: border-box;
}
.app {
width: 100%;
background: #e3e4e5;
}
.top {
width: 100%;
height: 80px;
background: #000;
z-index: 0;
}
.top .top_box {
width: 1190px;
height: 80px;
overflow: hidden;
}
.top_box_box1 {
width: 190px;
height: 78px;
float: left;
}
.top_box_box2 {
width: 1000px;
height: 78px;
float: left;
position: relative;
}
.top_box_box2 i {
position: absolute;
top: 0;
right: 0;
font-size: 20px;
font-weight: 400;
color: #666;
}
.nav {
width: 100%;
height: 30px;
background: #e3e4e5;
position: relative;
z-index: 0;
}
.nav_box {
width: 1190px;
height: 30px;
position: relative;
overflow: hidden;
}
.nav_box_box1 {
width: 258px;
height: 30px;
line-height: 30px;
float: left;
overflow: hidden;
position: relative;
}
.nav_box_box1 i {
display: block;
float: right;
color: #f00;
position: absolute;
right: 32px;
top: 6px;
}
.nav_box_box1 p {
height: 30px;
line-height: 30px;
float: right;
font-size: 12px;
}
.nav_box_box2 {
width: 932px;
height: 30px;
float: right;
}
.nav_box_box2 ul {
padding-left: 224px;
overflow: hidden;
}
.nav_box_box2 ul li:first-child {
width: 148px;
height: 30px;
}
.nav_box_box2 ul li {
width: 80px;
float: left;
font-size: 14px;
line-height: 30px;
text-align: center;
}
.nav_box_box2 ul .sanjiao {
position: relative;
}
.nav_box_box2 ul .sanjiao span {
position: absolute;
bottom: 0;
left: 40px;
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: 5px solid white;
display: inline-block;
}
.nav_box_box2 ul li i {
color: #999;
margin-top: 2px;
}
.iconfont {
font-size: 14px;
cursor: pointer;
}
.line:after {
content: "";
height: 12px;
width: 1px;
background: #ccc;
display: block;
position: absolute;
top: 10px;
}
.nav_box_box2 ul li a {
text-decoration: none;
font-size: 12px;
color: #999;
}
.hoverchange a:hover {
color: #f00;
}
.nav_box_box2 ul li a:nth-child(2) {
color: #f00;
}
.unshow0 {
width: 1190px;
height: 150px;
position: absolute;
margin: 0 auto;
z-index: 4;
}
.zero {
width: 190px;
height: 170px;
float: left;
position: absolute;
top: -29px;
left: 0;
z-index: 4;
background: #fff;
}
.zero img {
display: block !important;
}
/* 第一隐藏部分样式 */
.firbox {
width: 294px;
height: 150px;
border: 1px solid #f00;
margin-left: 672px;
float: left;
z-index: 4;
background: #fff;
display: none;
overflow: hidden;
}
.firbox_0 {
width: 100%;
height: 100px;
border-bottom: 1px solid #eee;
}
.firbox_1 {
width: 100%;
height: 50px;
}
.firbox_one,
.firbox_two {
width: 50%;
float: left;
height: 100px;
padding-left: 10px;
padding-top: 15px;
}
.firbox_1_box1,
.firbox_1_box2 {
width: 50%;
float: left;
height: 50px;
padding-left: 10px;
}
.firbox_one ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_one ul li a:hover {
color: #f00;
}
.firbox_two ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_two ul li a:hover {
color: #f00;
}
.firbox_1_box1 ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_1_box1 ul li a:hover {
color: #f00;
}
.firbox_1_box2 ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.firbox_1_box2 ul li a:hover {
color: #f00;
}
/* 第二部分隐藏样式 */
.secbox {
width: 156px;
height: 70px;
border: 1px solid #f00;
float: left;
margin-left: 844px;
z-index: 4;
background: #fff;
display: none;
}
.secbox_0 {
width: 100%;
height: 70px;
}
.secbox_one,
.secbox_two {
width: 50%;
float: left;
height: 70px;
padding-left: 10px;
padding-top: 15px;
}
.secbox_one ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.secbox_one ul li a:hover {
color: #f00;
}
.secbox_two ul li a {
font-size: 12px;
text-decoration: none;
color: #999;
}
.secbox_two ul li a:hover {
color: #f00;
}
.thibox {
width: 173px;
height: 240px;
border: 1px solid #f00;
float: left;
margin-left: 844px;
z-index: 4;
background: #fff;
display: none;
}
.thibox .firbox_0 {
height: 130px;
}
.thibox .firbox_0 .firbox_one {
padding-top: 0;
height: 72px;
}
.thibox .firbox_0 .firbox_two {
padding-top: 0;
height: 72px;
}
.thibox .firbox_0 {
padding-top: 15px;
}
.thibox .firbox_0 p {
padding-left: 10px;
}
.thibox .firbox_1 {
height: 110px;
}
.thibox .firbox_1 p {
padding-top: 15px;
padding-left: 10px;
}
.foubox {
width: 1190px;
height: 180px;
float: left;
display: none;
z-index: 4;
margin-left: -1px;
background: #fff;
border: 1px solid #f00;
}
.foubox .linebox {
width: 340px;
float: left;
border-right: 1px solid #eee;
height: 180px;
overflow: hidden;
}
.foubox .linebox1 {
width: 282px;
}
.foubox .foubox_box0 {
width: 100%;
height: 180px;
border: none;
padding-top: 0px;
}
.foubox .foubox_box0 p {
padding-left: 10px;
padding-top: 15px;
}
.foubox .foubox_box {
width: 100%;
float: left;
height: 150px;
padding-left: 10px;
padding-top: 15px;
overflow: hidden;
}
.foubox .foubox_box ul {
width: 25%;
float: left;
padding-right: 10px;
}
.foubox .foubox_box ul li a {
font-size: 12px;
color: #999;
}
.foubox .foubox_box ul li a:hover {
color: #f00;
}
.linebox1 .foubox_box ul {
width: 33.3%;
}
/* 导购部分 */
.content {
width: 1190px;
height: 142px;
z-index: 1;
background: #f0f3ef;
position: relative;
}
.content .search {
width: 550px;
height: 35px;
position: absolute;
top: 20px;
left: 316px;
z-index: 3;
border: none;
}
.content .search input {
width: 500px;
height: 35px;
position: relative;
border: none;
text-indent: 8px;
}
.search_box1 {
width: 500px;
height: 35px;
margin: 0;
float: left;
}
.search .search_box1 .iconfont {
position: absolute;
top: 7px;
right: 61px;
font-size: 22px;
font-weight: 400;
}
.camera:hover {
color: #f00;
}
.search_box2 {
width: 50px;
height: 35px;
border: 1px solid #f00;
float: left;
background: #f00;
position: relative;
}
.search_box2 i {
color: #fff;
position: absolute;
top: 2px;
left: 12px;
font-size: 28px;
}
.content .shopcar {
width: 190px;
height: 35px;
padding-top: 5px;
position: absolute;
top: 20px;
left: 894px;
z-index: 3;
text-align: center;
border: 1px solid #f00;
background: #fff;
}
.content .shopcar i {
color: #f00;
font-size: 18px;
}
.content .shopcar a {
text-decoration: none;
font-size: 12px;
color: #f00;
cursor: pointer;
}
.shopcar .circle {
width: 15px;
height: 15px;
border-radius: 50%;
display: inline-block;
font-size: 12px;
color: #fff;
background: #f00;
position: absolute;
top: 4px;
right: 34px;
}
.content .ewm {
width: 68px;
height: 68px;
line-height: 68px;
position: absolute;
top: 0px;
left: 1122px;
z-index: 3;
text-align: center;
border: 1px solid #ccc;
background: #f0f3ef;
}
.content .ewm img {
width: 60px;
height: 60px;
margin-top: 3px;
display: block !important;
}
.content .inpbottext {
position: absolute;
top: 60px;
left: 316px;
}
.content .inpbottext1 {
position: absolute;
top: 110px;
left: 204px;
}
.content .inpbottext ul {
overflow: hidden;
}
.inpbottext ul li {
width: 62px;
height: 20px;
line-height: 20px;
float: left;
text-align: center;
}
.inpbottext1 ul li {
width: 77px;
height: 20px;
line-height: 20px;
float: left;
text-align: center;
}
.inpbottext ul li:first-child {
width: 68px;
height: 20px;
line-height: 20px;
overflow: hidden;
}
.inpbottext ul li:first-child a {
color: #f00;
}
.inpbottext_a1 {
animation: ani 8s infinite;
}
.inpbottext ul li a {
font-size: 12px;
color: #999;
text-decoration: none;
}
.inpbottext1 ul li a {
font-size: 14px;
color: #333;
text-decoration: none;
}
.inpbottext1 ul li .line:after {
top: 7px;
height: 10px;
}
.inpbottext ul li a:hover {
color: #f00;
}
.inpbottext1 ul li a:hover {
color: #f00;
}
@keyframes ani {
0% {
margin-left: 0px;
}
50% {
margin-left: -68px;
}
100% {
margin-left: 0px;
}
}
/* 正式内容部分 */
.realcontent {
width: 1190px;
height: 480px;
overflow: hidden;
}
.realcontent .asideleft {
width: 190px;
height: 480px;
float: left;
background: #fff;
padding-top: 10px;
}
.realcontent .asideleft li {
overflow: hidden;
width: 190px;
height: 26px;
line-height: 26px;
padding-left: 10px;
}
.realcontent .asideleft li:hover {
background: #d9d9d9;
}
.realcontent .asideleft li a {
color: #626262;
font-size: 14px;
text-decoration: none;
}
.asideleft li a:hover {
color: #f00;
}
.realcontent .asideleft li span {
line-height: 16px;
font-weight: 300;
font-size: 12px;
}
.realcontent .middle {
width: 1000px;
height: 480px;
float: left;
overflow: hidden;
position: relative;
background: #f0f3ef;
}
.middle .mouseoverappera {
width: 1000px;
height: 480px;
display: none;
z-index: 4;
}
.middle .mouseoverappera ul {
overflow: hidden;
}
.middle .mouseoverappera ul li {
width: 1000px;
height: 480px;
float: left;
display: none;
background: #fff;
}
/* 轮播图部分 */
.middle .lunbo {
width: 600px;
height: 480px;
float: left;
}
.lunbo img {
width: 590px;
height: 480px;
padding: 10px 10px 0 10px;
}
.asideright {
width: 400px;
height: 480px;
float: left;
z-index: 0;
background: #f0f3ef;
}
/* asideright右边 */
.right_box1 {
width: 190px;
height: 480px;
float: left;
}
.right_box1 img {
margin-top: 3px;
}
.right_box1 img:first-child {
margin-top: 9px;
}
.right_box2 {
width: 190px;
height: 480px;
float: left;
margin-left: 18px;
margin-top: 9px;
position: relative;
background: #fff;
}
.right_box2_1 {
width: 190px;
height: 150px;
}
.right_box2 .inimg {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
top: -10px;
left: 35%;
text-align: center;
background: #e3e1df;
box-shadow: 3px 6px 25px #c3c3c3;
}
.right_box2 img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: 4px;
}
.right_box2_1 {
width: 190px;
height: 90px;
position: absolute;
left: 0;
top: 60px;
text-align: center;
}
.right_box2_1 p {
font-size: 12px;
color: #888;
}
.right_box2_1 span a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.right_box2_1 span a:hover {
color: #f00;
}
.right_box2_1_text {
width: 190px;
height: 52px;
}
.right_box2_1_text button {
width: 70px;
height: 25px;
border: none;
margin-top: 16px;
border-radius: 13px;
box-shadow: 6px 8px 20px rgba(45, 45, 45, .15)
}
.right_box2_1_text .btntxt1 {
background: #fff;
color: #f00;
}
.right_box2_1_text .btntxt1:hover {
color: #fff;
background: #f00;
}
.right_box2_1_text .btntxt2 {
background: #363634;
color: #e5d790;
}
.right_box2_1_text .btntxt2:hover {
color: #fff;
background: #f00;
}
.right_box2_2 {
width: 190px;
height: 130px;
margin-top: 149px;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.rtxt {
width: 190px;
height: 26px;
position: relative;
}
.rtxt a {
color: #333;
font-size: 12px;
text-decoration: none;
padding: 0 15px;
}
.rtxt .more {
text-align: right;
padding-left: 30px;
}
.rtxt .line:after {
left: 57px;
top: 7px;
height: 15px;
}
.rtxt .more:hover {
color: #f00;
}
.redline {
width: 30px;
height: 2px;
margin: 0;
margin-left: 12px;
border: 1px solid #f00;
}
.right_box2_2 .list1 {
width: 165px;
height: 96px;
margin-top: 5px;
border-bottom: 1px solid #ccc;
z-index: 5;
}
.right_box2_2 .list2 {
width: 165px;
height: 96px;
margin-top: 5px;
display: none;
position: absolute;
top: 28px;
left: 12px;
border-bottom: 1px solid #ccc;
z-index: 5;
}
.list2 ul li {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.list1 ul li a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.list2 ul li a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.list1 ul li a:hover {
color: #f00;
}
.list2 ul li a:hover {
color: #f00;
}
.right_box2_3 {
width: 190px;
height: 235px;
padding-top: 17px;
position: absolute;
top: 278px;
left: 0;
overflow: hidden;
z-index: 4;
background: #fff;
}
.right_box2_3 ul {
overflow: hidden;
padding-left: 11px;
z-index: 5;
}
.right_box2_3 .right_box2_3_ul li {
width: 42px;
height: 50px;
float: left;
text-align: center;
padding-top: 5px;
position: relative;
margin-bottom: 13px;
}
.right_box2_3 .right_box2_3_ul li a {
color: #bea68d;
font-size: 12px;
text-decoration: none;
}
.right_box2_3 .right_box2_3_ul li span {
font-size: 12px;
height: 14px;
line-height: 14px;
background: #f00;
color: #fff;
position: absolute;
top: 0;
left: 28px;
text-align: center;
}
.icon {
width: 20px;
height: 20px;
}
.icon i {
font-size: 19px;
color: #bea68d;
font-weight: 200;
}
.icon .icon1 {
font-size: 12px;
}
.icon .icon2 {
font-size: 16px;
}
.right_box2_3 .close {
position: absolute;
bottom: 0;
right: 4px;
color: #666;
display: none;
}
.right_box2_3 .changebox {
display: block;
width: 190px;
height: 190px;
margin-left: 0;
position: absolute;
bottom: -190px;
left: 0;
z-index: 999;
background: #fff;
}
.right_box2_3 .changebox1 {
display: none;
}
.right_box2_3 .changebox2 {
display: none;
}
.right_box2_3 .changebox3 {
display: none;
}
.right_box2_3 .changebox1 .changeboxa00 {
width: 65px;
}
.right_box2_3 .changebox1 .changeboxa0 {
width: 50px;
}
.right_box2_3 .changebox {
overflow: hidden;
}
.right_box2_3 .changebox li {
width: 56px;
height: 21px;
float: left;
}
.changebox li a {
color: #666;
font-size: 12px;
text-decoration: none;
}
.changebox li a:hover {
color: #f00;
}
.huafei_1,
.huafei_3,
.huafei_5 {
width: 160px;
height: 133px;
display: none;
}
.huafei_1 {
display: block;
}
.huafei_1 ul {
width: 160px;
height: 133px;
padding-left: 0;
}
.huafei_3 ul {
width: 160px;
height: 133px;
padding-left: 0;
}
.huafei_5 ul {
width: 160px;
height: 133px;
padding-left: 0;
}
.changebox .huafei_1 ul li {
width: 160px;
height: 25px;
line-height: 25px;
}
.changebox .huafei_3 ul li {
width: 160px;
height: 25px;
line-height: 25px;
}
.changebox .huafei_5 ul li {
width: 160px;
height: 25px;
line-height: 25px;
}
.huafei_1 ul li span {
font-size: 12px;
margin-right: 5px;
color: #666;
}
.huafei_3 ul li span {
font-size: 12px;
margin-right: 5px;
color: #666;
}
.huafei_5 ul li span {
font-size: 12px;
margin-right: 5px;
color: #666;
}
.changebox .huafei_1 ul li input {
width: 124px;
height: 20px;
text-indent: 10px;
}
.changebox1 .huafei_1 .lucheng input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
.changebox1 .changeboxa01 {
text-align: center;
}
.changebox1 .huafei_6 {
overflow: hidden;
}
.changebox1 .huafei_5 .huafei_6 li {
width: 75px;
height: 96px;
float: left;
margin-top: 10px;
border: none;
}
.huafei_6 li img {
border-radius: 0;
width: 75px;
height: 96px;
display: block;
margin: 0;
}
.changebox1 .huafei_3 .lucheng input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
.changebox1 .huafei_1 .lucheng span {
display: inline-block;
height: 20px;
padding-bottom: 2px;
}
.changebox1 .huafei_1 .citychange input {
text-indent: 45px;
}
.changebox .huafei_3 ul li input {
width: 124px;
height: 20px;
line-height: 20px;
text-indent: 10px;
}
.changebox .huafei_5 ul li input {
width: 124px;
height: 20px;
font-size: 12px;
text-indent: 10px;
}
.huafei_1 ul li select {
width: 124px;
height: 20px;
line-height: 20px;
}
.huafei_3 ul li select {
width: 59px;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.huafei_5 ul li select {
width: 124px;
height: 20px;
line-height: 20px;
font-size: 12px;
}
.huafei_1 li .huafeiprice {
color: #f00 !important;
}
.huafei_3 li .huafeiprice {
color: #f00 !important;
}
.huafei_5 li .huafeiprice {
color: #f00 !important;
}
.huafei_1 button {
width: 59px;
height: 25px;
line-height: 25px;
border: none;
border-radius: 13px;
color: #fff;
background: #f00;
display: inline-block;
vertical-align: middle;
font-size: 12px;
}
.huafei_3 button {
width: 57px;
height: 25px;
line-height: 25px;
border: none;
border-radius: 13px;
color: #fff;
font-size: 12px;
background: #f00;
display: inline-block;
vertical-align: middle;
}
.huafei_5 button {
width: 60px;
height: 25px;
line-height: 25px;
border: none;
border-radius: 13px;
color: #fff;
background: #f00;
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
.huafei_1 button:hover {
cursor: pointer;
}
.huafei_3 button:hover {
cursor: pointer;
}
.huafei_5 button:hover {
cursor: pointer;
}
.huafei_1 ul li a {
color: #5476db;
}
.huafei_3 ul li a {
color: #5476db;
}
.changeboxa1 {
width: auto;
height: auto;
display: block !important;
}
.changebox2 .huafei_1 .luchneg input {
width: 114px;
}
.changebox2 .huafei_1 .citychange input {
width: 102px;
}
.changebox2 .huafei_6 {
overflow: hidden;
}
.changebox2 .huafei_3 .huafei_6 li {
width: 75px;
height: 96px;
float: left;
margin-top: 10px;
border: none;
}
.changebox2 .huafei_6 li img {
border-radius: 0;
width: 75px;
height: 96px;
display: block;
margin: 0;
}
.changebox3 .huafei_1 ul li {
width: 160px;
}
#lucheng input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
#lucheng1 input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
#lucheng2 input {
width: 12px;
height: 20px;
line-height: 20px;
font-size: 12px;
text-align: left;
vertical-align: middle;
}
//font部分自行到阿里巴巴矢量图官网下载素材使用