品优购首页——网页轮播图
2024-06-04 04:21:08
效果图
首页文件 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="data: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="data: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>|<ahref="#">手机品优购</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a href="#">品优购社区</a>|<ahref="#">品优购公益</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;!importantheight: 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++) {// 创建一个小livar 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和circlenum = index;circle = index;animate(ul, -index * focusWidth);})}// 把ol里面的第一个小li设置类名为 currentol.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; //索引号比获得的个数小1ul.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); // 输出结果就是4ol.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 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10obj.style.left = obj.offsetLeft + step + 'px';}, 15);
}图片素材：
hi，这是我用百度网盘分享的内容~复制这段内容打开「百度网盘」APP即可获取
链接:https://pan.baidu.com/s/1Z6nJpUYmMPbRiN2JbCZKyw
提取码:2u8s
文件排布 ：
声明：内容源自B站up“黑马程序员”pink老师。
品优购首页——网页轮播图相关推荐
- 前端初尝试---品优购首页（只用HTML和CSS）
品优购首页(只用HTML和CSS) 预览 主页HTML码 base.css common.css index.css 预览 主页HTML码 <!DOCTYPE html> <html ...
- 【JavaScript】缓动动画、网页轮播图
缓动动画 动画函数封装 1.1 动画实现原理 缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面 案例:京东侧边栏 ...
- web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
- HTML和CSS实现品优购首页
HTML和CSS实现品优购首页 效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
- layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容 本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
- Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 ...
- CSS——网易云音乐首页之轮播图的实现（完整版）
文章目录 前言 一.结构的分析 二.使用步骤 1.HTML结构 2.CSS样式 总结 前言 本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...
- 【JavaScript】网页轮播图
目录 HTML搭建 功能实现 小圆圈事件 左右按钮事件 自动播放 轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
- 滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图)
滚动轮播图+滚动轮播图定时器的添加(还原lol首页的轮播图) 每一步都有详细的注释: <!DOCTYPE html> <html lang="en"> &l ...
最新文章
- .NET Core 使用Dapper 操作MySQL
- 雪鹰领主服务器维护,《雪鹰领主》7月14日维护更新公告
- 1年内4次架构调整，谈Nice的服务端架构变迁之路--转
- 全球及中国食品色素行业供应前景与发展趋势研究报告2022版
- .net core实践系列之短信服务-架构优化
- Spring的Lifecycle
- GDB动态库搜索路径
- panic与recover函数
- 本科生如何系统地学习前端开发？
- Android开发笔记（一百零九）利用网盘实现云存储
- mysql多字段分库分表基因码_一文学会常用 MySQL 分库分表方案
- Python系统命令– os.system（），subprocess.call（）
- 联想微型计算机 y720,联想拯救者Y720评测：有颜值的实力派
- android studio jdy08,JDY-08模块 蓝牙4.0 BLE CC2541 airsync iBeacon 兼容arduino
- 五笔字型末笔识别码的真正含义
- Java中集合retainall_Collection中的之retainAll()方法的理解
- 浅谈学习的深度和广度
- Python - poetry（4）管理环境
- 几乎零基础的git入门级分享
- 如何提升数据思维能力？