小米官网页面
效果图
菜单栏显示
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<!-- 导航栏 -->
<div class="topBar">
<div class="container1">
<div class="topBar-nav">
<a href="">小米商城</a>
<span class="sep">|</span>
<a href="">MIUI</a>
<span class="sep">|</span>
<a href="">loT</a>
<span class="sep">|</span>
<a href="">云服务</a>
<span class="sep">|</span>
<a href="">金融</a>
<span class="sep">|</span>
<a href="">有品</a>
<span class="sep">|</span>
<a href="">小爱开放平台</a>
<span class="sep">|</span>
<a href="">政企服务</a>
<span class="sep">|</span>
<a href="">下载app</a>
<span class="sep">|</span>
<a href="">select Region</a>
</div>
<div class="topbar-cart">
<a href="">
<i class="fa fa-shopping-cart"></i>
购物车
<span>(0)</span>
</a>
<div class="topbar-cart-menu">
<div class="topbar-cart-txt">
<span>购物车中还没有商品，赶紧选购吧！</span>
</div>
</div>
</div>
<div class="user-info">
<a href="">登陆</a>
<span class="sep">|</span>
<a href="">注册</a>
<span class="sep">|</span>
<a href="">消息通知</a>
</div>
</div>
</div>
<!-- logo -->
<div class="header">
<div class="container2">
<div class="logo">
<img src="img/mi-logo.png" alt="LOGO">
</div>
<!--导航菜单栏-->
<div class="nav">
<div class="sub-nav">
<a href="">小米手机 </a>
<a href="">红米 </a>
<a href="">电视 </a>
<a href="">笔记本 </a>
<a href="">空调 </a>
<a href="">新品 </a>
<a href="">路由器 </a>
<a href="">智能硬件 </a>
<a href="">服务 </a>
<a href="">社区 </a>
</div>
</div>
<!--搜索部分-->
<div class="search">
<input type="text" name="goods" value="请输入商品名:  " id="s1">
<input type="submit" name="submit" value="搜索" id="s2">
</div>
</div>
</div>
<!--菜单栏显示-->
<div id="big_banner_wrap">
<ul id="banner_menu_wrap">
<li class="active" img>
<a>手机 平板</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 600px; top: -20px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/minote.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/mi4.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/hongmi2.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/hongmi2a.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/note2.jpg"></a><a>手机</a><span>选购</span></li>
<li>
<a><img src="img/note2.jpg"></a><a>手机<a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/mipad.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/telcom.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/heyue.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/zhongxin.jpg"></a><a>手机</a></li>
<li>
<a><img src="img/compare.jpg"></a><a>手机</a></li>
</ul>
</div>
</li>
<li>
<a>电视 盒子</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 600px; top: -62px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/tv40.jpg"></a><a>大米电视40英寸</a></li>
<li>
<a><img src="img/tv48.jpg"></a><a>大米电视48英寸</a></li>
<li>
<a><img src="img/tv49.jpg"></a><a>大米电视49英寸</a></li>
<li>
<a><img src="img/hezis.jpg"></a><a>大米电视55英寸</a></li>
<li>
<a><img src="img/hezis.jpg"></a><a>大米盒子</a></li>
<li>
<a><img src="img/hezis.jpg"></a><a>大米盒子MINI</a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/dianshipeijian.jpg"></a><a>大米电视配件</a><span>选购</span></li>
</ul>
</div>
</li>
<li>
<a>路由器 智能配件</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 900px; top: -104px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/miwifi.jpg"></a><a>大米路由器</a></li>
<li>
<a><img src="img/miwifilite.jpg"></a><a>大米路由器 青春版</a></li>
<li>
<a><img src="img/air.jpg"></a><a>净化器</a></li>
<li>
<a><img src="img/xiaoyi.jpg"></a><a>摄像机</a></li>
<li>
<a><img src="img/scale.jpg"></a><a>体重称</a></li>
<li>
<a><img src="img/scale.jpg"></a><a>智能插头</a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/miwifimini.jpg"></a><a>大米路由器MINI</a></li>
<li>
<a><img src="img/wifiExtension.jpg"></a><a>大米WIFI放大器</a></li>
<li>
<a><img src="img/yicamera.jpg"></a><a>运动相机</a></li>
<li>
<a><img src="img/water.jpg"></a><a>净水器</a></li>
<li>
<a><img src="img/ihealth.jpg"></a><a>血压计</a></li>
<li>
<a><img src="img/ihealth.jpg"></a><a>床头灯</a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/zhinengtaozhuang.jpg"></a><a>智能家庭套装</a></li>
<li>
<a><img src="img/shouhuan.jpg"></a><a>大米手环</a></li>
<li>
<a><img src="img/smart.jpg"></a><a>全部智能硬件</a></li>
</ul>
</div>
</li>
<li>
<a>移动电源 插线板</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -146px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/dianyuan.jpg "></a><a>大米移动电源</a></li>
<li>
<a><img src="img/powerscript.jpg"></a><a>大米插线板</a></li>
<li>
<a><img src="img/yidongdianyuan.jpg"></a><a>品牌移动电源</a></li>
<li>
<a><img src="img/dianyuanfujian.jpg"></a><a>移动电源附件</a></li>
</ul>
</div>
</li>
<li>
<a>耳机 音箱</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -188px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/headphone.jpg"></a><a>大米头戴式耳机</a></li>
<li>
<a><img src="img/huosai.jpg"></a><a>大米活塞耳机</a></li>
<li>
<a><img src="img/bluetoothheadset.jpg"></a><a>大米蓝牙耳机</a></li>
<li>
<a><img src="img/erji.jpg"></a><a>品牌耳机</a></li>
<li>
<a><img src="img/yinxiang.jpg"></a><a>音箱</a></li>
</ul>
</div>
</li>
<li>
<a>电池 存储卡</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -230px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/dianchi.jpg"></a><a>电池</a></li>
<li>
<a><img src="img/chongdian.jpg"></a><a>充电器</a></li>
<li>
<a><img src="img/xiancai.jpg"></a><a>线材</a></li>
<li>
<a><img src="img/cunchu.jpg"></a><a>存储卡</a></li>
</ul>
</div>
</li>
<li>
<a>保护套 后盖</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -272px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/baohu.jpg"></a><a>保护套/保护壳</a></li>
<li>
<a><img src="img/hougai.jpg"></a><a>后盖</a></li>
</ul>
</div>
</li>
<li>
<a>贴膜 其它配件</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 600px; top: -314px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/tiemo.jpg"></a><a>贴膜</a></li>
<li>
<a><img src="img/zipaigan.jpg"></a><a>自拍杆</a></li>
<li>
<a><img src="img/zipaigan.jpg"></a><a>蓝牙手柄</a></li>
<li>
<a><img src="img/tizhi.jpg"></a><a>贴纸</a></li>
<li>
<a><img src="img/fangchensai.jpg"></a><a>防尘塞</a></li>
<li>
<a><img src="img/fangchensai.jpg"></a><a>手机支架</a></li>
</ul>
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/raoxian.jpg"></a><a>耳机绕线器</a></li>
<li>
<a><img src="img/wifi.jpg"></a><a>随身WIFI</a></li>
</ul>
</div>
</li>
<li>
<a>米兔 服装</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -356px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/mitu.jpg"></a><a>米兔</a></li>
<li>
<a><img src="img/fuzhuang.jpg"></a><a>服装</a></li>
</ul>
</div>
</li>
<li>
<a>背包 其它周边</a>
<a class="banner_menu_i">></a>
<div class="banner_menu_content" style="width: 300px; top: -398px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="img/bag.jpg"></a><a>背包</a></li>
<li>
<a><img src="img/shubiaodian.jpg"></a><a>大米鼠标坠</a></li>
<li>
<a><img src="img/zhoubian.jpg"></a><a>生活周边</a></li>
<li>
<a><img src="img/wan.jpg"></a><a>玩酷产品</a></li>
</ul>
</div>
</li>
</ul>
<!--菜单栏显示----------------------------------------->
<!--轮播图-->
<div id="big_banner_pic_wrap">
<ul id="big_banner_pic">
<li><img src="img/qita.jpg" width="1226px"></li>
<li><img src="img/xiaomi.jpg" width="1226px"></li>
<li><img src="img/lunbo.jpg" width="1226px"></li>
<li><img src="img/pric.jpg" width="1226px"></li>
<li><img src="img/T1RICjB7DT1RXrhCrK.jpg"></li>
</ul>
</div>
<div id="big_banner_change_wrap">
<div id="big_banner_change_prev"><</div>
<div id="big_banner_change_next">></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/script.js"></script>
<!--轮播图-------------------------------------------------------->
<!-- 选购部分 -->
<div class="shop">
<!--选购导航-->
<div class="channel">
<ul>
<li><a href="">选购手机</a></li>
<li><a href="">企业团购</a></li>
<li><a href="">F码通道</a></li>
<li><a href="">米粉卡</a></li>
<li><a href="">以旧换新</a></li>
<li><a href="">话费充值</a></li>
</ul>
</div>
<!--商品-->
<div class="advertise">
<ul>
<li>
<a href="">
<img src="img/xiaomicc9.jpg" alt="" width="316px" height="170px">
</a>
</li>
<li>
<a href="">
<img src="img/xiaomi9.jpg" alt="" width="316px" height="170px">
</a>
</li>
<li>
<a href="">
<img src="img/xiaomicc9.jpg" alt="" width="316px" height="170px">
</a>
</li>
</ul>
</div>
</div>
<!-- shangou -->
<div class="shangou w">
<!-- 上部分 -->
<div class="sg-hd">
<h4>小米闪购</h4>
<img src= >
</div>
<!-- 下部分 -->
<div class="sg-bd clearfix">
<ul>
<li><img src="img/miaosha.PNG" class="special" height="350"></li>
<li>
<a href="#" >
<img src="img/13.jpg" >
<h4>MIJOY 抽纸青春版 24包/箱 </h4>
<p>精选原生竹浆，健康环保</p>
<span><em>1 元</em> <del>19.9元</del></span>
</a>
</li>
<li>
<a href="#">
<img src="img/yinxiang1.jpg" >
<h4>小米小爱触屏音箱 白色</h4>
<p>好听，更好看</p>
<span><em>299元 元</em>
</a>
</li>
<li>
<a href="#">
<img src="img/yinxiang1.jpg" >
<h4>小米小爱触屏音箱 白色</h4>
<p>好听，更好看</p>
<span><em>449元 元</em>
</a>
</li>
<li>
<a href="#">
<img src="img/chazuo1.jpg" >
<h4>小米插线板 (含3口USB)</h4>
<p>3个USB充电口,支持快充</p>
<span><em>44 元</em> <del>49元</del></span>
</a>
</li>
</ul>
</div>
</div>
<!-- ads -->
<div class="ads w">
<a href="#"><img src="img/16.webp"></a>
</div>
<!-- page-main -->
<div class="page-main ">
<!-- phone -->
<div class="phone w">
<!-- 上部分 -->
<div class="pho-hd">
<h4>手机</h4>
<a href="#">查看全部></a>
</div>
<!-- 下部分 -->
<div class="pho-bd">
<div class="pho-bd-le">
<a href="#"><img src="img/17.webp"></a>
</div>
<div class="pho-bd-ri">
<ul>
<li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
<div class="jian50">
减 50 元
</div>
</li>
<li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
<li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
<div class="jian50">
减 50 元
</div>
</li>
<li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
<div class="jian50">
减 50 元
</div>
</li>
<li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li><li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
<li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
<li>
<a href="#" >
<img src="img/shuoji2.jpg">
<h4>红米6A</h4>
<p>AI人脸解锁,小巧全面屏,高性能</p>
<span><em>549元</em> <del>599元</del></span>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- ads -->
<div class="ads w">
<a href="#"><img src="img/14.webp" ></a>
</div>
<!-- jiadain -->
<div class="jiadian w clearfix">
<!-- 上部分 -->
<div class="jia-hd ">
<h4>家电</h4>
<ul>
<li><a href="#">热门</a></li>
<li><a href="#">电视影音</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">家居</a></li>
</ul>
</div>
<div class="jia-bd clearfix">
<ul>
<li><a href="#"><img src="img/18.webp" ></a></li>
<li><a href="#"><img src="img/20.PNG" ></a></li>
<li><a href="#"><img src="img/20.PNG"></a></li>
<li><a href="#"><img src="img/20.PNG" ></a></li>
<li><a href="#"><img src="img/20.PNG" ></a></li>
<li><a href="#"><img src="img/19.webp" ></a></li>
<li><a href="#"><img src="img/20.PNG" ></a></li>
<li><a href="#"><img src="img/20.PNG" ></a></li>
<li><a href="#"><img src="img/20.PNG"></a></li>
<li><a href="#"><img src="img/20.PNG" ></a></li>
</ul>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<!-- weixiu -->
<div class="weixiu w">
<ul>
<li><a href="#">预约维修服务</a><span class="seu">|</span></li>
<li><a href="#">7天无理由退货</a><span class="seu">|</span></li>
<li><a href="#">15天免费换货</a><span class="seu">|</span></li>
<li><a href="#">满150包邮</a><span class="seu">|</span></li>
<li><a href="#">520余家售后网点</a></li>
</ul>
</div>
<!-- fuwu -->
<div class="fuwu w">
<div class="fu-le">
<dl>
<dt><a href="#">帮助中心</a></dt>
<dd><a href="#">账户管理</a></dd>
<dd><a href="#">购物指南</a></dd>
<dd><a href="#">订单操作</a></dd>
</dl>
<dl>
<dt><a href="#">服务支持</a></dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">自助服务</a></dd>
<dd><a href="#">相关下载</a></dd>
</dl>
<dl>
<dt><a href="#">线下门店</a></dt>
<dd><a href="#">小米之家</a></dd>
<dd><a href="#">服务网点</a></dd>
<dd><a href="#">授权体验店</a></dd>
</dl>
<dl>
<dt><a href="#">关于小米</a></dt>
<dd><a href="#">了解小米</a></dd>
<dd><a href="#">加入小米</a></dd>
<dd><a href="#">投资者关系</a></dd>
</dl>
<dl>
<dt><a href="#">关注我们</a></dt>
<dd><a href="#">新浪微博</a></dd>
<dd><a href="#">官方微信</a></dd>
<dd><a href="#">联系我们</a></dd>
</dl>
<dl>
<dt><a href="#">特色服务</a></dt>
<dd><a href="#">F码通道</a></dd>
<dd><a href="#">礼物码</a></dd>
<dd><a href="#">防伪查询</a></dd>
</dl>
</div>
<div class="fu-ri">
<h4>400-100-5678</h4>
<p>周一至周日 8:00-18:00 </p>
<p>(仅收市话费)</p>
<a href="#">联系客服</a>
</div>
</div>
<!-- copyright -->
<div class="copyright w">
<div class="logo"></div>
<div class="co-nav">
<a href="#">小米商城</a><span>|</span>
<a href="#">MIUI</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 href="#">小米天猫店</a><span>|</span>
<a href="#">隐私政策</a><span>|</span>
<a href="#">问题反馈</a><span>|</span>
<a href="#">廉政举报</a><span>|</span>
<a href="#">Select Region</a><br>
<p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 <br>
违法和不良信息举报电话: 185-0130-1238, 本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
</div>
<div class="co-img">
<img src="img/21.png" >
<img src="img/v-logo-1.png" >
<img src="img/v-logo-2.png" >
<img src="img/23.png" >
</div>
</div>
<!-- end -->
<div class="xiaomi w">
<h4>探索黑科技,小米为发烧而生! </h4>
</div>
</div>
</body>
</html>
CSS部分
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
outline: none;
list-style:none;
text-decoration: none;
border: none;
}
body {
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
.w {
width: 1226px;
margin: 0 auto;
}
/*广告栏*/
.sep {
width: 3.22px;
font: 16px/40px "Microsoft YaHei";
color: #424242;
margin: auto 6px;
}
/*导航栏*/
.topBar {
height: 40px;
background: #333;
}
.container1 {
width: 1226px;
height: 40px;
margin: 0 auto;
}
.topBar-nav {
width: 750px;
height: 40px;
float: left;
text-align: center;
}
.topBar-nav a {
font-size: 14px;
font-weight: border;
color: #b0b0b0;
text-decoration: none;
}
.topBar-nav a:hover {
color: #fff;
}
/*购物车*/
.topbar-cart {
width: 100px;
float: right;
font: normal 12px/40px 'Arial';
background-color: #424242;
/*辅助 topbar-cart-menu布局*/
position: relative;
}
.topbar-cart:hover {
background-color: #fff;
}
.topbar-cart a {
display: block;
line-height: 35px;
color: #b0b0b0;
}
.topbar-cart:hover a {
color: #ff6700;
}
.topbar-cart i {
font-size: 20px;
margin: 0 5px 0 20px;
}
/*控制位置层*/
.topbar-cart-menu {
width: 316px;
/*相对于cart进行布局*/
position: absolute;
top: 40px;
right: 0;
/*显示的等级*/
z-index: 10;
}
/*控制高度（过渡效果）层*/
.topbar-cart-txt {
/*height: 100px；*/
background-color: #fff;
text-align: center;
line-height: 100px;
box-shadow: 0 3px 5px -3px rgba(0, 0, 0, 0.7);
/*没有高度，作为清浮动操作*/
/*存在高度，overflow只隐藏超出高度*/
height: 0;
overflow: hidden;
/*设置过渡动画*/
transition: .1s;
}
.topbar-cart:hover .topbar-cart-txt {
height: 100px;
}
/*登录注册*/
.user-info {
width: 200px;
height: 40px;
float: right;
margin-right: 15px;
}
.user-info a {
font-size: 14px;
font-weight: border;
color: #b0b0b0;
text-decoration: none;
}
.user-info a:hover {
color: #fff;
}
/*---导航栏结束----*/
.head {
width: 100%;
height: 110px;
}
.container2 {
width: 1226px;
height: 110px;
margin: 0 auto;
}
/*--logo--*/
.logo {
margin-top: 20px;
margin-right: 24px;
width: 55px;
height: 55px;
float: left;
}
/*--logo结束--*/
/*导航菜单栏*/
.nav {
width: 820px;
height: 110px;
float: left;
}
.sub-nav {
width: 580px;
height: 30px;
margin: 40px auto 40px;
}
.sub-nav a {
font-size: 17px;
font-weight: border;
color: black;
text-decoration: none;
text-align: center;
}
.sub-nav a:hover {
color: #ff6700;
}
/*--导航菜单栏结束--*/
/*搜索部分*/
.search {
margin-top: 25px;
width: 300px;
height: 50px;
float: right;
}
.search #s1 {
width: 240px;
height: 50px;
text-align: right;
border: 1px solid black;
}
.search #s2 {
width: 50px;
height: 50px;
}
/*搜索部分结束*/
#big_banner_wrap {
width:1226px;
height:460px;
margin:0 auto;
position:relative;
color:#424242;
}
#big_banner_wrap #banner_menu_wrap {
width:235px;
height:100%;
float:left;
position:absolute;
background:rgba(0, 0, 0, 0.8);
z-index:600;
}
#big_banner_wrap #banner_menu_wrap .active {margin-top:20px; }
#big_banner_wrap #banner_menu_wrap li {
width:100%;
height:42px;
position:relative;
transition:all 3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
line-height:40px;
cursor:pointer;
}
#big_banner_wrap #banner_menu_wrap li a {
font-size:13px;
color:#ffffff;
margin-left:30px;
float:left;
text-decoration:none;
}
#big_banner_wrap #banner_menu_wrap li .banner_menu_i {
float:right;
font-size:20px;
margin-right:20px;
}
#big_banner_wrap #banner_menu_wrap li .banner_menu_content {
width:600px;
height:459px;
display:none;
z-index:610;
position:absolute;
left:235px;
background:#fff;
}
#big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul {
float:left;
width:280px;
}
#big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li {
width:250px;
height:40px;
padding:18px;
float:left;
}
#big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li a {
color:#424242;
margin-left:5px;
font-size:12px;
}
#big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li span {
width:59px;
height:25px;
float:right;
margin-top:5px;
border:1px solid #ff6700;
color:#FF6700;
font-size:13px;
line-height:24px;
text-align:center;
transition:all 3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
}
#big_banner_wrap #banner_menu_wrap li .banner_menu_content .banner_menu_content_ul li span:hover {
background:#ff6700;
color:#ffffff;
}
/*----------------------caidanlan*/
/*轮播图*/
#big_banner_wrap #big_banner_pic_wrap {
width:1226px;
height:460px;
overflow:hidden;
position:relative;
}
#big_banner_wrap #big_banner_pic_wrap #big_banner_pic {
width:6130px;
height:460px;
position:absolute;
float:left;
}
#big_banner_wrap #big_banner_pic_wrap #big_banner_pic li {
width:1226px;
height:460px;
float:left;
cursor:pointer;
}
#big_banner_wrap #big_banner_change_wrap {
width:961px;
height:460px;
position:absolute;
top:0px;
left:250px;
color:#ffffff;
}
#big_banner_wrap #big_banner_change_wrap div {
display:none;
transition:all 3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
}
#big_banner_wrap #big_banner_change_wrap div:hover {
background:#333333;
cursor:pointer;
color:#FF6700;
}
#big_banner_wrap #big_banner_change_wrap #big_banner_change_prev {
width:50px;
height:50px;
line-height:50px;
float:left;
margin-top:205px;
font-size:50px;
text-align:center;
}
#big_banner_wrap #big_banner_change_wrap #big_banner_change_next {
width:50px;
height:50px;
line-height:50px;
float:right;
margin-top:205px;
font-size:50px;
text-align:center;
}
/*-------lunbo-----------------*/
/*选购*/
.shop {
width: 1226px;
height: 170px;
margin: 0 auto 30px;
margin-top: 20px;
}
/*选购导航*/
.channel {
width: 225px;
height: 170px;
float: left;
}
.channel ul li {
background-color: #5f5750;
width: 75px;
height: 85px;
font: 12px/85px "Microsoft YaHei";
text-align: center;
float: left;
}
.channel ul li a {
display: block;
width: 75px;
height: 85px;
color: #B0B0B0;
text-decoration: none;
}
.channel ul li a:hover {
display: block;
width: 75px;
height: 85px;
color: white;
}
/*--选购导航结束--*/
/*商品*/
.advertise {
float: left;
width: 992px;
height: 170px;
}
.advertise ul li {
width: 316px;
height: 170px;
float: right;
margin-left: 14px;
}
.advertise ul li a {
width: 316px;
height: 170px;
}
.advertise ul li a:hover {
/*上移，变大*/
transform: translateY(-2px) scale(4.02);
/*阴影*/
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.7);
}
/*--商品--*/
/*选购部分*/
.tag {
width: 1226px;
height: 40px;
margin: 0 auto;
}
/*---------------------------------goods*/
.goods {
height: 170px;
padding: 14px 0 44px 0;
}
.goods li {
float: left;
width: 316px;
height: 170px;
margin-left: 14px;
}
.goods li:first-child {
width: 234px;
margin-left: 0;
}
/*----------------------------------------------*/
/*--------------------------shangou*/
.shangou {
height: 380px;
}
.sg-hd {
height: 40px;
list-style: 40px;
}
.sg-hd h4 {
float: left;
font-size: 22px;
font-weight: 200;
}
.sg-hd img {
float: right;
}
.sg-bd li {
float: left;
height: 339px;
width: 234px;
border-top: 1px solid;
margin-right: 14px;
text-align: center;
}
.sg-bd li:first-child {
border-color: #E53935;
}
.sg-bd li:nth-child(2) {
border-color: #FFAC13;
}
.sg-bd li:nth-child(3) {
border-color: #83C44E;
}
.sg-bd li:nth-child(4) {
border-color: #2196F3;
}
.sg-bd li:last-child {
border-color: #E53935;
margin-right: 0;
}
.sg-bd li img {
display: inline-block;
padding-top: 20px;
}
.special {
padding-top: 0!important;
}
.sg-bd li h4 {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #202020;
}
.sg-bd li p {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
color: #ADADBD;
}
.sg-bd li span {
display: inline-block;
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #ADADBD;
}
.sg-bd li em {
font-style: normal;
color: #FA6553;
}
.sg-bd li del {
text-decoration: line-through;
}
/*----------------------------------------*/
/*----------------------------------ads*/
.ads a {
display: block;
height: 120px;
margin: 42px auto;
}
/*-------------------------------------*/
/*page-main*/
.page-main {
width: 100%;
background-color: #F5F5F5;
}
/*---------------------------------phone*/
.phone {
height: 674px;
}
.pho-hd {
height: 22px;
padding:19px 0;
line-height: 22px;
}
.pho-hd h4 {
float: left;
font-size: 22px;
color: #333333;
font-weight: 200;
}
.pho-hd a {
float: right;
font-size: 14px;
color: #333;
}
.pho-hd a:hover {
color: #ff6700;
}
.pho-bd-le {
float: left;
}
.pho-bd-ri {
float: right;
width: 992px;
height: 614px;
}
.pho-bd-ri li {
position: relative;
float: left;
width: 234px;
height: 300px;
text-align: center;
margin: 0 0 14px 14px;
background-color: #fff;
}
.pho-bd-ri li:hover {
top: -2px;
left: 0;
box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
}
.pho-bd-ri li img {
padding-top: 20px;
}
.pho-bd-ri li h4 {
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #202020;
}
.pho-bd-ri li p {
margin-top: 10px;
font-size: 12px;
font-weight: 400;
color: #ADADBD;
}
.pho-bd-ri li span {
display: inline-block;
margin-top: 20px;
font-size: 14px;
font-weight: 400;
color: #ADADBD;
}
.pho-bd-ri li em {
font-style: normal;
color: #FA6553;
}
.pho-bd-ri li del {
text-decoration: line-through;
}
.jian50 {
position: absolute;
top: 0;
left: 117px;
margin-left: -32px;
width: 64px;
height: 20px;
line-height: 20px;
background: red;
font-size: 12px;
color: #fff;
}
/*-------------------------------------*/
/*---------------------------------jiadian*/
.jia-hd {
width: 1226px;
height: 22px;
padding:19px 0;
line-height: 22px;
}
.jia-hd h4 {
float: left;
font-size: 22px;
color: #333333;
font-weight: 200;
}
.jia-hd ul {
float: right;
}
.jia-hd li {
float: left;
padding: 0 16px;
height: 22px;
line-height: 22px;
}
.jia-hd li a {
font-size: 16px;
color: #424242;
}.jia-bd {
width: 1240px;
}
.jia-bd li {
float: left;
height: 300px;
width: 234px;
margin: 0 14px 14px 0;
}
/*----------------------------------------------*/
/*footer*/
.footer {
width: 100%;
background-color: #fff;
}
/*--------------------------------weixiu*/
.weixiu {
height: 79px;
border-bottom: 1px solid #E0E0E0;
}
.weixiu li {
float: left;
height: 79px;
line-height: 79px;
font-size: 16px;
}
.weixiu a {
float: left;
padding: 0 70px;
color: #616161;
}
.seu {
float: left;
color: #E0E0E0;
}
.weixiu a:hover {
color: #ff6700;
}
/*------------------------------------------*/
/*----------------------------------------fuwu*/
.fuwu {
height: 192px;
}
.fu-le {
float: left;
height: 192px;
width: 974px;
}
.fu-le dl {
float: left;
font-size: 12px;
}
.fu-le dt {
padding: 42px 104px 32px 0;
}
.fu-le dt a {
color: #424242;
}
.fu-le dd {
padding-bottom: 16px;
}
.fu-le dd a {
color: #757575;
}
.fu-le a:hover {
color: #ff6700;
}
.fu-ri {
text-align: center;
}
.fu-ri h4 {
padding: 42px 0 14px 0;
font-size: 18px;
color: #ff6700;
font-weight: 400;
}
.fu-ri p {
margin-bottom: 6px;
font-size: 12px;
color: #757575;
}
.fu-ri a {
display: inline-block;
margin-top: 20px;
height: 28px;
line-height: 28px;
width: 118px;
font-size: 14px;
color: #ff6700;
border: 1px solid #ff6700;
}
.fu-ri a:hover {
background-color: #ff6700;
color: #fff;
}
/*------------------------------------------------*/
/*------------------------------------------------copyright*/
.copyright {
height: 55px;
padding: 40px 10px 0 0;
}
.logo {
float: left;
width: 55px;
height: 65px;
background: url("../img/logo.png") no-repeat 0 0 ;
}
.co-nav {
float: left;
padding-left: 10px;
width: 688px;
height: 55px;
}
.co-nav a,
.co-nav span,
.co-nav p {
font-size: 12px;
}
.co-nav a,
.co-nav span {
color: #757575;
}
.co-nav p {
color: #B0B0B0;
}
.co-img {
height: 55px;
width: 538px;
}
.co-img img{
width: 83px;
height: 28px;
}
/*-----------------------------------------------*/
.xiaomi {
text-align: center;
height: 80px;
line-height: 80px;
}
.xiaomi h4 {
font-size: 18px;
font-weight: 400;
font-family: "楷体" ;
color: #BEBEBE;
}
Jquery部分
//菜单栏的显示
$("#banner_menu_wrap").children().hover(function(){
$(this).css("background","#ff6700");
$(this).children(".banner_menu_content").css("border","1px solid #F0F0F0").show();
},function(){
$(this).css("background","none");
$(this).children(".banner_menu_content").css("border","0px solid #F0F0F0").hide();
});
//轮播
$(function(){
var i=0;
var big_banner_pic = $("#big_banner_pic");
var allimg=$("#big_banner_pic li").length;
function img_change(){
var img_i=i*-1226+"px";
big_banner_pic.animate({opacity:".2"},100,function(){
big_banner_pic.css("left",img_i );
big_banner_pic.animate({
opacity: "1"
}, 100);
})
}
function automatic(){
i+=1;
if(i>=allimg){
i=0;
}
img_change();
}
change_self_time = setInterval(automatic, 5000);
//轮播上一张下一张图标控制
$("#big_banner_change_wrap").hover(function(){
clearInterval(change_self_time);
$("#big_banner_change_wrap").children().show();
},function(){
change_self_time = setInterval(automatic, 5000);
$("#big_banner_change_wrap").children().hide();
})
$("#big_banner_change_prev").click(function(){
i += 1;
if (i >= allimg) {
i = 0;
}
img_change();
})
$("#big_banner_change_next").click(function(){
i -= 1;
if (i <= 0) {
i = allimg - 1;
}
img_change();
})
})
最后
- 一定要加jq链接不然就不会显示，
- jq链接可以去官网下载也可以去菜鸟复制
2993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
