品优购首页——网页轮播图
发布时间
阅读量：
阅读量
效果图
首页文件 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品优购首页-综合网购首选-正品低廉,品质保障,配送及时,轻松购物!
</title>
<meta name="description"
content="品优购商城-专业的综合网上购物商城,销售家电,数码通讯,电脑,家居百货,服装服饰,母婴,图书,食品等数万个品牌优质商品.便捷,诚信的服务,为您提供愉悦的网上购物体验!"/>
<!--关键字-->
<meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡"/>
<!--favicon图标制作-->
<link rel="shortcut icon" href="favicon.ico">
<!--引入初始化样式文件-->
<link rel="stylesheet" href="css/base.css">
<!--引入公共的样式文件-->
<link rel="stylesheet" href="css/common.css">
<!--引入首页专属样式文件-->
<link rel="stylesheet" href="css/index.css">
<!--引入轮播图动画js(需要在主js上,因为主js要用)-->
<script src="js/animate.js"></script>
<!--引入js的功能-->
<script src="js/index.js"></script>
</head>
<body>
<!--快捷导航模块-->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您!</li>
<li>
<a href="#"> 请登录</a>
<a href="register.html" id="zhu-ce">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li class="shu"></li>
<li class="arrow-icon"><a href="#">我的品优购 ∨</a></li>
<li class="shu"></li>
<li><a href="#">品优购会员</a></li>
<li class="shu"></li>
<li><a href="#">企业采购</a></li>
<li class="shu"></li>
<li class="arrow-icon"><a href="#">关注品优购 ∨</a></li>
<li class="shu"></li>
<li class="arrow-icon"><a href="#">客户服务 ∨</a></li>
<li class="shu"></li>
<li class="arrow-icon"><a href="#">网站导航 ∨</a></li>
</ul>
</div>
</div>
</section>
<!--快捷导航栏结束-->
<!--头部模块-->
<header class="header w">
<!--logo部分-->
<div class="logo w"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div>
<!--搜索框部分-->
<div>
<div class="search">
<input class="text" type="text" placeholder="请输入内容...">
<button class="btn">搜索</button>
</div>
<div class="hot-words">
<div><a href="#" id="zhu-ce">优惠购首发</a></div>
<div><a href="#">亿元优惠</a></div>
<div><a href="#">9.9元团购</a></div>
<div><a href="#">美满99减30</a></div>
<div><a href="#">办公用品</a></div>
<div><a href="#">电脑</a></div>
<div><a href="#">通信</a></div>
</div>
</div>
<!--购物车-->
<div class="shop-car">
<i class="icon-cart"></i>
<a href="#">我的购物车 ></a>
<i class="count">80</i>
</div>
</header>
<!--头部模块结束-->
<!--nav模块制作-->
<nav class="nav">
<div class="w">
<!--左盒子标签-->
<div class="dropdown">
<div class="dt fl">全部商品分类</div>
<div class="dd">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="list.html">手机 </a><a href="#">数码 </a><a href="#">通信</a></li>
<li><a href="#">电脑 </a><a href="#">办公</a></li>
<li><a href="#">家居 </a><a href="#">家具 </a><a href="#">家装 </a><a href="#">厨具</a></li>
<li><a href="#">男装 </a><a href="#">女装 </a><a href="#">童装 </a><a href="#">内衣</a></li>
<li><a href="#">个户化妆 </a><a href="#">清洁用品 </a><a href="#">宠物</a></li>
<li><a href="#">鞋靴 </a><a href="#">箱包 </a><a href="#">珠宝 </a><a href="#">奢侈品</a></li>
<li><a href="#">运动户外 </a><a href="#">钟表</a></li>
<li><a href="#">汽车 </a><a href="#">汽车用品</a></li>
<li><a href="#">母婴 </a><a href="#">玩具乐器</a></li>
<li><a href="#">食品 </a><a href="#">酒类 </a><a href="#">生鲜 </a><a href="#">特产</a></li>
<li><a href="#">医药保健</a></li>
<li><a href="#">图书 </a><a href="#">音像 </a><a href="#">电子书</a></li>
<li><a href="#">彩票 </a><a href="#">旅行 </a><a href="#">充值 </a><a href="#">票务</a></li>
<li><a href="#">理财 </a><a href="#">众筹 </a><a href="#">白条 </a><a href="#">保险</a></li>
</ul>
</div>
</div>
<!--右盒子详情-->
<div class="navitems fl">
<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>
<li><a href="#">团购</a></li>
<li><a href="#">拍卖</a></li>
<li><a href="#">有趣</a></li>
</ul>
</div>
</div>
</nav>
<!--nav模块结束-->
<!--固定电梯导航start-->
<div class="fixedtool">
<ul>
<li class="current">家用电器</li>
<li>手机通讯</li>
<li>电脑办公</li>
<li>家具家居</li>
<li>生活用品</li>
<li>运动户外</li>
<li>汽车用品</li>
<li>食品酒类</li>
<li>医药保健</li>
<li>图书音像</li>
<li>金融彩票</li>
</ul>
</div>
<!--固定电梯导航结束-->
<!--首页专有模块-->
<div class="main w">
<div class="focus fl">
<!--左侧按钮-->
<a href="javascript:;" class="arrow-l"> < </a>
<!--右侧按钮-->
<a href="javascript:;" class="arrow-r"> > </a>
<!--核心滚动区域-->
<ul>
<li>
<a href="#"><img src="upload/focus.png" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!--小圆圈-->
<ol class="circle">
</ol>
</div>
<div class="new-flash fr">
<div class="news">
<div class="news-shortcut">
<h2>品优购快报</h2>
<a href="#" class="fr">更多 ></a>
</div>
<ul>
<li><a href="#" title="双剑华斩,风中传来苦咸,是悔恨的气味吗?"><strong>[重磅]</strong>双剑华斩,风中传来苦咸,是悔恨的气味吗?</a></li>
<li><a href="#"><strong>[重磅]</strong>钢铁烈风,一剑诛恶一剑镇魂...</a></li>
<li><a href="#"><strong>[重磅]</strong>锐利阵风,一剑诛恶一剑镇魂...</a></li>
<li><a href="#"><strong>[重磅]</strong>斩邪,诛魔,一剑诛恶一剑镇魂...</a></li>
<li><a href="#" title="喜欢是风,暗恋是云,爱是海啸,我是孤岛"><strong>[重磅]</strong>喜欢是风,暗恋是云,爱是海啸,我是孤岛</a></li>
</ul>
</div>
<div class="life-service">
<ul>
<li><a href="#">
<i></i>
<p>话费</p>
</a></li>
<li class="ji-an"><a href="#">
<i class="jp"></i>
<p>机票</p>
<div><img src="upload/jianjia.png" alt=""></div>
</a></li>
<li><a href="#">
<i></i>
<p>电影票</p>
</a></li>
<li><a href="#">
<i></i>
<p>游戏</p>
</a></li>
<li><a href="#">
<i></i>
<p>彩票</p>
</a></li>
<li><a href="#">
<i></i>
<p>加油卡</p>
</a></li>
<li><a href="#">
<i></i>
<p>酒店</p>
</a></li>
<li><a href="#">
<i></i>
<p>火车票</p>
</a></li>
<li><a href="#">
<i></i>
<p>众筹</p>
</a></li>
<li><a href="#">
<i></i>
<p>理财</p>
</a></li>
<li><a href="#">
<i></i>
<p>礼品卡</p>
</a></li>
<li><a href="#">
<i></i>
<p>白条</p>
</a></li>
</ul>
</div>
<div class="bargain">
<img src="upload/bargain.png" alt="">
</div>
</div>
</div>
<!--首页专有模块结束-->
<!--推荐模块start-->
<div class="w re-com">
<div class="recom_hd fl">
<img src="images/clock.png" alt="">
</div>
<div class="recom_bd fl">
<ul>
<li><a href="#"><img src="upload/rm1.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/rm2.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/rm3.jpg" alt=""></a></li>
<li><a href="#"><img src="upload/rm4.jpg" alt=""></a></li>
</ul>
</div>
</div>
<!--推荐模块结束-->
<!--猜你喜欢模块-->
<div class="surmise w">
<div class="speculate fl w">
<div class="sl-late fl">猜你喜欢</div>
<div class="sr-late fr"><a href="#">换一批㉿</a></div>
</div>
<div class="guess fl">
<ul class="fl">
<li class="fl">
<a href="#"><img src="upload/bag.png" alt=""></a>
<p><a href="#">阳光美包新款单肩包女<br>
包时尚子母包四件套女</a></p>
<h5>¥ </h5><h4> 116.00</h4>
</li>
<li class="fl">
<a href="#"><img src="upload/wok.png" alt=""></a>
<p><a href="#">爱仕达 30CM炒锅不粘
锅NWG8330E电磁炉炒</a></p>
<h5>¥ </h5><h4> 99.00</h4>
</li>
<li class="fl">
<a href="#"><img src="upload/cup.png" alt=""></a>
<p><a href="#">捷波朗 <br>
（jabra）BOOSI劲步</a></p>
<h5>¥ </h5><h4> 245.00</h4>
</li>
<li class="fl">
<a href="#"><img src="upload/flatlight.png" alt=""></a>
<p><a href="#">欧普<br>
JTLZ08面板平面灯铝</a></p>
<h5>¥ </h5><h4> 238.00</h4>
</li>
<li class="fl">
<a href="#"><img src="upload/Anycall.png" alt=""></a>
<p><a href="#">三星<br>
(05500)移动联</a></p>
<h5>¥ </h5><h4> 649.00</h4>
</li>
<li class="g-finally fl">
<a href="#"><img src="upload/essencecream.png" alt=""></a>
<p><a href="#">韩国所望<br>
紧致湿润精华霜</a></p>
<h5>¥ </h5><h4> 649.00</h4>
</li>
</ul>
</div>
</div>
<!--猜你喜欢模块结束-->
<!--楼层区域制作-->
<div class="floor">
<!--1楼家用电器楼层(不设高度)-->
<div class="shouji w">
<div class="box_hd">
<h3 class="fl style_red">家用电器</h3>
<div class="tab_list fr">
<ul>
<li><a href="#" class="style_red">热门</a>|</li>
<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>
<li><a href="#">应季电器</a>|</li>
<li><a href="#">空气/净水</a>|</li>
<li><a href="#">新奇特</a>|</li>
<li><a href="#">高端电器</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<div class="tab_content">
<div class="tab_list_item">
<div class="col_210">
<ul>
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
<a href="#"><img src="upload/floor-1-1.png" alt=""></a>
</div>
<div class="col_329">
<a href="#"><img src="upload/floor-1-b01.png" alt=""></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
<a href="#"><img src="upload/floor-1-3.png" alt=""></a>
</div>
<div class="col_221">
<a href="#"><img src="upload/floor-1-4.png" alt=""></a>
</div>
<div class="col_219">
<a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
<a href="#"><img src="upload/floor-1-6.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<!--2楼手机通讯楼层-->
<div class="jiadian w">
<div class="box_hd">
<h3 class="fl style_red">手机通讯</h3>
<div class="tab_list fr">
<ul>
<li><a href="#" class="style_red">热门</a>|</li>
<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>
<li><a href="#">应季电器</a>|</li>
<li><a href="#">空气/净水</a>|</li>
<li><a href="#">新奇特</a>|</li>
<li><a href="#">高端电器</a></li>
</ul>
</div>
</div>
<div class="box_bd">
<div class="tab_content">
<div class="tab_list_item">
<div class="col_210">
<ul>
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
<a href="#"><img src="upload/floor-1-1.png" alt=""></a>
</div>
<div class="col_329">
<a href="#"><img src="upload/floor-1-b01.png" alt=""></a>
</div>
<div class="col_221">
<a href="#" class="bb"><img src="upload/floor-1-2.png" alt=""></a>
<a href="#"><img src="upload/floor-1-3.png" alt=""></a>
</div>
<div class="col_221">
<a href="#"><img src="upload/floor-1-4.png" alt=""></a>
</div>
<div class="col_219">
<a href="#" class="bb"><img src="upload/floor-1-5.png" alt=""></a>
<a href="#"><img src="upload/floor-1-6.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--楼层区域结束-->
<!--footer底部模块制作-->
<footer class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<h5 class="service_demon"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5 class="service_demon"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5 class="service_demon"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5 class="service_demon"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
<li>
<h5 class="service_demon"></h5>
<div class="service_txt">
<h4>正品保障</h4>
<p>正品保障,提供发票</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>服务指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行/团购</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>帮助中心</dt>
<dd>
<img src="images/wx_cz.png" alt="">
</dd>
<dd>品优购客户端</dd>
</dl>
</div>
<div class="mod_copyright">
<div class="links">
<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>|<a href="#">English Site</a>|<a href="#">Contact U</a>
</div>
<div class="copyright">
地址: 北京市昌平区建材城西路金燕龙办公楼一层 邮编: 100096 电话400-618-4000 传真: 010-82935100 邮箱:zhanghj+itcast.cn<br>
京ICP备08001421号公网安备110108007702
</div>
</div>
</div>
</footer>
<!--底部模块结束-->
</body>
</html>CSS初始化文件 base.css
/*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0;
/*CSS3的盒子模型*/
box-sizing: border-box;
}
.style_red {
color: red;
}
/*让所有斜体 不倾斜*/
em,
i {
font-style: normal;
}
/*去掉列表前面的小点*/
li {
list-style: none;
display: inline-block;
}
/*图片没有边框 去掉图片底侧的空白缝隙*/
img {
border: 0; /*ie6*/
vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
cursor: pointer;
}
/*取消链接的下划线*/
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
button,
input {
font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \ 5B8B\4F53, sans-serif;
/*取消轮廓线 蓝色的*/
outline: none;
/*清除灰色边框*/
border: 0;
}
body {
background-color: #fff;
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \ 5B8B\4F53, sans-serif;
color: #666
}
.hide,
.none {
display: none;
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}css 公共文件 顶部和底部 common.css
/*声明字体图标(注意路径问题)*/
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tomleg');
src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tomleg') format('truetype'),
url('../fonts/icomoon.woff?tomleg') format('woff'),
url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.w {
width: 1200px;
margin: 0 auto;
}
.shortcut {
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
.shortcut div ul li {
display: inline-block;
}
.shortcut div ul li a {
color: #666;
}
.fl {
float: left;
/*margin-left: 160px;*/
}
.fr {
float: right;
/*margin-right: 160px;*/
}
/*.shortcut .fr ul .shu {*/
/*width: 1px;*/
/*height: 12px;*/
/*background-color: black;*/
/*margin: 9px 15px 0;*/
/*}*/
/*选择所有的偶数小li(注意行内块元素才能起效)*/
.shortcut .fr ul li:nth-child(even) {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 15px 0;
}
#zhu-ce {
color: #cf374c;
}
/*.arrow-icon::after {*/
/*content: '\e91e';*/
/*font-family: 'icomoon';*/
/*margin-left: 6px;*/
/*}*/
/*头部制作*/
.header {
position: relative;
height: 100px;
}
.logo {
position: absolute;
top: 22px;
width: 175px;
height: 61px;
font-size: 0;
}
.logo h1 a {
display: block;
width: 175px;
height: 61px;
background: url("../images/logo.png") no-repeat;
}
/*搜索框*/
.search {
position: absolute;
top: 25px;
left: 346px;
width: 538px;
height: 36px;
border: 2px solid #b1191a;
}
.text {
float: left;
width: 454px;
height: 32px;
padding-left: 10px;
}
.btn {
float: right;
width: 80px;
height: 34px;
background-color: #b1191a;
color: white;
font-size: 15px;
}
.hot-words {
position: absolute;
top: 65px;
left: 348px;
}
.header div .hot-words div {
display: inline-block;
margin-right: 30px;
}
/*购物车*/
.shop-car {
position: absolute;
top: 22px;
left: 992px;
height: 45px;
width: 140px;
background-color: #f7f7f7;
border: 1px solid #DDDDDD;
line-height: 45px;
text-align: center;
}
.count {
position: absolute;
top: -5px;
left: 100px;
height: 15px;
background-color: red;
color: white;
line-height: 15px;
padding: 0 2px;
border-radius: 7px 7px 7px 0;;
}
.icon-cart::after {
content: '\e93a';
font-family: 'icomoon';
color: #cf374c;
margin-right: 6px;
}
/*nav模块*/
.nav {
height: 45px;
border-bottom: 2px solid #cf374c;
}
.nav .dropdown {
float: left;
width: 210px;
height: 45px;
background-color: #b1191a;
}
.dropdown .dt {
height: 100%;
width: 100%;
background-color: #b1191a;
color: white;
font-size: 18px;
line-height: 45px;
text-align: center;
font-weight: 300;
}
.dd {
/*display: none;*/
width: 210px;
height: 516px;
background-color: #c81623;
}
.nav .w .dropdown .dd ul li {
display: block;!important
height: 30px;
line-height: 30px;
margin-left: 2px;
padding-left: 10px;
}
.dropdown .dd ul li::after {
position: absolute;
top: 1px;
right: 10px;
color: black;
font-family: icomoon;
content: '\e920';
font-size: 14px;
}
.nav .w .dropdown .dd ul li:hover {
background-color: white;
}
.nav .w .dropdown .dd ul li:hover a {
color: #c81623;
}
.nav .w .dropdown .dd ul li a {
color: white;
font-size: 14px;
}
.nav .w .navitems ul li {
font-size: 16px;
color: #DDDDDD;
line-height: 45px;
/*margin-left: 50px;*/
}
.nav .w .navitems ul li a {
padding: 0 25px;
/*给a加内边框更合适,选择范围更大,用户体验更好*/
}
/*底部模块制作*/
.footer {
/*position: absolute;*/
/*bottom: 0;*/
height: 380px;
width: 100%;
background-color: #f1f1f1;
padding-top: 30px;
margin-top: 30px;
}
.mod_service {
height: 70px;
border-bottom: 1px solid #ccc;
}
.mod_service ul li {
float: left;
height: 50px;
width: 240px;
padding-left: 32px;
}
.mod_service ul li h5 {
float: left;
width: 50px;
height: 50px;
margin-right: 8px;
background: url("../images/icons.png") no-repeat -252px -2px;
}
.service_txt h4{
font-size: 14px;
height: 25px;
line-height: 25px;
}
.service_txt p {
font-size: 12px;
}
.mod_help {
height: 185px;
border-bottom: 1px solid #cccccc;
}
.mod_help dl {
float: left;
margin-top: 20px;
padding: 0 60px;
}
.mod_help dt {
font-size: 16px;
margin-bottom: 10px;
}
.mod_help dl:last-child {
/*dl:last-child选择最后一个dl*/
text-align: center;
}
.mod_copyright {
margin-top: 10px;
text-align: center;
}
.mod_copyright .links a {
padding: 5px;
}
.copyright {
margin-top: 10px;
}css 首页专有文件 index.css
/*首页样式制作*/
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?tomleg');
src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?tomleg') format('truetype'),
url('../fonts/icomoon.woff?tomleg') format('woff'),
url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
/*电梯导航模块*/
.fixedtool {
position: fixed;
top: 100px;
left: 50%;
margin-left: -676px;
width: 70px;
background-color: #ffffff;
}
.fixedtool ul li {
display: block;!important;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.fixedtool .current {
background-color: #c81623;
color: #fff;
}
/*电梯导航模块结束*/
.main {
overflow: hidden;
height: 480px;
padding-left: 220px;
padding-top: 15px;
}
.main .focus {
position: relative;
top: 0;
left: 0;
/*给父盒子加溢出隐藏*/
overflow: hidden;
height: 480px;
width: 721px;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
/*加了绝对定位的盒子可以直接设置高度和宽度*/
top: 50%;
margin-top: -30px;
width: 24px;
height: 40px;
background-color: rgba(0,0,0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
/*小圆圈*/
.circle {
position: absolute;
bottom: 30px;
left: 50%;
width: 80px;
height: 10px;
margin-left: -25px;
/*background-color: #fff;*/
}
.main .focus ul li a {
cursor: default;
}
.circle li {
float: left;
width: 10px;
height: 10px;
border: 2px solid rgba(255,255,255,0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
z-index: 2;
}
.current {
background-color: #FF732B;
}
.main .new-flash {
height: 480px;
width: 250px;
}
.news {
height: 165px;
border: 1px solid #DDDDDD;
}
.life-service {
height: 209px;
}
.bargain {
margin-top: 5px;
}
.news h2 {
display: inline-block;
height: 32px;
line-height: 32px;
padding-left: 10px;
}
.news-shortcut {
border-bottom: 1px dotted #666666;
}
.news-shortcut a {
height: 32px;
line-height: 32px;
font-size: 13px;
padding-right: 10px;
}
.news ul li {
display: block;!important;
font-size: 13px;
height: 25px;
line-height: 25px;
padding-left: 10px;
/*隐藏多余的文字并变成省略号*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.life-service ul {
width: 252px;
}
.life-service {
/*切除超出的边框(CSS3盒子还是会被边框撑大)*/
overflow: hidden;
height: 209px;
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
}
.life-service ul li {
float: left;
width: 63px;
height: 71px;
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
text-align: center;
}
.life-service ul li a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -17px -15px;
}
.life-service ul li a .jp {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -78px -15px;
}
.life-service ul li:nth-child(n+3) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -142px -15px;
}
.life-service ul li:nth-child(n+4) a i {
display: inline-block;
height: 28px;
width: 35px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -201px -15px;
}
.life-service ul li:nth-child(n+5) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -17px -85px;
}
.life-service ul li:nth-child(n+6) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -78px -85px;
}
.life-service ul li:nth-child(n+7) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -142px -85px;
}
.life-service ul li:nth-child(n+8) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -205px -85px;
}
.life-service ul li:nth-child(n+9) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -17px -155px;
}
.life-service ul li:nth-child(n+10) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -78px -155px;
}
.life-service ul li:nth-child(n+11) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -142px -155px;
}
.life-service ul li:nth-child(n+12) a i {
display: inline-block;
height: 28px;
width: 24px;
margin-top: 12px;
background: url("../images/icons.png") no-repeat -205px -155px;
}
.life-service ul .ji-an {
position: relative;
}
.life-service ul .ji-an a div {
position: absolute;
top: 0;
right: 0;
}
.life-service ul .ji-an a div img {
width: 16px;
height: 16px;
}
.re-com {
height: 143px;
background-color: #ebebeb;
}
.recom_hd {
height: 143px;
width: 205px;
background-color: #5c5251;
text-align: center;
padding-top: 45px;
}
.recom_bd ul li {
float: left;
padding-left: 1px;
}
.recom_bd ul li a img {
height: 143px;
width: 246px;
}
/*猜你喜欢模块*/
.surmise {
overflow: hidden;
height: 300px;
margin-top: 20px;
margin-bottom: 10px;
}
.speculate {
height: 28px;
line-height: 28px;
}
.guess {
overflow: hidden;
}
.guess ul {
overflow: hidden;
}
.guess ul li {
width: 200px;
height: 225px;
border: 1px solid #f1f1f1;
}
.guess ul li a img {
width: 200px;
height: 160px;
}
.guess ul .g-finally a img {
width: 192px;
}
.guess ul li p {
padding-left: 40px;
}
.guess ul li h5 {
display: inline-block;
padding-right: 5px;
color: red;
padding-left: 40px;
}
.guess ul li h4 {
display: inline-block;
color: #c81623;
}
/*猜你喜欢模块结束*/
/*楼层1模块开始*/
.box_hd {
height: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #c81623;
margin-top: 30px;
}
.w .box_hd h3 {
font-weight: 400;
font-size: 18px;
line-height: 18px;
}
.tab_list {
width: 700px;
}
.tab_list ul li a {
padding: 0 10px;
}
.box_bd {
height: 361px;
}
.tab_list_item>div {
float: left;
}
.col_210 {
width: 210px;
height: 361px;
background-color: #f9fbf9;
}
.col_210 ul {
margin-left: 12px;
}
/*利用宽度高度行高做,方便测量,还能防止文字多少带来的变化*/
.col_210 ul li {
float: left;
width: 85px;
height: 34px;
text-align: center;
line-height: 33px;
margin-right: 10px;
border-bottom: 1px solid #cccccc;
}
.col_329 {
width: 329px;
}
.col_221 {
width: 221px;
border-right: 1px solid #f1f1f1;
}
.col_219 {
width: 219px;
}
.bb {
/*一般情况下,a如果包含有宽度的盒子,a需要转化为块级元素*/
display: block;
border-bottom: 1px solid #f1f1f1;
}
/*楼层1模块结束*/JS 轮播图文件 index.js
//获取元素 下拉菜单
// var dt = document.querySelector('.dt');
// var dd = document.querySelector('.dd');
// var dpn = document.querySelector('.dropdown')
// dt.addEventListener('mouseover', function () {
// dd.style.display = 'block';
// dd.addEventListener('mouseover', function () {
// dd.style.display = 'block';
// })
// })
// dpn.addEventListener('mouseout', function () {
// dd.style.display = 'none';
// })
// window.addEventListener('load',function () {
// //底部精灵图
// var fdn = document.querySelectorAll('.service_demon');
// for (var i = 0; i < fdn.length; i++) {
// var indey = i * (-52) - 2;
// fdn[i].style.backgroundPosition = '-17px' + indey + 'px';
// }
// })
// main样式功能
window.addEventListener('load', function () {
// 1.获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 2.鼠标经过focus 就显示隐藏左右按钮
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null; //清除定时器
})
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function () {
// 手动调用点击事件
arrow_r.click();
},2000);
})
// 3. 动态生成小圆圈 有几张图片,就生成几个小圆圈
var ul = focus.querySelector('ul'); // 获取元素时记得限定获取范围 (无法使用All,因为li都会出现在focus类下)
var ol = focus.querySelector('.circle');
var num = 0;
var circle = 0;
// console.log(ul.children.length)
for (var i = 0; i < ul.children.length; i++) {
// 创建一个小li
var li = document.createElement('li');
// 记录当前小li的索引号 通过自定义属性来获取
li.setAttribute('index', i);
// 把小li插入到ol 里面
ol.appendChild(li);
// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener('click', function () {
// 干掉所有人 把所有的小li 清除 current 类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
// 留下我自己 当前的小li 设置current 类名
this.className = 'current';
// 5.点击小圆圈,移动图片 当然移动的是 ul
// ul的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
// 当我们点击了某个小li 就拿到当前小li的索引号
var index = this.getAttribute('index');
// console.log(focusWidth);
// console.log(index);
// 当我们点击了某个小li, 就要把这个小li的索引号给num和circle
num = index;
circle = index;
animate(ul, -index * focusWidth);
})
}
// 把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current';
// 6. 克隆第一张图片(li) 放到ul 最后面 加true深克隆 复制里面的子节点 false浅克隆 不复制该节点里面的节点 克隆图片是在创建小圆点后边,不用担心小圆点数量
var first = ul.children[0].cloneNode(true);
ul.appendChild(first); //放在最后一个孩子
// 7.点击左侧按钮, 图片滚动一张
var flag = true;
// flag 节流阀
arrow_r.addEventListener('click', function () {
if (flag){
flag = false; //关闭节流阀
if (num === ul.children.length - 1) { //多一张图片,多一个第一张图片的小li,所以要减一(无缝滚动)
ul.style.left = '0';
num = 0;
}
num++;
animate(ul, -num * focusWidth,function() {
flag = true;
});
// 8.点击右侧按钮, 小圆圈跟着一起变化,可以再声明一个变量控制小圆圈的播放 (写在鼠标点击右箭头事件里)
circle++;
// 如果clircle ==4 说明走到克隆图片了,这时候让他复原
// if (circle === ol.children.length) {
// circle = 0;
// }
circle === ol.children.length ? circle = 0 : circle; // circle=circle === ol.children.length ? circle = 0 : circle;(开头circle=可以省略)
circleChange(); //调用小圆点当前图片所在个数的颜色函数
}
});
// 左点击滑动图片
arrow_l.addEventListener('click', function () {
if (flag){
flag = false; //关闭节流阀
if (num === 0) { // 如果索引号为零,要快速跳到最后一张图,再移动操作
num = ul.children.length - 1; //索引号比获得的个数小1
ul.style.left = 'num * focusWidth';
}
num--; // 索引号再减一,开始调用函数进行动画操作
animate(ul, -num * focusWidth,function () {
flag = true;
});
// 8.点击右侧按钮, 小圆圈跟着一起变化,可以再声明一个变量控制小圆圈的播放 (写在鼠标点击右箭头事件里)
circle--;
// 如果clircle ==4 说明走到克隆图片了,这时候让他复原
// if (circle < 0) {
// circle = ol.children.length - 1;
// }
circle = circle < 0 ? circle = ol.children.length - 1 : circle; //三元表达式
circleChange(); //调用小圆点当前图片所在个数的颜色函数
}
});
function circleChange() {//函数封装
// 排他思想,干掉所有人
for (var i = 0; i < ol.children.length; i++) { // 这个ol的孩子是4, 但是 i<4, i能取0,1,2,3 ,最后一张图片不用加类名也不用改类名
// console.log(ol.children.length); // 输出结果就是4
ol.children[i].className = '';
}
// 留下当前的小圆圈的current类名
ol.children[circle].className = 'current';
}
// 10.自动播放轮播图
var timer = setInterval(function () {
// 手动调用点击事件
arrow_r.click();
},2000);
})JS 动画函数封装 animate.js
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft === target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback(); // 左侧有参数传进来嘛? 结果为true, 再执行右边,调用回调函数(短路运算符),为假直接跳过
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}图片素材：
hi，这是我用百度网盘分享的内容~复制这段内容打开「百度网盘」APP即可获取
链接:https://pan.baidu.com/s/1Z6nJpUYmMPbRiN2JbCZKyw
提取码:2u8s
文件排布 ：
声明：内容源自B站up“黑马程序员”pink老师。
全部评论 (0)
还没有任何评论哟~