html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="小米商城直营小米公司旗下所有产品，包括小米手机系列小米CC9、小米9、小米MIX 3，Redmi 红米系列Redmi K20 Pro、Redmi Note 7，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持。">
<meta name="keywords" content="小米,小米9,小米cc9,Redmi K20,Redmi Note 7,小米MIX3,小米商城">
<title>小米商城 - 小米CC9、小米MIX 3、Redmi K20，小米电视官方网站</title>
<!--处理默认样式-->
<link rel="stylesheet" href="css/reset.css" />
<!--公共样式-->
<link rel="stylesheet" href="css/style.css" />
<!--首页样式-->
<link rel="stylesheet" href="css/index.css" />
<!--字体图标样式-->
<link rel="stylesheet" href="font/iconfont.css" />
<!-- 引入网页标题图标 -->
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<script src="js/index.js"></script>
</head>
<body>
<!-- 顶部 B-->
<div class="page-top">
<div class="container">
<div class="top-lt">
<a href="">小米商城</a>
<span>|</span>
<a href="">MIUI</a>
<span>|</span>
<a href="">loT</a>
<span>|</span>
<a href="">云服务</a>
<span>|</span>
<a href="">金融</a>
<span>|</span>
<a href="">有品</a>
<span>|</span>
<a href="">小爱开发平台</a>
<span>|</span>
<a href="">企业团购</a>
<span>|</span>
<a href="">资质证照</a>
<span>|</span>
<a href="">协议规则</a>
<span>|</span>
<a class="download" href="">
下载APP
<div class="down-box">
<b></b>
<img src="./img/download.png" alt="" />
<i>小米商城APP</i>
</div>
</a>
<span>|</span>
<a href="">Select Region</a>
</div>
<div class="top-rt">
<div class="login">
<a href="">登录</a>
<span>|</span>
<a href="">注册</a>
<span>|</span>
<a href="">消息通知</a>
<span>|</span>
</div>
<!-- <div class="userinfo">
<div class="user">
<a href="" class="tit">用户~~</a>
<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>
<span>|</span>
<a class="link" href="">消息通知</a>
<span>|</span>
<a class="link" href="">我的订单</a>
</div> -->
<div class="car-box">
<a href="" class="tit">
<i class="iconfont"></i>
购物车
<span>（8）</span>
</a>
<div class="pop">
<!-- <p class="no-good">购物车中还没有商品，赶紧选购吧！</p> -->
<ul class="list">
<li>
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num">699元×1</div>
</li>
<li>
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num">699元×1</div>
</li>
<li>
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num">699元×1</div>
</li>
<li>
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num">699元×1</div>
</li>
<li>
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num"><h5>699元×1</h5></div>
</li>
<li>
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num">699元×1</div>
</li>
<li>
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num">699元×1</div>
</li>
<li class="last">
<a href="" class="pic"><img src="img/images/购物车列表1.jpg" alt="" /></a>
<a href="" class="txt">小米电视4C 32英</a>
<i>×</i>
<div class="num">699元×1</div>
</li>
</ul>
<div class="total">
<div class="sum">
<div class="price">
<p>共 8 件商品</p>
<div class="totalprice">6023元</div>
</div>
<a href="" class="atn">去购物车结算</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 顶部 E-->
<!-- 导航 S-->
<div class="page-nav">
<div class="container">
<a href="" class="logo"></a>
<ul class="nav">
<li class="nav-item" id="page-all-nav">
<a href="" class="tit">全部商品分类</a>
<!--全部分类下拉菜单-->
<div class="slider-nav">
<ul class="slider-ul">
<li class="slider-li">
<a href="" class="name">
<span>手机</span>
<span>电话卡</span>
<i class="iconfont"></i>
</a>
<div class="slider-pop">
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
<a href="" class="pop-li">
<img src="img/小米CC9.png" alt="">
<p>小米CC9</p>
</a>
</div>
</li>
<li class="slider-li">
<a href="" class="name">
<span>电视</span>
<span>盒子</span>
<i class="iconfont"></i>
</a>
<div class="slider-pop">
</div>
</li>
<li class="slider-li">
<a href="" class="name">
<span>笔记本</span>
<span>平板</span>
<i class="iconfont"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>家电</span>
<span>插线板</span>
<i class="iconfont"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>出行</span>
<span>穿戴</span>
<i class="iconfont"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>智能</span>
<span>路由器</span>
<i class="iconfont"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>电源</span>
<span>配件</span>
<i class="iconfont"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>健康</span>
<span>儿童</span>
<i class="iconfont"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>耳机</span>
<span>音箱</span>
<i class="iconfont"></i>
</a>
</li>
<li class="slider-li">
<a href="" class="name">
<span>生活</span>
<span>箱包</span>
<i class="iconfont"></i>
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">小米手机</a>
<div class="pop">
<div class="container">
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/小米CC9.png" alt="">
<h3 class="name">小米CC9</h3>
<p class="price">1799元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/小米CC9.png" alt="">
<h3 class="name">小米CC9</h3>
<p class="price">1799元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/小米CC9.png" alt="">
<h3 class="name">小米CC9</h3>
<p class="price">1799元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/小米CC9.png" alt="">
<h3 class="name">小米CC9</h3>
<p class="price">1799元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/小米CC9.png" alt="">
<h3 class="name">小米CC9</h3>
<p class="price">1799元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/小米CC9.png" alt="">
<h3 class="name">小米CC9</h3>
<p class="price">1799元起</p>
<i></i>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">Redmi 红米</a>
<div class="pop">
<div class="container">
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/Redmi.png" alt="">
<h3 class="name">Redmi K20 Pro</h3>
<p class="price">2499元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/Redmi.png" alt="">
<h3 class="name">Redmi K20 Pro</h3>
<p class="price">2499元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/Redmi.png" alt="">
<h3 class="name">Redmi K20 Pro</h3>
<p class="price">2499元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/Redmi.png" alt="">
<h3 class="name">Redmi K20 Pro</h3>
<p class="price">2499元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/Redmi.png" alt="">
<h3 class="name">Redmi K20 Pro</h3>
<p class="price">2499元起</p>
<i></i>
</a>
</div>
<div class="item">
<span>新品</span>
<a href="" class="pic">
<img src="./img/Redmi.png" alt="">
<h3 class="name">Redmi K20 Pro</h3>
<p class="price">2499元起</p>
<i></i>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="" class="tit">电视</a>
</li>
<li class="nav-item">
<a href="" class="tit">笔记本</a>
</li>
<li class="nav-item">
<a href="" class="tit">家电</a>
</li>
<li class="nav-item">
<a href="" class="tit">路由器</a>
</li>
<li class="nav-item">
<a href="" class="tit">智能硬件</a>
</li>
<li class="nav-item">
<a href="" class="tit">服务</a>
</li>
<li class="nav-item">
<a href="" class="tit">社区</a>
</li>
</ul>
<div class="search">
<!-- <form action="" method="POST" class="active">
<input type="text" class="p" />
<div class="btn">
<i class="iconfont"></i>
</div>
<span class="tage1">小米9</span>
<span class="tage2">小米9 SE</span>
</form> -->
<form action="" method="POST" id="form">
<input type="text" class="p" onclick="show()"/>
<div class="btn">
<i class="iconfont"></i>
</div>
<span class="tage1">小米9</span>
<span class="tage2">小米9 SE</span>
</form>
<div class="hot" id="hot">
<a href="">小米 9</a>
<a href="">Redmi K20 Pro</a>
<a href="">Redmi K20</a>
<a href="">Redmi Note 7 Pro</a>
<a href="">Redmi Note 7</a>
<a href="">小米电视4c</a>
<a href="">电视32英寸</a>
<a href="">笔记本pro</a>
<a href="">小爱音箱</a>
<a href="">净水器</a>
</div>
</div>
</div>
</div>
<!-- 导航 E-->
<!--轮播导航 S-->
<div class="idx-banner container" >
<ul class="banner-list">
<li><img src="img/轮播图1.jpg" alt=""><a href=""></a></li>
<li><img src="img/轮播图2.jpg" alt=""><a href=""></a></li>
<li><img src="img/轮播图3.jpg" alt=""><a href=""></a></li>
<li><img src="img/轮播图4.jpg" alt=""><a href=""></a></li>
<li><img src="img/轮播图5.jpg" alt=""><a href=""></a></li>
</ul>
<a href="" class="btn prev">
<span class="iconfont"></span>
</a>
<a href="" class="btn next">
<span class="iconfont"></span>
</a>
<div class="page">
<a href=""><span>1</span></a>
<a href=""><span>2</span></a>
<a href=""><span>3</span></a>
<a href=""><span>4</span></a>
<a href=""><span>5</span></a>
</div>
</div>
<!--轮播导航 E-->
<!--菜单和广告 S-->
<div class="idx-menu-adv">
<ul class="menu">
<li class="bb br"><a href=""><i class="iconfont"></i><span>小米秒杀</span></a></li>
<li class="bb br"><a href=""><i class="iconfont"></i><span>企业团购</span></a></li>
<li class="bb"><a href=""><i class="iconfont"></i><span>F码通道</span></a></li>
<li class="br"><a href=""><i class="iconfont"></i><span>米粉卡</span></a></li>
<li class="br"><a href=""><i class="iconfont"></i><span>以旧换新</span></a></li>
<li><a href=""><i class="iconfont"></i><span>话费充值</span></a></li>
</ul>
<a href="" class="pic"><img src="img/广告1.jpg" alt=""></a>
<a href="" class="pic"><img src="img/广告2.jpg" alt=""></a>
<a href="" class="pic"><img src="img/广告3.jpg" alt=""></a>
</div>
<!--菜单和广告 E-->
<!-- 大内容区 S -->
<div class="idx-container">
<!-- 广告图 S -->
<div class="idx-adv container"><a href=""><img src="img/adv1.png" alt=""></a></div>
<!-- 广告图 E -->
<div class="container">
<!-- 手机 -->
<div class="idx-title">
<span class="tit">手机</span>
<a href="" class="see-all">查看全部<i class="iconfont"></i></a>
</div>
<div class="idx-phone idx-box">
<div class="adv-box col-5">
<a href="" class="single"><img src="img/side1.png" alt=""></a>
</div>
<div class="good-box">
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/phone1.png" alt=""></a>
<h3 class="name"><a href="">Redmi K20 Pro 6GB+128GB</a></h3>
<h4 class="desc">骁龙855， 弹出全面屏</h4>
<p class="price"><span>2299元</span><i>2599元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/phone2.png" alt=""></a>
<h3 class="name"><a href="">Redmi Note 7</a></h3>
<h4 class="desc">4800万拍照千元机</h4>
<p class="price"><span>1199元</span><i>1399元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/phone3.png" alt=""></a>
<h3 class="name"><a href="">小米9 王源限量版</a></h3>
<h4 class="desc">骁龙855，索尼4800万三摄</h4>
<p class="nprice"><span>3599元</span></p>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/phone4.png" alt=""></a>
<h3 class="name"><a href="">小米MIX 3 8GB+128GB</a></h3>
<h4 class="desc">DxO百分拍照手机</h4>
<p class="price"><span>2599元</span><i>3599元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/phone5.png" alt=""></a>
<h3 class="name"><a href="">小米CC9e</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1299元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage"></span>
<a href="" class="pic"><img src="img/phone6.png" alt=""></a>
<h3 class="name"><a href="">小米CC9</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1799元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/phone7.png" alt=""></a>
<h3 class="name"><a href="">小米CC9 8GB+256GB 美图定制版</a></h3>
<h4 class="desc">8GB+256GB，100%美图相机</h4>
<p class="nprice"><span>2599元</span></p>
</div>
<div class="good-item col-5">
<span class="tage"></span>
<a href="" class="pic"><img src="img/phone8.png" alt=""></a>
<h3 class="name"><a href="">Redmi Note 7 Pro</a></h3>
<h4 class="desc">索尼4800万超清拍照</h4>
<p class="price"><span>1399元</span><i>1599元</i></p>
</div>
</div>
</div>
<!-- 家电 -->
<div class="idx-adv"><a href=""><img src="img/adv2.jpg" alt=""></a></div>
<div class="idx-title">
<span class="tit">家电</span>
<ul class="list">
<li><a class="active" href="">热门</a></li>
<li><a href="">电视影音</a></li>
</ul>
</div>
<div class="idx-home-appliances idx-box">
<div class="adv-box col-5">
<a href="" class="double"><img src="img/家电1.jpg" alt=""></a>
<a href="" class="double"><img src="img/家电2.jpg" alt=""></a>
</div>
<div class="good-box">
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home1.jpg" alt=""></a>
<h3 class="name"><a href="">米家互联网空调C1（一级能效）</a></h3>
<h4 class="desc">1.5匹，自清洁，全直流变频</h4>
<p class="price"><span>2299元</span><i>2799元</i></p>
<div class="pop">
<h5><a href="">发货超级快，很快就收到了，非常的喜欢这个商品，这个里面有很多东西是我平时用的内容</a></h5>
<p><a href="">来自 星星的你 的评论</a></p>
</div>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home2.jpg" alt=""></a>
<h3 class="name"><a href="">Redmi Note 7</a></h3>
<h4 class="desc">4800万拍照千元机</h4>
<p class="price"><span>1199元</span><i>1399元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home3.jpg" alt=""></a>
<h3 class="name"><a href="">小米9 王源限量版</a></h3>
<h4 class="desc">骁龙855，索尼4800万三摄</h4>
<p class="nprice"><span>3599元</span></p>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home4.jpg" alt=""></a>
<h3 class="name"><a href="">小米MIX 3 8GB+128GB</a></h3>
<h4 class="desc">DxO百分拍照手机</h4>
<p class="price"><span>2599元</span><i>3599元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home5.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9e</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1299元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage"></span>
<a href="" class="pic"><img src="img/home6.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1799元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home7.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9 8GB+256GB 美图定制版</a></h3>
<h4 class="desc">8GB+256GB，100%美图相机</h4>
<p class="nprice"><span>2599元</span></p>
</div>
<div class="good-item col-5 last-more">
<div class="good-top">
<div class="txt">
<h3><a href="">Air 13.3" 2019款</a></h3>
<p><a href="">4699元起</a></p>
</div>
<a href="" class="sm-img">
<img src="img/home8.jpg" alt="">
</a>
</div>
<div class="good-more">
<div class="txt">
<h3><a href="">浏览更多</a></h3>
<p><a href="">热门</a></p>
</div>
<i class="iconfont"></i>
</div>
</div>
</div>
<!-- <div class="good-box"></div> -->
</div>
<!-- 智能 -->
<div class="idx-adv"><a href=""><img src="img/adv3.jpg" alt=""></a></div>
<div class="idx-title">
<span class="tit">家电</span>
<ul class="list">
<li><a class="active" href="">热门</a></li>
<li><a href="">电视影音</a></li>
</ul>
</div>
<div class="idx-home-appliances idx-box">
<div class="adv-box col-5">
<a href="" class="double"><img src="img/家电1.jpg" alt=""></a>
<a href="" class="double"><img src="img/家电2.jpg" alt=""></a>
</div>
<div class="good-box">
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home1.jpg" alt=""></a>
<h3 class="name"><a href="">米家互联网空调C1（一级能效）</a></h3>
<h4 class="desc">1.5匹，自清洁，全直流变频</h4>
<p class="price"><span>2299元</span><i>2799元</i></p>
<div class="pop">
<h5><a href="">发货超级快，很快就收到了，非常的喜欢这个商品，这个里面有很多东西是我平时用的内容</a></h5>
<p><a href="">来自 星星的你 的评论</a></p>
</div>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home2.jpg" alt=""></a>
<h3 class="name"><a href="">Redmi Note 7</a></h3>
<h4 class="desc">4800万拍照千元机</h4>
<p class="price"><span>1199元</span><i>1399元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home3.jpg" alt=""></a>
<h3 class="name"><a href="">小米9 王源限量版</a></h3>
<h4 class="desc">骁龙855，索尼4800万三摄</h4>
<p class="nprice"><span>3599元</span></p>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home4.jpg" alt=""></a>
<h3 class="name"><a href="">小米MIX 3 8GB+128GB</a></h3>
<h4 class="desc">DxO百分拍照手机</h4>
<p class="price"><span>2599元</span><i>3599元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home5.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9e</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1299元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage"></span>
<a href="" class="pic"><img src="img/home6.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1799元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home7.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9 8GB+256GB 美图定制版</a></h3>
<h4 class="desc">8GB+256GB，100%美图相机</h4>
<p class="nprice"><span>2599元</span></p>
</div>
<div class="good-item col-5 last-more">
<div class="good-top">
<div class="txt">
<h3><a href="">Air 13.3" 2019款</a></h3>
<p><a href="">4699元起</a></p>
</div>
<a href="" class="sm-img">
<img src="img/home8.jpg" alt="">
</a>
</div>
<div class="good-more">
<div class="txt">
<h3><a href="">浏览更多</a></h3>
<p><a href="">热门</a></p>
</div>
<i class="iconfont"></i>
</div>
</div>
</div>
<!-- <div class="good-box"></div> -->
</div>
<!-- 搭配 -->
<div class="idx-adv"><a href=""><img src="img/adv4.jpg" alt=""></a></div>
<div class="idx-title">
<span class="tit">家电</span>
<ul class="list">
<li><a class="active" href="">热门</a></li>
<li><a href="">电视影音</a></li>
</ul>
</div>
<div class="idx-home-appliances idx-box">
<div class="adv-box col-5">
<a href="" class="double"><img src="img/家电1.jpg" alt=""></a>
<a href="" class="double"><img src="img/家电2.jpg" alt=""></a>
</div>
<div class="good-box">
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home1.jpg" alt=""></a>
<h3 class="name"><a href="">米家互联网空调C1（一级能效）</a></h3>
<h4 class="desc">1.5匹，自清洁，全直流变频</h4>
<p class="price"><span>2299元</span><i>2799元</i></p>
<div class="pop">
<h5><a href="">发货超级快，很快就收到了，非常的喜欢这个商品，这个里面有很多东西是我平时用的内容</a></h5>
<p><a href="">来自 星星的你 的评论</a></p>
</div>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home2.jpg" alt=""></a>
<h3 class="name"><a href="">Redmi Note 7</a></h3>
<h4 class="desc">4800万拍照千元机</h4>
<p class="price"><span>1199元</span><i>1399元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home3.jpg" alt=""></a>
<h3 class="name"><a href="">小米9 王源限量版</a></h3>
<h4 class="desc">骁龙855，索尼4800万三摄</h4>
<p class="nprice"><span>3599元</span></p>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home4.jpg" alt=""></a>
<h3 class="name"><a href="">小米MIX 3 8GB+128GB</a></h3>
<h4 class="desc">DxO百分拍照手机</h4>
<p class="price"><span>2599元</span><i>3599元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home5.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9e</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1299元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage"></span>
<a href="" class="pic"><img src="img/home6.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1799元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home7.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9 8GB+256GB 美图定制版</a></h3>
<h4 class="desc">8GB+256GB，100%美图相机</h4>
<p class="nprice"><span>2599元</span></p>
</div>
<div class="good-item col-5 last-more">
<div class="good-top">
<div class="txt">
<h3><a href="">Air 13.3" 2019款</a></h3>
<p><a href="">4699元起</a></p>
</div>
<a href="" class="sm-img">
<img src="img/home8.jpg" alt="">
</a>
</div>
<div class="good-more">
<div class="txt">
<h3><a href="">浏览更多</a></h3>
<p><a href="">热门</a></p>
</div>
<i class="iconfont"></i>
</div>
</div>
</div>
<!-- <div class="good-box"></div> -->
</div>
<!-- 配件 -->
<div class="idx-adv"><a href=""><img src="img/adv5.jpg" alt=""></a></div>
<div class="idx-title">
<span class="tit">家电</span>
<ul class="list">
<li><a class="active" href="">热门</a></li>
<li><a href="">电视影音</a></li>
</ul>
</div>
<div class="idx-home-appliances idx-box">
<div class="adv-box col-5">
<a href="" class="double"><img src="img/家电1.jpg" alt=""></a>
<a href="" class="double"><img src="img/家电2.jpg" alt=""></a>
</div>
<div class="good-box">
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home1.jpg" alt=""></a>
<h3 class="name"><a href="">米家互联网空调C1（一级能效）</a></h3>
<h4 class="desc">1.5匹，自清洁，全直流变频</h4>
<p class="price"><span>2299元</span><i>2799元</i></p>
<div class="pop">
<h5><a href="">发货超级快，很快就收到了，非常的喜欢这个商品，这个里面有很多东西是我平时用的内容</a></h5>
<p><a href="">来自 星星的你 的评论</a></p>
</div>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home2.jpg" alt=""></a>
<h3 class="name"><a href="">Redmi Note 7</a></h3>
<h4 class="desc">4800万拍照千元机</h4>
<p class="price"><span>1199元</span><i>1399元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home3.jpg" alt=""></a>
<h3 class="name"><a href="">小米9 王源限量版</a></h3>
<h4 class="desc">骁龙855，索尼4800万三摄</h4>
<p class="nprice"><span>3599元</span></p>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home4.jpg" alt=""></a>
<h3 class="name"><a href="">小米MIX 3 8GB+128GB</a></h3>
<h4 class="desc">DxO百分拍照手机</h4>
<p class="price"><span>2599元</span><i>3599元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home5.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9e</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1299元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage"></span>
<a href="" class="pic"><img src="img/home6.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1799元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home7.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9 8GB+256GB 美图定制版</a></h3>
<h4 class="desc">8GB+256GB，100%美图相机</h4>
<p class="nprice"><span>2599元</span></p>
</div>
<div class="good-item col-5 last-more">
<div class="good-top">
<div class="txt">
<h3><a href="">Air 13.3" 2019款</a></h3>
<p><a href="">4699元起</a></p>
</div>
<a href="" class="sm-img">
<img src="img/home8.jpg" alt="">
</a>
</div>
<div class="good-more">
<div class="txt">
<h3><a href="">浏览更多</a></h3>
<p><a href="">热门</a></p>
</div>
<i class="iconfont"></i>
</div>
</div>
</div>
<!-- <div class="good-box"></div> -->
</div>
<!-- 周边 -->
<div class="idx-adv"><a href=""><img src="img/adv6.jpg" alt=""></a></div>
<div class="idx-title">
<span class="tit">家电</span>
<ul class="list">
<li><a class="active" href="">热门</a></li>
<li><a href="">电视影音</a></li>
</ul>
</div>
<div class="idx-home-appliances idx-box">
<div class="adv-box col-5">
<a href="" class="double"><img src="img/家电1.jpg" alt=""></a>
<a href="" class="double"><img src="img/家电2.jpg" alt=""></a>
</div>
<div class="good-box">
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home1.jpg" alt=""></a>
<h3 class="name"><a href="">米家互联网空调C1（一级能效）</a></h3>
<h4 class="desc">1.5匹，自清洁，全直流变频</h4>
<p class="price"><span>2299元</span><i>2799元</i></p>
<div class="pop">
<h5><a href="">发货超级快，很快就收到了，非常的喜欢这个商品，这个里面有很多东西是我平时用的内容</a></h5>
<p><a href="">来自 星星的你 的评论</a></p>
</div>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home2.jpg" alt=""></a>
<h3 class="name"><a href="">Redmi Note 7</a></h3>
<h4 class="desc">4800万拍照千元机</h4>
<p class="price"><span>1199元</span><i>1399元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home3.jpg" alt=""></a>
<h3 class="name"><a href="">小米9 王源限量版</a></h3>
<h4 class="desc">骁龙855，索尼4800万三摄</h4>
<p class="nprice"><span>3599元</span></p>
</div>
<div class="good-item col-5">
<span class="tage n1">新品</span>
<a href="" class="pic"><img src="img/home4.jpg" alt=""></a>
<h3 class="name"><a href="">小米MIX 3 8GB+128GB</a></h3>
<h4 class="desc">DxO百分拍照手机</h4>
<p class="price"><span>2599元</span><i>3599元</i></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home5.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9e</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1299元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage"></span>
<a href="" class="pic"><img src="img/home6.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9</a></h3>
<h4 class="desc">3200万自拍，4800万三摄</h4>
<p class="nprice"><span>1799元起</span></p>
</div>
<div class="good-item col-5">
<span class="tage n2">抢购</span>
<a href="" class="pic"><img src="img/home7.jpg" alt=""></a>
<h3 class="name"><a href="">小米CC9 8GB+256GB 美图定制版</a></h3>
<h4 class="desc">8GB+256GB，100%美图相机</h4>
<p class="nprice"><span>2599元</span></p>
</div>
<div class="good-item col-5 last-more">
<div class="good-top">
<div class="txt">
<h3><a href="">Air 13.3" 2019款</a></h3>
<p><a href="">4699元起</a></p>
</div>
<a href="" class="sm-img">
<img src="img/home8.jpg" alt="">
</a>
</div>
<div class="good-more">
<div class="txt">
<h3><a href="">浏览更多</a></h3>
<p><a href="">热门</a></p>
</div>
<i class="iconfont"></i>
</div>
</div>
</div>
<!-- <div class="good-box"></div> -->
</div>
<!-- 视频 -->
<!-- <div class="idx-adv"><a href=""><img src="img/adv7.jpg" alt=""></a></div>
<div class="idx-vedio"> -->
<!-- </div> -->
</div>
</div>
<!-- 大内容区 E -->
<!-- 底部 S -->
<div class="idx-bottom">
<div class="container">
<div class="top">
<div class="item"><span class="iconfont"></span><a href="">预约维修服务</a></div>
<div class="item"><span class="iconfont"></span><a href="">7天无理由退货</a></div>
<div class="item"><span class="iconfont"></span><a href="">15天免费换货</a></div>
<div class="item"><span class="iconfont"></span><a href="">满150元包邮</a></div>
<div class="item last"><span class="iconfont"></span><a href="">520余家售后网点</a></div>
</div>
<div class="service">
<div class="left">
<div class="box">
<span class="txt">帮助中心</span>
<i class="item">账户管理</i>
<i class="item">购物指南</i>
<i class="item">订单操作</i>
</div>
<div class="box">
<span class="txt">服务支持</span>
<i class="item">售后政策</i>
<i class="item">自助服务</i>
<i class="item">相关下载</i>
</div>
<div class="box">
<span class="txt">线下门店</span>
<i class="item">小米之家</i>
<i class="item">服务网点</i>
<i class="item">授权体验店</i>
</div>
<div class="box">
<span class="txt">关于小米</span>
<i class="item">了解小米</i>
<i class="item">加入小米</i>
<i class="item">投资者关系</i>
</div>
<div class="box">
<span class="txt">关注我们</span>
<i class="item">新浪微博</i>
<i class="item">官方微信</i>
<i class="item">联系我们</i>
</div>
<div class="box">
<span class="txt">特色服务</span>
<i class="item">F码通道</i>
<i class="item">礼物吗</i>
<i class="item">防伪查询</i>
</div>
</div>
<div class="right">
<h3>400-100-5678</h3>
<i>周一至周日 8：00-18:00</i>
<i>（仅收市话费）</i>
<div class="phone">人工客服</div>
</div>
</div>
</div>
</div>
<!-- 底部 E -->
<!-- 广告 s -->
<div class="idx-badv">
<div class="container">
</div>
<div class="slogan">探索黑科技，小米为发烧而生</div>
</div>
<!-- 广告 E -->
</body>
</html>css部分
body{
min-height: 6000px;
}
/* 全部分类菜单 */
.page-nav .slider-nav{
width: 234px;
height: 460px;
background-color: rgba(0,0,0,0.6);
border: none;
}
.page-nav .slider-nav .slider-li span{
color: #fff;
}
#page-all-nav .slider-nav{
visibility: visible;
}
/* 首页轮播 */
.idx-banner{
height: 460px;
overflow: hidden;
position: relative;
}
.idx-banner ul{
width: 20000px;
}
.idx-banner li{
width: 1226px;
height: 460px;
float:left;
position: relative;
}
.idx-banner li img{
width: 1226px;
height: 460px;
}
.idx-banner li a{
position: absolute;
width: 996px;
height: 460px;
background-color: rgb(0,0,0,0.3);
top: 0;
right: 0;
}
.idx-banner .btn{
position: absolute;
top: 50%;
margin-top: -35px;
width: 41px;
height: 69px;
cursor: pointer;
}
.idx-banner .btn span{
display: block;
font-size: 32px;
text-align: center;
margin-top: 15px;
}
.idx-banner .btn.prev{
left: 233px;
}
.idx-banner .btn.next{
right: 0;
}
.idx-banner .btn:hover{
background-color: rgb(0,0,0,0.6);
}
.idx-banner .page{
position: absolute;
right: 0;
bottom: 0;
z-index: 1000;
padding-right: 30px;
}
.idx-banner .page a{
display: inline-block;
margin: 0 2px;
width: 6px;
height: 6px;
border: 2px solid #fff;
border-color: rgb(255,255,255,0.3);
border-radius: 50%;
z-index: 10;
background-color: #f5f5f5;
background-color: rgb(0,0,0,0.4);
}
.idx-banner .page span{
visibility: hidden;
}
.idx-banner .page a:hover{
background-color: #fff;
background-color: rgb(255,255,255,0.4);
border-color: #757575;
border-color: rgb(0,0,0,0.4);
}
/* 菜单区域和广告位 */
.idx-menu-adv{
width: 1226px;
height: 170px;
margin: 14px auto;
margin-bottom: 26px;
overflow: hidden;
}
.idx-menu-adv .menu{
width: 214px;
height: 150px;
float: left;
padding: 10px;
font-size: 12px;
text-align: center;
background-color: #5f5750;
}
.idx-menu-adv .menu li{
position: relative;
float: left;
width: 70px;
height: 82px;
}
.idx-menu-adv .menu li a{
display: block;
padding-top: 18px;
color: #fff;
opacity: 0.7;
transition: opacity .2s;
}
.idx-menu-adv .menu li a:hover{
opacity: 1;
}
.idx-menu-adv .menu li i{
display: block;
width: 24px;
height: 24px;
margin: 0 auto 4px;
font-size: 23px;
}
.idx-menu-adv .menu li span{
display: block;
}
.idx-menu-adv .menu .bb:before{
content: "";
display: block;
width: 56px;
height: 1px;
background-color: rgb(102,94,87);
position: absolute;
left:7px;
bottom: 0;
}
.idx-menu-adv .menu .br:after{
content: "";
display: block;
width: 1px;
height: 68px;
background-color: rgb(102,94,87);
position: absolute;
right: 0;
bottom: 8px;
}
.idx-menu-adv .pic{
display: block;
float: left;
margin-left: 15px;
transition: box-shadow .2s;
}
.idx-menu-adv .pic:hover{
box-shadow: 0px 15px 30px rgba(0,0,0,0.1);
}
.idx-menu-adv .pic img{
width: 315px;
height: 170px;
}
.idx-container{
padding-top: 4px;
padding-bottom: 12px;
background-color: #f5f5f5;
}
.idx-adv{
height: 120px;
margin: 22px auto;
overflow: hidden;
}
.idx-container .idx-adv{
margin-top: 40px;
}
.idx-title{
position: relative;
height: 58px;
}
.idx-title .tit{
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
}
.idx-title .see-all{
position: absolute;
right: 0px;
font-size: 16px;
line-height: 58px;
color: #424242;
transition: all .4s;
}
.see-all .iconfont{
display: block;
float: right;
width: 12px;
height: 12px;
padding: 4px;
margin-left: 3px;
margin-right: 8px;
margin-top: 19px;
font-size: 24px;
font-weight: 800;
line-height: 12px;
}
.idx-title .see-all:hover{
color: #ff6700;
}
.idx-title .list{
width: 400px;
float: right;
text-align: right;
position: relative;
top: 12px;
}
.idx-title .list li{
display: inline-block;
font-size: 16px;
margin-left: 26px;
}
.idx-title .list li a{
display: block;
height:32px;
}
.idx-title .list li a.active,
.idx-title .list li a:hover{
color: #ff6700;
border-bottom: 2px solid #ff6700;
}
.idx-container .col-5{
float: left;
height: 260px;
padding: 20px 0;
width: 234px;
margin-left: 14px;
margin-bottom: 14px;
background-color: #fff;
transition: all .2s;
line-height: 12px;
}
.idx-box{
height: 614px;
margin-bottom: 8px;
}
.idx-container .adv-box.col-5{
margin-left: 0;
padding: 0;
}
.idx-box .adv-box .single{
display: block;
width: 234px;
height: 614px;
}
.idx-box .adv-box .double{
display: block;
height: 300px;
margin-bottom: 14px;
}
.good-box{
float: right;
position: relative;
width:992px;
height: 614px;
text-align: center;
}
.good-box .good-item{
position: relative;
}
.good-item .tage{
width: 64px;
height: 20px;
position: relative;
left: 50%;
margin-left: -32px;
margin-top: -20px;
margin-bottom: 10px;
line-height: 20px;
}
.good-item .tage.n1{
color: #fff;
background-color: green;
}
.good-item .tage.n2{
color: #fff;
background-color: red;
}
.good-item span{
display: block;
}
.good-item .pic img{
width: 160px;
height: 160px;
}
.good-item .pic{
margin: 0 auto 18px;
}
.good-item .name a{
display: block;
font-size: 13px;
margin: 20px 10px 10px;
font-weight: 400;
color: #333;
}
.good-item .desc{
margin: 0 10px 10px;
height: 18px;
font-size: 12px;
color: #b0b0b0;
cursor: pointer;
}
.good-item .price{
margin: 0px 10px 14px;
text-align: center;
cursor: pointer;
}
.good-item .nprice{
margin: 0px 10px 14px;
text-align: center;
cursor: pointer;
color: #ff6700;
}
.good-item .price span{
display: block;
float: left;
margin: 0 auto;
margin-left: 60px;
color: #ff6700;
}
.good-item .price i{
display: block;
float: left;
margin-left: 10px;
color: #b0b0b0;
text-decoration: line-through;
}
.idx-box .good-item .pop{
height: 76px;
position: absolute;
background-color: #ff6700;
left: 0;
bottom: 0;
padding: 10px 25px;
text-align: left;
display: none;
}
.idx-box .good-item .pop h5{
line-height: 18px;
height: 36px;
overflow: hidden;
margin-bottom: 4px;
}
.idx-box .good-item .pop p{
white-space: nowrap;
overflow: hidden;
color: #fff;
color: rgba(255,255,255,0.6);
}
.idx-box .good-item .pop h5 a{
color: #fff;
font-weight: normal;
}
.idx-box .good-item .pop p a{
color: rgba(255,255,255,0.6);
text-overflow: ellipsis;
}
.idx-box .good-item:hover,
.idx-box .adv-box .single:hover,
.idx-box .adv-box .double:hover,
.idx-box .last-more .good-top:hover,
.idx-box .last-more .good-more:hover{
z-index: 2;
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.idx-box .good-item:hover .pop{
display: block;
}
.idx-box .last-more{
background-color: transparent;
background-color: #f5f5f5;
padding: 0px;
}
.idx-box .last-more .good-top{
height: 93px;
padding-top: 50px;
background-color: #fff;
}
.idx-box .last-more .good-top .txt{
width: 95px;
float: left;
margin-left: 30px;
text-align: left;
line-height: 20px;
}
.idx-box .last-more .good-top .txt h3 a{
color: #333;
font-size: 13px;
}
.idx-box .last-more .good-top .txt p a{
color: #ff6700;
font-size: 12px;
}
.idx-box .last-more .good-top .sm-img{
display: block;
float: right;
margin-top: -8px;
}
.idx-box .last-more .good-top .sm-img img{
width: 80px;
height: 80px;
}
.idx-box .last-more .good-more{
margin-top:14px;
height: 93px;
padding-top: 50px;
background-color: #fff;
}
.idx-box .last-more .good-more .txt{
display: block;
margin-left: 30px;
text-align: left;
line-height: 20px;
width: 95px;
float: left;
}
.idx-box .last-more .good-more .txt h3 a{
font-size: 18px;
color: #333;
}
.idx-box .last-more .good-more .txt p a{
font-size:12px;
color: #757575;
}
.idx-box .last-more .good-more i{
display: block;
margin-right: 30px;
font-size: 48px;
line-height: 48px;
color: #ff6700;
cursor: pointer;
float: right;
}
.idx-box .last-more:hover{
box-shadow: none;
}
.idx-bottom{
background-color: #fff;
}
.idx-bottom .top{
padding: 27px 0;
border-bottom: 1px solid #e0e0e0;
}
.idx-bottom .top .item{
float: left;
text-align: center;
width: 19.8%;
height: 25px;
border-right: 1px solid #e0e0e0;
font-size: 16px;
line-height: 25px;
margin-top: -12px;
transition: color .2s;
}
.idx-bottom .top .item.last{
border-right: none;
}
.idx-bottom .top .item a{
color: #616161;
transition: color .2s;
}
.idx-bottom .top .item:hover{
color: #ff6700;
}
.idx-bottom .top .item a:hover{
color: #ff6700;
}
.idx-bottom .service{
padding: 40px 0;
overflow: hidden;
}
.idx-bottom .service .left{
float: left;
width: 973px;
border-right: 1px solid #e0e0e0;
overflow: hidden;
}
.idx-bottom .service .left .box{
float: left;
width: 160px;
height: 112px;
margin: 0;
text-align: left;
line-height: 17px;
}
.idx-bottom .service .left .box span{
line-height: 1.25;
font-size: 14px;
margin: -1px 0 26px;
color: #424242;
display: block;
}
.idx-bottom .service .left .box i{
display: block;
margin: 10px 0 0;
font-size: 12px;
color: #757575;
cursor: pointer;
transition: color .2s;
}
.idx-bottom .service .left .box i:hover{
color: #ff6700;
}
.idx-bottom .service .right{
width: 250px;
float: right;
text-align: center;
}
.idx-bottom .service .right h3{
margin: 0 0 5px;
font-size: 22px;
line-height: 1;
color: #ff6700;
}
.idx-bottom .service .right i{
display: block;
font-size: 12px;
line-height: 1;
}
.idx-bottom .service .right .phone{
border: 1px solid #ff6700;
width: 118px;
height: 28px;
font-size: 12px;
line-height: 28px;
color: #ff6700;
margin: 20px auto;
transition: all .2s;
cursor: pointer;
}
.idx-bottom .service .right .phone:hover{
background-color: #ff6700;
color: #fff;
}
.idx-badv{
background-color: #fafafa;
padding: 30px 0;
}
.idx-adv .container{
font-size: 12px;
}
.idx-badv .slogan{
clear: both;
margin: 30px auto 0;
width: 267px;
height: 19px;
color: rgb(220,220,220);
font-size: 19px;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}/* 公共样式 */
body{
font-size: 12px;
color: #333;
}
a{
text-decoration: none;
color:#b0b0b0;
}
/* 顶部代码 */
.page-top{
height:38px;
background-color: #323232;
}
.container{
width:1226px;
margin-right: auto;
margin-left: auto;
line-height: 38px;
}
.page-top .top-lt{
float: left;
}
.page-top .top-lt a{
/* 不将后一元素挤下去并且使内部div位于下载APP下方 */
display: inline-block;
}
.page-top .top-lt span{
color: #424242;
padding: 0 3px;
}
.page-top .top-lt a:hover{
color:#fff;
}
.page-top .top-lt .download{
position: relative;
}
.page-top .top-lt .down-box{
width: 126px;
background-color: #fff;
position: absolute;
/* 调整高度 */
left: 50%;
top: 38px;
margin-left: -63px;
padding-top: 20px;
box-shadow: 0px 1px 5px #aaa;
display: none;
z-index: 20;
}
.page-top .top-lt .down-box img{
width: 88px;
height: 88px;
display: block;
margin: 0 auto;
}
.page-top .top-lt .down-box b{
width: 20px;
height: 13px;
position: absolute;
background-image: url(../img/sjx.png);
left: 50%;
margin-left: -10px;
top: -13px;
}
.page-top .top-lt a.download i{
display: block;
text-align: center;
color: #333;
font-size: 14px;
}
.page-top .top-lt a.download:hover .down-box{
display: block;
}
.page-top .top-lt a.download:hover i{
color: #323232;
}
.page-top .top-rt{
float: right;
}
.page-top .top-rt .login{
float: left;
margin-right: 20px;
}
.page-top .top-rt span{
color: #424242;
padding: 0 5px;
}
.page-top .userinfo{
float: left;
}
.page-top .userinfo .link:hover{
color: #fff;
}
.page-top .userinfo .user{
position: relative;
width: 120px;
display: inline-block;
margin-right: -20px;
}
.page-top .userinfo .user .tit{
display: block;
text-align: center;
position: relative;
z-index: 1000;
}
.page-top .userinfo .user ul{
position: absolute;
padding: 7px 0;
left: 0;
top: 38px;
width: 120px;
box-shadow: 0px 2px 10px rgba(0,0,0,0.15);
display: none;
}
.page-top .userinfo li{
line-height: 30px;
text-align: center;
}
.page-top .userinfo li a{
display: block;
color: #424242
}
.page-top .userinfo li :hover{
color: #ff6700;
background-color: #f5f5f5;
}
.page-top .userinfo .user:hover{
background-color: #fff;
}
.page-top .userinfo .user:hover .tit{
color: #ff6700;
}
.page-top .userinfo .user:hover ul{
display: block;
}
.page-top .top-rt .car-box{
float: right;
}
.page-top .car-box .tit{
margin-left: 30px;
width: 118px;
height: 38px;
background-color: #ff6700;
color: #fff;
display: block;
text-align: center;
line-height: 38px;
}
.page-top .car-box .tit span{
color: #fff;
margin-left: -10px;
}
.page-top .car-box .pop{
width: 316px;
top: 38px;
right: 307px;
position: absolute;
padding-top: 20px;
box-shadow: 0px 2px 10px rgba(0,0,0,0.15);
display: none;
background-color: #fff;
z-index: 100;
max-height: 450px;
overflow-y: scroll;
}
.page-top .car-box .no-good{
text-align: center;
font-size: 13px;
}
.page-top .pop .list li{
display: block;
width: 275px;
height: 60px;
margin: 0 auto;
padding: 10px 0;
border-bottom: 1px solid #e0e0e0;
}
.page-top .pop .list .last{
border-bottom: none;
}
.page-top .pop .list .pic{
width: 60px;
height: 60px;
float: left;
}
.page-top .pop .list .txt{
display: block;
width: 95px;
height: 40px;
padding: 10px 0;
margin-left: 15px;
float: left;
color: #424242;
}
.page-top .pop .list i{
float: right;
font-size: 15px;
width: 25px;
height: 25px;
margin: 15px 0;
text-align: center;
display: none;
cursor: pointer;
color: rgb(176,176,181);
}
.page-top .pop .list .num{
display: inline-block;
position: relative;
width: 60px;
height: 30px;
margin-top: -10px;
padding-top:10px;
padding-left: 20px;
}
.page-top .car-box:hover .tit{
background-color: #fff;
color: #ff6700;
}
.page-top .car-box:hover .tit span{
color: #ff6700;
}
.page-top .car-box:hover .pop{
display: block;
}
.page-top .list li:hover i{
display: block;
}
.page-top .list .txt:hover{
color: #ff6700;
}
.page-top .list i:hover{
color: black;
}
.page-top .car-box .total{
background-color: #fafafa;
height: 75px;
}
.page-top .car-box .sum{
width: 275px;
height: 40px;
padding-top: 18px;
margin-left: 15px;
overflow: hidden;
}
.page-top .car-box .price{
float: left;
width: 134px;
}
.page-top .car-box .price p{
height: 15px;
margin-top: -10px;
font-size: 13px;
color: #7e7e7e;
}
.page-top .car-box .price .totalprice{
height: 25px;
font-size: 20px;
color: rgb(255,103,0);
margin-top: 5px;
}
.page-top .car-box .atn{
float: right;
width: 130px;
background-color: rgb(255,103,0);
color: #fff;
text-align: center;
font-size: 13px;
}
/* 导航样式 */
.page-nav{
position: relative;
}
.page-nav .container{
height: 100px;
}
.page-nav .logo{
width: 54px;
height: 54px;
float: left;
background: url(../img/logo.jpg) center center no-repeat;
background-size: contain;
margin-top: 23px;
margin-right: 45px;
}
.page-nav .nav .nav-item
{
float: left;
line-height: 100px;
}
.page-nav .nav .tit{
font-size: 16px;
color: #333;
padding: 26px 10px 38px;
}
.page-nav .nav .tit:hover{
color: #ff6700;
}
.page-nav .nav-item .pop{
position: absolute;
height: 250px;
width: 100%;
left: 0;
border: 1px solid #e0e0e0;
box-shadow: 0px .3px .4px rgba(0,0,0,.18);
background-color: #fff;
display: none;
z-index: 1000;
}
.page-nav .nav-item .pop .container{
overflow: hidden;
height: 220px;
padding-bottom: 30px;
}
.page-nav .nav-item .pop .item{
position: relative;
display: inline-block;
width: 200px;
height: 220px;
text-align: center;
}
.page-nav .nav-item .pop span{
top: -10px;
font-size: 12px;
color: #ff6700;
height: 18px;
padding: 1px 20px;
border: 1px solid #ff6700;
}
.page-nav .nav-item .pop img{
margin-top: 10px;
width: 160px;
height: 110px;
}
.page-nav .nav-item .pop h3{
color: #333;
line-height: 20px;
}
.page-nav .nav-item .pop p{
color: #ff6700;
line-height: 20px;
}
.page-nav .nav-item .pop i{
float: right;
height: 110px;
width: 1px;
background-color: rgb(224,224,224);
z-index: 1000;
margin-top: -160px;
right: 0;
}
.page-nav .nav .nav-item:hover .pop{
display: block;
}
/* 全部分类菜单样式 */
#page-all-nav{
visibility: hidden;
position: relative;
}
.page-nav .slider-nav{
display: block;
position: absolute;
z-index: 1000;
left: -100px;
top: 101px;
width: 234px;
height: 460px;
font-size: 14px;
background-color: #fff;
border: 1px solid #ff6700;
}
.page-nav .slider-nav .slider-ul{
height: 420px;
width:100%;
padding: 20px 0;
}
.page-nav .slider-nav .slider-li{
display: block;
padding-left: 30px;
height: 42px;
line-height: 42px;
}
.page-nav .slider-nav .slider-li .name{
display: block;
}
.page-nav .slider-nav .slider-li span{
color: black;
}
.page-nav .slider-nav .slider-li .iconfont{
font-size: 14px;
float: right;
margin-right: 20px;
}
.page-nav .slider-nav .slider-li .slider-pop{
position: absolute;
border: 1px solid #e0e0e0;
border-left: none;
background-color: #fff;
height: 460px;
width: 990px;
top: 0px;
left: 235px;
z-index: 0;
box-shadow: 0px 8px 16px rgba(0,0,0,0.18);
display: none;
overflow: hidden;
}
.page-nav .slider-li .pop-li{
float: left;
padding: 18px 20px;
width: 206px;
line-height: 40px;
color: #333;
transition: color .2s;
}
.page-nav .slider-li .pop-li img{
float: left;
display: block;
margin-right: 12px;
width: 40px;
height: 40px;
}
.page-nav .slider-li .pop-li:hover{
color: #ff6700;
}
.page-nav .slider-nav .slider-li:hover{
background-color: #ff6700;
}
.page-nav .slider-nav .slider-li:hover span{
color: #fff;
}
.page-nav .slider-nav .slider-li:hover .slider-pop{
display: block;
}
/* 搜索 */
.page-nav .search{
float: right;
width: 296px;
margin-top: 25px;
}
.page-nav .search form{
position: relative;
width: 296px;
height: 50px;
z-index: 20;
}
.page-nav .search .active .btn{
border: 1px solid #ff6700;
}
.page-nav .search .active input{
border: 1px solid #ff6700;
border-right: none;
}
.page-nav .search .p{
position: absolute;
top: 0px;
width: 223px;
height: 48px;
padding: 0 10px;
font-size: 14px;
border: 1px solid #e0e0e0;
border-right: none;
outline: 0;
z-index: 1;
transition: all .2s;
}
.page-nav .search span{
position: absolute;
background-color: #eee;
line-height: 20px;
top: 16px;
color: #757575;
display: inline-block;
margin-left: 5px;
padding: 0 5px;
font-size: 12px;
transition: all .2s;
z-index: 30;
cursor: pointer;
}
.page-nav .search .tage2{
right: 65px;
}
.page-nav .search .tage1{
right: 130px;
}
.page-nav .search .btn{
position: absolute;
right: 0;
z-index: 2;
width: 52px;
height: 48px;
line-height: 24px;
border: 1px solid #e0e0e0;
transition: all .2s;
cursor: pointer;
}
.page-nav .search .btn i{
display: block;
color: #ff6700;
font-size: 24px;
padding-top:12px;
text-align: center;
color: #616161;
font-weight: bold;
}
.page-nav .search form:hover input{
border-color: #b0b0b0;
}
.page-nav .search form:hover .btn{
border-color: #b0b0b0;
}
.page-nav .search span:hover{
background-color: #ff6700;
color: #fff;
}
.page-nav .search .btn:hover{
background-color: #ff6700;
}
.page-nav .search .btn:hover i{
color: #fff;
}
.page-nav .search .hot{
position: absolute;
left: 0px;
z-index: 1000;
width: 241px;
background-color: #fff;
border: 1px solid #ff6700;
border-top: none;
display: none;
}
.page-nav .search .hot a{
position: relative;
display: block;
padding: 6px 15px;
font-size: 12px;
color: #424242;
line-height: 20px;
}
.page-nav .search .hot a:hover{
background-color: #e0e0e0;
}
1921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
