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="#"> </a></dd>
<dd class="mgb20"><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="#">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;
}
