前端匡威网站布局

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="CSS/style.css">
</head>
<body><!-- 这是顶部 --><div class="clearfix"><div class="clearfix1"><div class="logo1"><a href="#"></a></div><div class="box"><a href="#" class="box-h"><img src="img/图标/help.png" alt="帮助"></a></div><div class="box1"><a href="#" class="box-s"><img src="img/图标/搜索1.png" alt="搜索"></a></div><div class="box2"><a href="#" class="box-t"><img src="img/图标/聊天.png" alt="聊天"></a></div><div class="box3"><span class="box-p">0</span><div class="shopping"><a href="#">购物车</a></div></div><div class="box4"><div><a href="#" class="box-l"><img src="img/图标/头像1.png" alt="登陆/注册"></a></div><div class="login"><a href="#" class="log"><span>登录</span></a><span class="log2">/</span><a href="#" class="log1"><span>注册</span></a></div></div></div></div><div class="navigation-content"><ul class="nav"><li><a href="#" class="abc">男的<i></i></a></li><li><a href="#" class="abc">女的<i></i></a></li><li><a href="#" class="abc">儿童<i></i></a></li><li><a href="#">型人搭配<i></i></a></li><li><a href="#">联名合作款<i></i></a></li><li><a href="#">店铺分布<i></i></a></li></ul></div><div class="pagecontent"><div class="homenotice" style="text-align: center;"><a href="#" class="homenotice_1">尊敬的顾客您好，我们店铺是不会泄露您的消费信息的，请放心。另外我们也不会要求获取、收集、使用任何与消费者金融消费类（如：信用卡）信息，如果接到以上信息电话，是属于诈骗电话，请勿相信，以防钱财损失。如您对订单有疑问，请联系在线客服。</a></div><!-- 轮播图 --><div class="slide"><img src="img/HELLOKITTY_PC_BANNER_1213.jpg" alt="匡威"></div><div class="menu" style="text-align: center;"><div class="menu1"><ul class="rslides_title" ><li class="a" k>Hello Kitty</li><li class="k">Cherry Gun</li><li class="k">Miley Cyrus</li><li class="k">Mountain Club</li></ul></div></div><!-- 产品信息 --><div class="brand-segments" style="margin-top: 80px;"><div class="category-title"><h1>热卖单品</h1></div><div class="clearfix2"><div class="bs-container-1"><a href="#" class="bs-title-1">男的踩的</a><a href="#"><img src="img/top_02_1203.jpg" alt="男鞋"></a></div><div class="bs-container-1"><a href="#" class="bs-title-1">女的踩的</a><a href="#"><img src="img/top_01_1203.jpg" alt="女鞋"></a></div><div class="bs-container-1"><a href="#" class="bs-title-1">穿的</a><a href="#"><img src="img/top_01_05.jpg" alt="衣服"></a></div><div class="bs-container-1"><a href="#" class="bs-title-1">戴的</a><a href="#"><img src="img/top_01_07.jpg" alt="衣服"></a></div></div><div class="brand-menu-container"><div class="brand-menu" style="left: 12%"></div></div><!-- 动画没写,目前是静止的 --><div class="list-slide-container"><div class="l-s-grid"><div class="product-list-slide" style="height: 300px;"><dl><dt><a href="#"><img src="img/162434C101_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70162434C101天然象牙" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70</a></dd><dd class="p-l-price">¥699.00</dd></dl><dl><dt><a href="#"><img src="img/162372C101_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70162372C101天然象牙" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70</a></dd><dd class="p-l-price">¥699.00</dd></dl><dl><dt><a href="#"><img src="img/162357C102_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70 Tech Hiker162357C102白色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70 Tech Hiker</a></dd><dd class="p-l-price">¥799.00</dd></dl><dl><dt><a href="#"><img src="img/162471C001_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70162471C001黑色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70</a></dd><dd class="p-l-price">¥699.00</dd></dl></div></div><div class="l-s-grid-noborder"><div class="product-list-slide" style="height: 300px;"><div class="brand-product search-product-list clearfix5"><dl><dt><a href="#"><img src="img/162376C048_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70162376C048石灰色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70</a></dd><dd class="p-l-price">¥639.00</dd></dl><dl><dt><a href="#"><img src="img/162602C607_1B_NEW.png" alt="匡威converse 【男女同款】One Star162602C607紫红色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】One Star</a></dd><dd class="p-l-price">¥639.00</dd></dl><dl><dt><a href="#"><img src="img/162542C501_1B_NEW.png" alt="匡威converse 【男女同款】One Star162542C501深紫色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】One Star</a></dd><dd class="p-l-price">¥599.00</dd></dl><dl><dt><a href="#"><img src="img/162543C486_1B_NEW.png" alt="匡威converse 【男女同款】One Star162543C486浅蓝色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】One Star</a></dd><dd class="p-l-price">¥599.00</dd></dl></div></div></div><div class="viewAll-button"><a href="#">查看所有戴的最新商品</a></div></div></div><div class="brand-segments" style="margin-top: 80px;"><div class="category-title"><h1>新品热荐</h1></div><div class="new-products"><div class="l-s-grid"><div class="product-list-slide" style="height: 300px;"><dl><dt><a href="#"><img src="img/162434C101_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70162434C101天然象牙" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70</a></dd><dd class="p-l-price">¥669.00</dd></dl><dl><dt><a href="#"><img src="img/162376C048_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70162376C048石灰色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70</a></dd><dd class="p-l-price">¥639.00</dd></dl><dl><dt><a href="#"><img src="img/162394C200_1B_NEW.png" alt="匡威converse 【男女同款】Chuck 70162394C200巧克力色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】Chuck 70</a></dd><dd class="p-l-price">¥669.00</dd></dl><dl><dt><a href="#"><img src="img/162545C001_1B_NEW.png" alt="匡威converse 【男女同款】One Star162545C001黑色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男女同款】One Star</a></dd><dd class="p-l-price">¥599.00</dd></dl></div></div></div><div class="l-s-grid-noborder"><div class="product-list-slide" style="height: 300px;"><div class="brand-product search-product-list clearfix5"><dl><dt><a href="#"><img src="img/10007147810_1B_NEW.png" alt="匡威converse 【男的】Converse Waffle Pullover Hoodie10007147810橙色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Waffle Pullover</a></dd><dd class="p-l-price">¥499.00</dd></dl><dl><dt><a href="#"><img src="img/10006883322_1B_NEW.png" alt="匡威converse 【男的】Converse Down Bomber10006883322军绿色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Down Bomber</a></dd><dd class="p-l-price">¥1119.00</dd></dl><dl><dt><a href="#"><img src="img/10006875205_1B_NEW.png" alt="匡威converse 【男的】Converse Sideline Down Jacket10006875205卡其色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Sideline Down Jacket</a></dd><dd class="p-l-price">¥1539.00</dd></dl><dl><dt><a href="#"><img src="img/10007744035_1B_NEW.png" alt="匡威converse 【男的】Converse Star Chevron Graphic Pullover Hoodie10007744035纹理灰色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Star Chevron Graphic Pullover Hoodie</a></dd><dd class="p-l-price">¥439.00</dd></dl></div></div></div><div class="l-s-grid-noborder"><div class="product-list-slide" style="height: 300px;"><div class="brand-product search-product-list clearfix5"><dl><dt><a href="#"><img src="img/10007147810_1B_NEW.png" alt="匡威converse 【男的】Converse Waffle Pullover Hoodie10007147810橙色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Waffle Pullover</a></dd><dd class="p-l-price">¥499.00</dd></dl><dl><dt><a href="#"><img src="img/10006883322_1B_NEW.png" alt="匡威converse 【男的】Converse Down Bomber10006883322军绿色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Down Bomber</a></dd><dd class="p-l-price">¥1119.00</dd></dl><dl><dt><a href="#"><img src="img/10006875205_1B_NEW.png" alt="匡威converse 【男的】Converse Sideline Down Jacket10006875205卡其色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Sideline Down Jacket</a></dd><dd class="p-l-price">¥1539.00</dd></dl><dl><dt><a href="#"><img src="img/10007744035_1B_NEW.png" alt="匡威converse 【男的】Converse Star Chevron Graphic Pullover Hoodie10007744035纹理灰色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Star Chevron Graphic Pullover Hoodie</a></dd><dd class="p-l-price">¥439.00</dd></dl></div></div></div><div class="l-s-grid-noborder"><div class="product-list-slide" style="height: 300px;"><div class="brand-product search-product-list clearfix5"><dl><dt><a href="#"><img src="img/10007147810_1B_NEW.png" alt="匡威converse 【男的】Converse Waffle Pullover Hoodie10007147810橙色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Waffle Pullover</a></dd><dd class="p-l-price">¥499.00</dd></dl><dl><dt><a href="#"><img src="img/10006883322_1B_NEW.png" alt="匡威converse 【男的】Converse Down Bomber10006883322军绿色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Down Bomber</a></dd><dd class="p-l-price">¥1119.00</dd></dl><dl><dt><a href="#"><img src="img/10006875205_1B_NEW.png" alt="匡威converse 【男的】Converse Sideline Down Jacket10006875205卡其色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Sideline Down Jacket</a></dd><dd class="p-l-price">¥1539.00</dd></dl><dl><dt><a href="#"><img src="img/10007744035_1B_NEW.png" alt="匡威converse 【男的】Converse Star Chevron Graphic Pullover Hoodie10007744035纹理灰色" style="display: block;"></a></dt><dd class="p-l-name"><a href="#">【男的】Converse Star Chevron Graphic Pullover Hoodie</a></dd><dd class="p-l-price">¥439.00</dd></dl></div></div></div></div><div class="homecontent-bottom" style="margin-top: 300px;"><div class="specialfeature"><div class="specialfeature-title"><img src="img/logo-icon.png" alt="图标"><span>街头先型</span></div><div class="specialfeature-main"><div class="specialfeature-content product-left"><a class="product" href="#"><img src="img/DEC-UPDATE-01HPTouts-CT70-1201.jpg" alt="CHUCK 70 PATENT LEATHER"><div class="mask" style="display: none;"></div></a><a class="product-text" href="#"><h1>CHUCK 70 PATENT LEATHER</h1><p>Chuck Taylor All Star’70延续70鞋款的经典鞋型设计，偏窄鞋头与修长鞋型上脚优雅显瘦。同时鞋面采用皮革材质，提升了品质感。沿用至今的复古大鞋舌，不对称鞋头挡泥板与光亮的鞋围条细节，加厚海绵鞋垫提升了舒适度。</p></a><div class="buy-button"><a class="product-buy" href="#">查看更多</a></div></div><div class="specialfeature-content product-right"><a class="product" href="#"><img src="img/DEC-UPDATE-02HPTouts-CTAS-1201.jpg" alt="CHUCK TAYLOR ALL STAR X HELLO KITTY"><div class="mask" style="display: none;"></div></a><a class="product-text" href="#"><h1>CHUCK TAYLOR ALL STAR X HELLO KITTY</h1><p>以经典Chuck Taylor All Star为蓝本，鞋面采用纺织织物材质，舒适透气。鞋身时尚喷绘艺术感图案，星空配色，轻松为你的休闲look增添亮点。鞋侧边具有标志性的Chuck Tayor All Star园形鞋标，彰显品牌调性。</p></a><div class="buy-button"><a class="product-buy" href="#">查看更多</a></div></div></div></div><div class="specialfeature1"><div class="specialfeature-title1"><img src="img/logo-icon.png"><span>至酷精选 玩转潮流</span></div><div class="specialfeature-main-two"><div class="specialfeature-content specialfeature-two"><a class="product1" href="#"><img src="img/DEC-UPDATE-03BTouts-1FB-1201.jpg" alt="初生球场 蹦造街头"><div class="mask" style="display: none;"></div></a><a class="product-text" href="#"><h1>初生球场 蹦造街头</h1><p>经典复古篮球鞋FASTBREAK，鞋面采用纺织织物和牛皮革拼接制成，不仅透气舒适又硬挺有型。标志性的星箭Logo，彰显品牌调性。中帮鞋款，舒适的鞋围增加了鞋子穿着的舒适度。</p></a><div class="buy-button1"><a class="product-buy1" href="#">查看更多</a></div></div><div class="specialfeature-content specialfeature-two1"><a class="product1" href="#"><img src="img/星星衣服.jpg" alt="HELLO KITTY ICON 相遇"><div class="mask" style="display: none;"></div></a><a class="product-text" href="#"><h1>HELLO KITTY ICON 相遇</h1><p>拉链外套，让整体焕发出新的生命力，年轻感强烈。采用轻薄材质面料，轻质可打包，穿着柔软舒适，增添几分华丽气息。</p></a><div class="buy-button1"><a class="product-buy1" href="#">查看更多</a></div></div><div class="specialfeature-content specialfeature-two1"><a class="product1" href="#"><img src="img/帽子.jpg" alt="HELLO KITTY 点睛配饰"><div class="mask" style="display: none;"></div></a><a class="product-text" href="#"><h1>HELLO KITTY 点睛配饰</h1><p>拥有多功能的内部口袋及电脑插袋，满足工作与休闲的双重需求。可调节软垫背带，赋予舒适的背包体验。</p></a><div class="buy-button1"><a class="product-buy1" href="#">查看更多</a></div></div></div></div><div class="information attention" style="width: 1520px;height: 359px;"><h1>关注CONVERSE</h1><p>Converse同时活跃在各类社交网络平台，点击下列你所喜爱的常用社交平台，密切关注Converse的最新产品与资讯。</p><div class="information-link clearfix6"><a class="weibo" href="#">微博</a><a class="weixin" href="#">微信</a><a class="QQ" href="#">qq</a><a class="renren" href="#">人人</a><a class="douban" href="#">豆瓣</a></div></div></div></div>	<!-- 这是底部 --><div class="sitemap clearfix6" style="margin-top: 75px;"><div class="category-title"><dl><dt><a href="#">男的</a></dt><dd><a href="#">CHUCK TAYLOR ALL STAR</a></dd><dd><a href="#">CONVERSE CONS</a></dd><dd><a href="#">JACK PURCELL</a></dd><dd class="mgb20"><a href="#">CHUCK II</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><a href="#">女的</a></dt><dd><a href="#">CHUCK TAYLOR ALL STAR</a></dd><dd><a href="#">CONVERSE CONS</a></dd><dd><a href="#">JACK PURCELL</a></dd><dd class="mgb20"><a href="#">CHUCK II</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><a href="#">儿童</a></dt><dd><a href="#">CHUCK TAYLOR ALL STAR</a></dd><dd><a href="#">CONVERSE CONS</a></dd><dd><a href="#">&nbsp</a></dd><dd class="mgb20"><a href="#">&nbsp</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><a href="#">GLOBA</a></dt><dd><a href="#">CHUCK TAYLOR ALL STAR</a></dd></dl><dl><dt><a href="#">我的账户</a></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><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><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><a href="#">NIKE</a></dt><dd><a href="#">NIKE+</a></dd><dd><a href="#">JORDAN</a></dd></dl></div></div><div class="footer-wrapper"><div></div></div>
</body>
</html>

CSS

*{margin: 0;padding: 0;
}
.clearfix{width: 1520px;height: 80px;background-color: #000;
}
.clearfix1{width: 1376px;height: 50px;margin: 0 auto;
}
.logo1 a{width: 161px;height: 19px;float: left;background-image: url(../img/log1.png);position: relative;margin-top: 30px;
}
.box{width: 80px;height: 33px;float: right;top: 45%;position: relative;
}
.box-h{float:right;
}
.box1{width: 80px;height: 33px;float: right;top: 45%;position: relative;
}
.box-s{float: right;
}
.box2{width: 80px;height: 33px;float: right;top: 45%;position: relative;
}
.box-t{float: right;
}
.box3{width: 116px;height: 33px;float: right;top: 45%;position: relative;
}
.box-p{background-image: url(../img/图标/购物车.png);color: #fff;position: absolute;text-align: center;font-size: 18px;width: 30px;height: 31px;line-height: 28px;right:0px;top:50%;margin-top: -15px;
}
.shopping{height: 14.4px;width: 36px;margin-top: 5%;margin-left: 30%;
}
.shopping a{color: #fff;font-size: 12px;text-decoration: none;text-align: center;
}
.shopping a:hover{text-decoration: underline;
}
.box4{width: 148px;height: 33px;float: right;top: 45%;position: relative;
}
.box-l{float:right;
}
.login{height: 14.4px;width: 100px;margin-top: 5%;margin-left: 25px;/* margin-right: -20%; */
}
.log{margin-right: 6px;color: #fff;font-size: 12px;text-decoration: none;text-align: center;
}
.log span:hover{text-decoration: underline;
}
.log2{color: #fff;font-weight: bold;
}
.log1{margin-left: 6px;color: #fff;font-size: 12px;text-decoration: none;text-align: center;
}
.log1 span:hover{text-decoration: underline;
}
.navigation-content{width: 1520px;height: 50px;background-color: rgb(70,70,70);text-align: center;
}
.nav{list-style: none;width: 806px;margin: 0 auto;overflow: hidden;
}
.nav li{height: 45px;float: left;width:16%;position: relative;
}
.nav a{display: block;width: 100%;text-align: center;padding: 5px 0;text-decoration: none;color: #fff;font-size:18px;/*font-weight: bold;*/
}
.abc:hover{text-decoration: underline;
}
.nav li a i{border-color: white transparent transparent;border-right: 6px solid transparent;border-style: solid;border-width: 6px;position: absolute;top: 35px;left: 45%;
}
.pagecontent{width: 1519px;
}
.homenotice{width: 1520px;height: 12px;padding: 15px 0;
}
.homenotice_1{color: #000;font-size: 12px;text-decoration: none;
}
.slide{width: 1520px;height: 593px;background-color: red;
}
.slide img{width: 100%;height: 100%;
}
.menu{width: 100%;height: 36px;position: absolute;z-index:10;
}
.menu1{width: 30%;margin: 8px auto;
}
.rslides_title{list-style: none;float: left;margin-left: 8px;position: absolute;z-index: 10;background: 0;margin-top: 8px;margin-bottom: 8px;text-align: center;
}
.rslides_title li {border-top: 1px solid #fff;color: #999;cursor: pointer;display: inline-block;*display: inline;zoom: 1;font-size: 15px;height: 15px;padding: 5px 0;margin-left: 8px;
}
.brand-segments{width: 1000px;height: 1087px;/*background-color: yellow;*/margin: 35px auto 0;
}
.category-title{height: 30px;margin: 20px auto;max-width: 1000px;position: relative;text-align: center;
}
.category-title::before{background-color: #b7b7b7;content: "";height: 1px;left: 1.5%;position: absolute;top: 15px;width: 97%;
}
h1{/*background: none repeat scroll 0 0 #fff;*/display: inline-block;height: 30px;line-height: 30px;margin: 0 auto;padding: 0 4%;position: relative;font-size: 30px;
}
.clearfix2{margin-left: 37px;
}
.clearfix2::after{clear:both;content: "";display: block;font-size: 0;height: 0;visibility: hidden;
}
.bs-container-1{margin-top: 40px;width: 230px;float: left;display: inline;text-align: center;
}
.bs-title-1{font-size: 24px;line-height: 30px;color: #333;outline: medium none;overflow: hidden;text-decoration: none;
}
.bs-title-1:hover{text-decoration: underline;
}
.brand-menu-container::before{width: 97%;background-color: #b7b7b7;height: 1px;position: absolute;top: 0;left: 1.5%;content: "";
}
.brand-menu-container{width: 97%;margin-top: 20px;height: 20px;position: relative;padding: 0 1.5%;
}
.brand-menu{width: 39px;height: 21px;position: absolute;background: url(../img/active.png)no-repeat scroll 0 0 transparent;top:0;margin-left: -20px;
}
.list-slide-container{width: 1000px;height: 727px;/*background-color: red;*/
}
.l-s-grid{border-bottom: 1px dotted #b7b7b7;display: inline-block;margin: 20px auto 0;padding-bottom: 19px;position: relative;width: 100%;
}
.product-list-slide{width: 100%;position: relative;
}
.product-list-slide dl{width: 25%;height: 300px;float: left;position: relative;font-size: 14px;box-sizing: border-box;
}
.product-list-slide dt{width: 165px;height: 180px;margin: 0 auto;position: relative;padding-top: 10px;
}
.p-l-name{height: 55px;margin-bottom: 5px;text-align: center;width: 100%;line-height: 10px;
}
.p-l-name a{color: #333;outline: medium none;overflow: hidden;text-decoration: none;
}
img{max-width: 100%;height: auto;
}
.p-l-price{font-weight: bold;width: 100%;text-align: center;line-height: 18px;
}
.l-s-grid-noborder{display: inline-block;margin: 20px auto 0;padding-bottom: 19px;position: relative;width: 100%
}
.product-list-slide{width: 100%;position: relative;
}
.clearfix5{height: 80px;
}
.clearfix5:after{clear: both;content: "";display: block;font-size: 0;height: 0;visibility: hidden;
}
.brand-product{width: 100%
}
.search-product-list{max-width: 1000px;height: auto;position: relative;margin: 0 auto;overflow: hidden;
}
.search-product-list dl{width: 25%;height: 300px;float: left;position: relative;font-size: 14px;box-sizing: border-box;
}
.search-product-list dt{width: 165px;height: 180px;margin: 0 auto;position: relative;padding-top: 10px;
}
.search-product-list a{color: #333;outline: medium none;overflow: hidden;text-decoration: none;
}
.viewAll-button{width: 1000px;height: 48px;margin: 0 auto;text-align: center;
}
.viewAll-button a{line-height: 48px;font-size: 16px;height: 48px;padding: 0 25px;border: 1px solid #000;text-align: center;display: inline-block;width: 42%;background-color: #000;color: #fff;box-sizing: border-box;text-decoration: none;outline: medium none;overflow: hidden;}
.viewAll-button a:after{background: url(../img/雪碧图.png) no-repeat scroll -9px -163px transparent;width: 20px;height: 30px;display: inline-block;vertical-align: middle;margin-left: 15px;content: "";
}
.viewAll-button a:hover{color: #000;background-color: #fff;
}
.viewAll-button a:hover:after{-webkit-transition-duration: .3s;background-position: -42px -163px
}
.homecontent-bottom{width: 100%;height: 1610px;margin: 80px auto;overflow: hidden;/*background-color: green;*/
}
.specialfeature{max-width: 1000px;margin: 40px auto 0;height: 611px;
}
.specialfeature-title{width: 100%;height: 40px;background: #464646;color: #fff;font-size: 18px;
}
.specialfeature-title img{margin: 10px 11px 0 20px;float: left;
}
.specialfeature-title span{margin: 10px 0 0 0;float: left;
}
.specialfeature-main{width: 100%;height: auto;margin: 20px auto 0;border: 0 solid #fff;
}
.specialfeature-content{width: 48.8%;height: auto;
}
.product-left{float: left;margin-left: 0;
}
.product{border: 1px solid #b7b7b7;width: 100%;height: 366px;display: block;position: relative;color: #333;outline: medium none;overflow: hidden;text-decoration: none;
}
.mask{position: absolute;top:0;left: 0;background: url(../img/mask.png) repeat;height: 100%;text-align: center;
}
.product-text{color: #000;outline: medium none;overflow: hidden;text-decoration: none;
}
.product-text h1{font-size: 20px;margin: 17px 0 17px 0;
}
.product-text h1:hover{text-decoration: underline;
}
.product-text p{line-height: 20px;height: auto;font-size: 12px;
}
.buy-button{margin-top: 16px;
}
.product-buy{line-height: 48px;font-size: 16px;height: 48px;padding: 0 3px 0 7px;text-align: center;display: inline-block;width: 38%;background-color: #000;color: #fff;text-decoration: none;
}
.product-buy a{outline: medium none;overflow: hidden;
}
.product-buy:after{background: url(../img/雪碧图.png) no-repeat scroll -9px -163px transparent;width: 20px;height: 30px;display: inline-block;vertical-align: middle;margin-left: 13px;content: "";
}
.product-right{float: right;margin-right: 2px;
}
.specialfeature1{max-width: 1000px;margin: 40px auto 0;height: 479px;
}
.specialfeature-title1{width: 100%;height: 40px;background: #464646;color: #fff;font-size: 18px;
}
.specialfeature-title1 img{margin: 10px 11px 0 20px;float: left;
}
.specialfeature-title1 span{margin: 10px 0 0 0;float: left;
}
.specialfeature-main-two{height: auto;width: 100%;margin: 20px auto 0;border: 0 solid #f00;
}
.specialfeature-two:first-child{margin-left: 0;
}
.specialfeature-two{float: left;width: 32%;
}
..product1{border: 1px solid #b7b7b7;width: 100%;height: 240px;display: block;position: relative;color: #333;outline: medium none;overflow: hidden;text-decoration: none;
}
.produc1t-text{color: #000;outline: medium none;overflow: hidden;text-decoration: none;
}
.product1-text h1{font-size: 20px;margin: 17px 0 17px 0;
}
.product1-text h1:hover{text-decoration: underline;
}
.product1-text p{line-height: 20px;height: auto;font-size: 12px;
}
.buy-button1{margin-top: 6px;
}
.product-buy1{line-height: 42px;font-size: 18px;height: 42px;padding: 0;border: 0 solid #000;text-align: left;display: inline-block;width: 33%;background-color: #fff;color: #333;text-decoration: underline;
}
.product-buy1:after{background: url(../img/箭头222.png) no-repeat scroll -20px -1px transparent;width: 20px;height: 30px;display: inline-block;vertical-align: middle;margin-left: 13px;content: "";
}
.specialfeature-two1{float: left;width: 32%;margin-left: 1.92%;
}
.information{background: #464646;width: 100%;color: #fff;text-align: center;
}
.attention{height: auto;margin: 80px 0 0 0;
}
.information h1{font-size: 30px;margin: 78px auto 35px;display: inline-block;
}
.information p{font-size: 16px;line-height: 24px;
}
.homecontent-bottom .attention .information-link {margin: 37px auto 0;height: auto;width: 525px;text-align: center;padding-bottom: 80px;
}
.clearfix6:after{clear: both;content: "";display: block;font-size: 0;height: 0;visibility: hidden;
}
.information-link .weibo {background-position: -75px 0;
}
.information-link .weixin{background-position: -75px -75px;
}
.information-link .QQ{background-position: -75px -150px;
}
.information-link .renren{background-position: -75px -225px;
}
.information-link .douban{background-position: -75px -300px;
}
.information-link a {background: url(../img/图标/联系方式.png) no-repeat transparent;width: 75px;height: 75px;display: block;float: left;text-indent: -9999px;margin: 0 15px;padding: 0;
}
a {/*color: #333;*/outline: medium none;overflow: hidden;text-decoration: none;
}
.sitemap{width: 1000px;height: 610px;background-color: pink;margin: 35px auto 0;
}
.category-title:before{background-color: #b7b7b7;content: "";height: 1px;left: 1.5%;position: absolute;top: 15px;width: 97%;
}
.sitemap dl {width: 24%;text-align: center;display: inline-block;vertical-align: top;min-height: 280px;
}
.sitemap dt{margin-bottom: 20px;
}
.sitemap dl a {line-height: 20px;
}
.sitemap dt a {font-size: 16px;font-weight: bold;
}
a {color: #333;outline: medium none;overflow: hidden;text-decoration: none;
}
.sitemap dd.mgb20 {margin-bottom: 20px;
}
.footer-wrapper{width: 100%;height: 140px;background-color: #000;
}

在这里插入图片描述