老师，为什么我的页脚没有按需加载出来呢？
因为问答区有字数限制，我可能分几个问题把代码全部上传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>慕淘网</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="nav-site">
<div class="container cf">
<ul class="fl cf">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛幕淘</a></li>
</ul>
<ul class="fr cf">
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
<a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-left">
<li class="dropdown-loading"></li>
<!--<li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
<li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
<li><a href="###" target="_blank" class="menu-item">体验中心</a></li>-->
</ul>
</li>
<li class="nav-site-service dropdown fl menu">
<a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition"></i></a>
<ul class="dropdown-layer dropdown-right">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- nav-site结束 -->
<div class="header">
<div class="container">
<h1 class="fl"><a href="./index.html" class="header-logo text-hidden fl">慕课网</a></h1>
<div id="header-search" class="search fl">
<form action="https://s.taobao.com/search" class="search-form">
<input type="text" name="q" class="search-inputbox fl" placeholder="请输入搜索的内容" autocomplete="off" />
<input type="submit" value="搜索" class="search-btn fl" />
</form>
<ul class="search-layer">
<!--<li class="search-layer-item text-ellipsis">111</li>
<li class="search-layer-item text-ellipsis">222</li>
<li class="search-layer-item text-ellipsis">333</li>-->
</ul>
</div>
<div class="cart fr">
</div>
</div>
</div><!-- header结束 -->
<div class="nav-main">
<div class="container">
<a href="###" target="_blank" class="link">数码城</a
><a href="###" target="_blank" class="link">天黑黑</a
><a href="###" target="_blank" class="link">团购</a
><a href="###" target="_blank" class="link">发现</a
><a href="###" target="_blank" class="link">二手特价</a
><a href="###" target="_blank" class="link">名品汇</a>
</div>
</div><!-- nav-main结束 -->
<div class="focus">
<div class="container">
<div id="focus-category" class="category fl">
<a href="###" target="_blank" class="category-title"><i class="icon"></i>商品分类</a>
<ul class="category-list">
<li class="dropdown" data-active="category" data-load="js/category-detail-1.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">家用电器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown category-active" data-active="category" data-load="js/category-detail-2.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">手机</a
>、<a href="###" target="_blank" class="dropdown-link">运营商</a
>、<a href="###" target="_blank" class="dropdown-link">数码</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-3.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">电脑</a
>、<a href="###" target="_blank" class="dropdown-link">办公</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-4.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">家居</a
>、<a href="###" target="_blank" class="dropdown-link">家具</a
>、<a href="###" target="_blank" class="dropdown-link">家装</a
>、<a href="###" target="_blank" class="dropdown-link">厨具</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-5.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">男装</a
>、<a href="###" target="_blank" class="dropdown-link">女装</a
>、<a href="###" target="_blank" class="dropdown-link">童装</a
>、<a href="###" target="_blank" class="dropdown-link">内衣</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-6.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">化妆</a
>、<a href="###" target="_blank" class="dropdown-link">清洁</a
>、<a href="###" target="_blank" class="dropdown-link">宠物</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-7.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">运动户外</a
>、<a href="###" target="_blank" class="dropdown-link">钟表</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-8.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">汽车</a
>、<a href="###" target="_blank" class="dropdown-link">汽车用品</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-9.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">母婴</a
>、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-10.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">食品</a
>、<a href="###" target="_blank" class="dropdown-link">酒类</a
>、<a href="###" target="_blank" class="dropdown-link">生鲜</a
>、<a href="###" target="_blank" class="dropdown-link">特产</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-11.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">医药保健</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-12.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">图书</a
>、<a href="###" target="_blank" class="dropdown-link">音像</a
>、<a href="###" target="_blank" class="dropdown-link">电子书</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-13.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">彩票</a
>、<a href="###" target="_blank" class="dropdown-link">旅行</a
>、<a href="###" target="_blank" class="dropdown-link">充值</a
>、<a href="###" target="_blank" class="dropdown-link">票务</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-14.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">理财</a
>、<a href="###" target="_blank" class="dropdown-link">众筹</a
>、<a href="###" target="_blank" class="dropdown-link">白条</a
>、<a href="###" target="_blank" class="dropdown-link">保险</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
</ul>
</div><!-- focus-category结束 -->
<div id="focus-slider" class="slider fl">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/2.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/3.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/4.png" alt="" class="slider-img"/></a>
</div>
</div>
<ol class="slider-indicator-wrap">
<li class="slider-indicator text-hidden fl">1</li>
<li class="slider-indicator text-hidden fl">2</li>
<li class="slider-indicator text-hidden fl">3</li>
<li class="slider-indicator text-hidden fl">4</li>
</ol>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div><!-- focus-slider结束 -->
<div class="focus-sidebar fr">
<div class="focus-news">
<div class="focus-news-head">
<h2 class="focus-news-title fl">慕快报</h2>
<a href="###" target="_blank" class="link fr">更多 ></a>
</div>
<div class="focus-news-body">
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
<p class="text-ellipsis">
<a href="###" target="_blank" class="link"><strong>[特惠]</strong>精选图书每满150减50</a>
</p>
</div>
</div><!-- focus-news结束 -->
<div class="focus-service cf">
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">机票</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
<a href="###" target="_blank" class="focus-service-item fl">
<i class="icon focus-service-icon"></i>
<span class="focus-service-text">话费</span>
</a>
</div><!-- focus-service结束 -->
<div class="focus-ad">
</div>
</div><!-- focus-sidebar结束 -->
</div><!-- container结束 -->
</div><!-- focus结束 -->
<div class="todays">
<div class="container">
<div id="todays-slider" class="slider">
<div class="slider-container">
<div class="slider-item">
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/1.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/2.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/3.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/4.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/5.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/6.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/7.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/8.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/9.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/10.png" alt="" class="slider-img"/></a>
</div>
<div class="slider-item">
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/11.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/1.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/2.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/3.png" alt="" class="slider-img"/></a>
<a href="###" target="_blank"><img src="img/todays-slider/loading.gif" data-src="img/todays-slider/4.png" alt="" class="slider-img"/></a>
</div>
</div>
<a href="javascript:;" class="slider-control slider-control-left"><</a>
<a href="javascript:;" class="slider-control slider-control-right">></a>
</div>
</div><!-- container结束 -->
</div><!-- todays结束 -->
<!-- floor-1 -->
<div class="floor">
<div class="container">
<img src="img/floor-loading.gif" alt="" />
</div>
</div>
<!-- floor2 -->
<div class="floor">
<div class="container">
<img src="img/floor-loading.gif" alt="" />
</div>
</div>
<!-- floor3 -->
<div class="floor">
<div class="container">
<img src="img/floor-loading.gif" alt="" />
</div>
</div>
<!-- floor4 -->
<div class="floor">
<div class="container">
<img src="img/floor-loading.gif" alt="" />
</div>
</div>
<!-- floor5 -->
<div class="floor floor-last">
<div class="container">
<img src="img/floor-loading.gif" alt="" />
</div>
</div>
<!-- elevator -->
<div id="elevator" class="elevator container">
<a href="javascript:;" class="elevator-item elevator-active">
<span class="elevator-num">F1</span>
<span class="elevator-text">服饰</span>
</a>
<a href="javascript:;" class="elevator-item ">
<span class="elevator-num">F2</span>
<span class="elevator-text">美妆</span>
</a>
<a href="javascript:;" class="elevator-item ">
<span class="elevator-num">F3</span>
<span class="elevator-text">手机</span>
</a>
<a href="javascript:;" class="elevator-item ">
<span class="elevator-num">F4</span>
<span class="elevator-text">家电</span>
</a>
<a href="javascript:;" class="elevator-item ">
<span class="elevator-num">F5</span>
<span class="elevator-text">数码</span>
</a>
</div>
<!-- friendLink -->
<div class="friendLink">
<div class="container">
<img src="img/linkloading.gif" />
</div>
</div><!-- friendLink结束 -->
<!-- footer -->
<div class="footer">
<div class="container">
<img src="img/linkloading.gif" />
</div>
</div><!-- footer结束 -->
<!-- toolbar -->
<div class="toolbar">
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">会员</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">购物车</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的关注</span>
</a>
<a href="javascript:;" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">我的消息</span>
</a>
<a href="javascript:;" id="backToTop" class="toolbar-item">
<i class="toolbar-icon icon"></i>
<span class="toolbar-text transition">顶部</span>
</a>
</div>
</body>
<!--<script src="js/jquery.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script>
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/search.js"></script>
<script src="js/move.js"></script>
<script src="js/slider.js"></script>
<script src="js/tab.js"></script>
<script src="js/index.js"></script>
</html>
/* 基于很多不同项目都可以通用的样式 */
/*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* 在本项目中的多个页面都通用的样式：公共样式和公共组件 */
/* 以后提取出来的模块或者是组件都是写在这个文件中 */
.container{
width: 1200px;
margin: 0 auto;
}
a.link{
color: #4d555d;
}
a.link:hover{
color: #f01414 !important;
}
.transition{
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
.text-hidden{ /* 文字的隐藏 */
text-indent: -9999px;
overflow: hidden;
}
.text-ellipsis{
text-overflow: ellipsis; /* 搜索内容过长时不换行，变成省略号 */
white-space: nowrap;
overflow: hidden;
}
/*showHide*/
.fadeOut{
visibility: hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* dropdown */
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
}
.dropdown-arrow{
display: inline-block;
/*background-repeat: no-repeat;*/
line-height: 1;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
z-index: 1;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
/*[class*="-active"].dropdown-arrow{
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}*/
.dropdown-loading{
width: 32px;
height: 32px;
background:url(../img/loading.gif) no-repeat;
margin: 20px;
}
/* icon */
@font-face {
font-family: "iconfont";
src: url('font/iconfont.eot?t=1477124206'); /* IE9*/
src: url('font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('font/iconfont.ttf?t=1477124206') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('font/iconfont.svg?t=1477124206#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family:"iconfont" !important;
font-size:14px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/* menu dropdown：剔除公共的，留下独有的 */
.menu{
z-index: 3;
}
.menu .dropdown-toggle{
display:block;
height: 100%;
padding: 0 13px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1ps solid #f3f5f7;
}
.menu .dropdown-arrow{
/*width: 8px;
height: 6px;*/
/*background-image:url(../img/dropdown-arrow.png);*/
margin-left: 5px;
}
.menu .dropdown-layer{
top: 43px;
background-color: #fff;
border: 1px solid #cdd0d4;
}
.menu-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.menu-item:hover{
background-color: #f3f5f7;
}
.menu-active .dropdown-toggle{
background-color: #FFFFFF;
border-color: #cdd0d4;
}
.menu-active .dropdown-arrow{
/*background-image:url(../img/dropdown-arrow-active.png);*/
}
.menu-active .dropdown-arrow{
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/* search组件的公共样式 */
.search{
position: relative;
border: 1px solid #cfd2d5;
}
.search-inputbox{
width: 585px;
height: 40px;
line-height: 40px;
padding: 0 10px;
border: none;
background-color: #FFFFFF;
}
.search-btn{
width: 73px;
height: 40px;
line-height: 40px;
background-color: #07111b;
border: none;
font-size: 14px;
color: #fff;
text-align: center;
cursor: pointer;
}
.search-layer{
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
}
.search-layer-item{
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
}
.search-layer-item:hover{
background-color: #f3f5f7;
}
/* category */
.category{
width: 208px;
margin-top: -56px;
font-size: 14px;
}
.category .dropdown{
position: relative;
}
.category-title{
display: block;
height: 54px;
line-height: 54px;
padding: 0 20px;
background-color: #c81414;
color: #FFFFFF;
}
.category-title .icon{
margin-right: 10px;
font-size: 16px;
color: #FFFFFF;
}
.category-list{
height: 512px;
background-color: #f01414;
position: relative;
}
.category .dropdown-toggle{
height: 36px;
line-height: 36px;
padding-left: 16px;
color: #FFFFFF;
}
.category .dropdown-link{
color: #FFFFFF;
}
.category .dropdown-arrow{
position: absolute;
top: 12px;
right: 12px;
font-family: simsun;
font-weight: bold;
}
.category-active .dropdown-toggle{
background-color: #fff;
}
.category-active .dropdown-toggle,
.category-active .dropdown-link{
color: #f01414;
}
.category .dropdown-layer{
/*display: block;*/
top: 0;
left: 100%;
width: 744px;
min-height: 473px;
padding: 8px 0 31px 0;
background-color: #FFFFFF;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.category-details{
width: 744px;
margin-top: 24px;
line-height: 20px;
}
.category-details-title{
width: 84px;
padding-right: 16px;
border-right: 1ps solid #d9dde1;
text-align: right;
}
.category-details-title-link{
color: #07111b;
font-weight: bold;
}
.category-details-item{
width: 592px;
padding-left: 15px;
}
.category-details-item .link{
display: inline-block;
margin-right: 16px;
}
.category .dropdown-loading{
margin: 220px auto 0;
}
/* slider */
.slider{
position: relative;
overflow: hidden;
width: 728px;
height: 504px;
}
.slider-indicator-wrap{
position: absolute;
bottom: 24px;
left: 50%;
margin-left: -36px;
}
.slider-indicator{
width: 8px;
height: 8px;
background-color: #313a43;
border-radius: 50%;
margin-right:12px;
cursor: pointer;
}
.slider-indicator-active{
position: relative;
top: -2px;
background-color: #f7f8f9;
border: 2px solid #858b92;
}
.slider-control{
display: none;
position: absolute;
top: 50%;
margin-top: -31px;
width: 28px;
height: 62px;
line-height: 62px;
background-color: #000000;
opacity: 0.8;
filter: alpha(opacity=80);
color: #FFFFFF;
font-size: 22px;
font-family: simsun;
text-align: center;
}
.slider-control-left{
left: 0;
}
.slider-control-right{
right: 0;
}
/* 淡入淡出方式 */
.slider-fade .slider-item{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* .slider-slide */
.slider-slide .slider-item{
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
/*.slider-slide .slider-container{
position: absolute;
top: 0;
left: 0;
width: 1000%;
height: 100%;
background-color: burlywood;
}
.slider-slide .slider-item{
float: left;
}*/
/* tab */
.tab-panel{
display: none;
}
/* 仅适用于首页的样式 */
/* nav-site站点导航样式 */
.nav-site{
width:100%;
background-color: #f3f5f7;
}
.nav-site .container{
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{
color: #f01414;
margin-left: 15px;
}
.nav-site-signup,
.nav-site-mobile{
margin-left: 10px;
}
.nav-site-category{
margin: 0 10px;
}
.nav-site-service{
margin-right: 15px;
}
/* dropdown样式 */
/*.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index: 2;
display: block;
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow{
display: inline-block;
width: 8px;
height: 6px;
background: url(../img/dropdown-arrow.png) no-repeat;
margin-left: 8px;
vertical-align: middle;
}
.dropdown-layer{
display: none;
position: absolute;
z-index: 1;
top: 43px;
background: #ffffff;
border: 1px solid #cdd0d4;
}
.dropdown-left{
left: 0;
right: auto;
}
.dropdown-right{
right: 0;
left: auto;
}
.dropdown-item{
display: block;
height: 30px;
line-height: 30px;
padding: 0 12px;
color: #4d555d;
white-space: nowrap;
}
.dropdown-item:hover{
background-color: #f3f5f7;
}*/
/*.dropdown-active .dropdown-toggle{
background-color: #fff;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-arrow{
background-image:url(../img/dropdown-arrow-active.png);
}
.dropdown-active .dropdown-layer{
display:block ;
}*/
.dropdown:hover
.dropdown-active .dropdown-toggle,
.dropdown:hover .dropdown-toggle{
background-color: #FFFFFF;
border-color: #cdd0d4;
}
.dropdown-active .dropdown-arrow,
.dropdown:hover .dropdown-arrow{
/*background-image:url(../img/dropdown-arrow-active.png);*/
transform: rotate(180deg);
transition: all 1s;
}
.dropdown-active .dropdown-layer,
.dropdown:hover .dropdown-layer{
display: block;
}
/* header */
.header{
width: 100%;
height: 124px;
background-color: #f3f5f7;
}
.header-logo,
.header .search,
.header .cart{
margin-top: 36px;
}
.header-logo{
display: block;
width: 136px;
height: 48px;
background: url(../img/header-logo.png) no-repeat;
margin-left: 15px;
}
.header .search{
margin-left: 145px;
}
/* nav-main */
.nav-main{
width: 100%;
height: 48px;
background-color: #07111b;
margin-bottom: 8px;
text-indent: 182px;
}
.nav-main .link{
margin-left: 50px;
color: #FFFFFF;
font-size: 14px;
line-height: 48px;
}
/* focus */
.focus{
width: 100%;
height: 504px;
background-color: #FFFFFF;
margin-bottom: 8px;
}
.focus-sidebar{
width: 249px;
}
.focus-news{
padding: 7px 20px 12px;
background-color: #FFFFFF;
border-bottom: none;
}
.focus-news-head{
height: 38px;
line-height: 38px;
}
.focus-news-title{
color: #F01414;
font-size: 16px;
}
.focus-news-body{
line-height: 28px;
}
.focus-service{
background-color: #FFFFFF;
border-left: 1px solid #d9dde1;
}
.focus-service-item{
width: 61px;
height: 71px;
border-top: 1px solid #d9dde1;
border-right: 1px solid #d9dde1;
text-align: center;
}
.focus-service-icon,
.focus-service-text{
display: inline-block;
width: 100%;
}
.focus-service-icon{
margin-top: 17px;
color: #f67272;
font-size: 22px;
}
.focus-service-text{
margin-top: 6px;
color: #4d555d;
}
.focus-ad{
width: 100%;
height: 90px;
background: url(../img/focus-ad.png) no-repeat;
}
.focus .slider{
margin-left: 8px;
}
/* todays */
.todays .slider{
position: relative;
z-index: 1;
width: 100%;
height: 158px;
margin-bottom: 10px;
}
.todays .slider .slider-item a{
float: left;
}
.todays .slider-img{
width: 240px;
display: block;
}
/* floor */
.floor{
height: 532px;
margin-bottom: 10px;
}
.floor .container{
position: relative;
z-index: 1;
}
.floor-head{
height: 68px;
border-bottom: 1px solid #f01414;
}
.floor-title{
margin-top:22px;
}
.floor-title-num{
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
background-color: #07111B;
margin-right: 12px;
color: #FFFFFF;
text-align: center;
}
.floor-title-next{
color: #70111b;
font-size: 22px;
position: relative;
top: 3px;
}
.floor-body{
height: 464px;
}
.floor-item{
width: 200px;
height: 232px;
text-align: center;
}
.floor-item:hover{
box-shadow:0 0 10px rgba(0,0,0,0.2);
}
.floor-item-pic{
margin-top: 24px;
}
.floor-item-name{
margin-top: 24px;
}
.floor-item-name .link{
color:#07111b;
}
.floor-item-price{
margin-top: 11px;
color: #F01414;
font-size: 14px;
font-weight: bold;
}
/* tab选项卡 */
.floor-head .tab-item-wrap{
height: 62px;
line-height: 62px;
margin-top: 7px;
}
.floor-head .tab-item{
display: inline-block;
margin-right: 16px;
color: #93999f;
font-size: 14px;
}
.floor-head .tab-item-active{
background:url(../img/floor-arrow.png) no-repeat center bottom;
color: #f01414;
}
.floor-divider{
width: 1px;
height: 14px;
background-color: #d9dde1;
margin: 22px 16px 0 0;
}
.floor-head .tab-panel{
height: 100%;
}
/* elevator */
.elevator{
display: none;
position: fixed;
left: 50%;
top: 50%;
margin-top: -90px;
margin-left: -640px;
}
.elevator-item{
display: block;
width: 24px;
height: 35px;
line-height: 35px;
border-top: 1px solid #d9dde1;
text-align: center;
color: #4d555d;
}
.elevator-item:hover,
.elevator-active{
color: #f01414;
}
.elevator-text{
display: none;
}
.elevator-item:hover .elevator-num,
.elevator-active .elevator-num{
display: none;
}
.elevator-item:hover .elevator-text,
.elevator-active .elevator-text{
display: block;
}
/* friendLink */
.friendLink{
width: 100%;
padding-top: 35px;
}
.friendLink .container{
width: 1200px;
margin: 0 auto;
border-top: 1px solid #D9DDE1;
height: 138px;
}
.friendLink-item{
height: 138px;
width: 213px;
padding-left: 36px;
padding-right: 50px;
text-align: left;
float: left;
}
.friendLink-item p{
font-size: 15px;
margin-top: 30px;
line-height: 29px;
color: #07111b;
}
.friendLink-item a{
font-size: 12px;
line-height: 26px;
color: #93999F;
margin-right: 19px;
display: inline-block;
}
.friendLink-item a:hover{
color: red;
}
.friendLink img{
display: block;
margin: 0 auto;
}
/* footer */
.footer{
width: 100%;
height: 102px;
background-color: #F3F5F7;
font-size: 12px;
}
.footer .container{
padding-top: 26px;
text-align: center;
}
.footer .container a{
color: #787d82;
display: inline-block;
margin-right: 15px;
line-height: 26px;
}
.footer .container a:last-child{
display: block;
line-height: 26px;
}
.footer .container a:hover{
color: #07111b;
}
.footer .container img{
height: 102px;
display: block;
margin: 0 auto;
}
/* toolbar */
.toolbar{
position: fixed;
z-index: 2;
right: 0;
top: 50%;
margin-top: -102px;
}
.toolbar-item{
position: relative;
display: block;
width: 40px;
height: 40px;
line-height: 40px;
margin-bottom: 1px;
color: #FFFFFF;
text-align: center;
}
.toolbar-icon{
position: relative;
z-index: 2;
display: block;
background-color: #b7bbbf;
font-size: 30px;
}
.toolbar-text{
position: absolute;
left: 0;
top: 0;
width: 62px;
height: 40px;
}
.toolbar-item:hover .toolbar-icon{
background-color: #71777d;
}
.toolbar-item:hover .toolbar-text{
left: -62px;
background-color: #71777d;
}
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星