添加微信好友
演示地址：
http://www.qieban.cn/html/xiyou
html代码：
[codesyntax lang=”div”]
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=750" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content=""> <meta name="format-detection" content="telephone=no"> <title>首页15_12_25 </title> <link rel="stylesheet" href="css/glide.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/lc.css"> </head> <body> <div class="layout"> <div class="header"> <h2>西柚</h2> <div class="left"> <a href="#" class="ico-prev"></a> </div> <div class="right"> <a href="#" class="ico-nav"></a> </div> </div> <div class="m-home-nav"> <ul> <li class="selected"><a href="#">精 选</a></li> <li><a href="#">品 牌</a></li> <li><a href="#">品 类</a></li> <li><a href="#">秀 场</a></li> </ul> </div> <div class="m-home-slide"> <ul class="slides"> <li class="slide"> <a href="#"><img src="imgs/lc1.jpg"/></a> </li> <li class="slide"> <a href="#"><img src="imgs/lc1.jpg"/></a> </li> <li class="slide"> <a href="#"><img src="imgs/lc1.jpg"/></a> </li> </ul> </div> <div class="m-home-best"> <div class="m-home-best-hd"> <h3>今 日 头 牌</h3> <h4>HI,THE BEST</h4> </div> <div class="m-home-best-bd"> <ul> <li class="selected"> <div class="img"> <img src="imgs/lc2.jpg"/> <em>荐</em> <h4>VOL.21 <big>LEO</big></h4> </div> <div class="txt"> <h2><a href="#">¥12345</a></h2> <h4>国内专柜价 ¥12345</h4> <h3>WEEKENDER/假日旅行者</h3> <span class="ico-love"></span> </div> </li> <li> <div class="img"> <img src="imgs/lc3.jpg"/> <em>荐</em> <h4>VOL.22<big>大美</big></h4> </div> <div class="txt"> <h2><a href="#">¥12345</a></h2> <h4>国内专柜价 ¥12345</h4> <h3>WEEKENDER/假日旅行者</h3> <span class="ico-love"></span> </div> </li> </ul> </div> </div>
[/codesyntax]
css代码：
[codesyntax lang=”css”]
*{
margin: 0; padding: 0;
}
body {
font-size: 12px; color: #333333; background: #BABABA;
}
.layout {
width: 750px; overflow: hidden; margin: 0 auto; position: relative; background: #FFFFFF;
}
.layout1 {
padding-bottom: 120px;
}
.header {
height: 86px; background: #393a3f; position: relative;
}
.header h2 {
font-size: 30px; line-height: 86px; color: #FFFFFF; text-align: center;
}
.left {
height: 86px; position: absolute; left: 0; top: 0;
}
.left .ico-prev {
display:inline-block ; width: 94px; height: 66px; margin-top: 10px; background: url(../imgs/lc1.png) no-repeat center; border-right: #2b2c31 2px solid;
}
.right {
height: 86px; width: 90px; position: absolute; right: 0; top: 0;
}
.right .ico-nav {
display: block; height: 86px; width: 90px; background: url(../imgs/lc2.png) no-repeat center ;
}
.m-home-nav{
height: 100px; text-align: center;
}
.m-home-nav ul {
display: inline-block; margin-top: 21px;
}
.m-home-nav ul li {
float: left; width: 78px; margin: 0 37px; /*font-family: "榛戜綋"; */font-size: 32px; text-align: center;
}
.m-home-nav ul li a {
display: block; color: #262626; line-height: 62px; text-decoration: none;
}
.m-home-nav ul li.selected {
border-bottom:1px solid #f44165; color: #f44165;
}
.g-menu {
display: block; position: fixed; top: 142px; left: 50%; margin-left: -375px;
}
.g-menu li {
width: 86px; overflow: hidden; box-shadow: 0 -2px 2px #ccc inset; position: relative;
}
.g-menu li a {
display: block; width: 86px; height: 80px; background-color: rgba(0,0,0,0.4); background-position: center; background-repeat: no-repeat;
}
.g-menu li:nth-child(1) a {
background-image: url(../imgs/lc3.png);
}
.g-menu li:nth-child(2) a {
background-image: url(../imgs/lc4.png);
}
.g-menu li:nth-child(3) a {
background-image: url(../imgs/lc5.png);
}
.g-menu li:nth-child(4) a {
background-image: url(../imgs/lc6.png);
}
.g-menu li sup {
display: block; width: 28px; height: 28px; border-radius: 100%; background: #F44165; position: absolute;right: 8px; top: 16px; text-align: center; color: #FFFFFF; font-size: 14px; line-height: 2;
}
.m-home-slide {
height: 420px; overflow: hidden; position: relative;
}
.m-home-slide .slides {
width: 999999px;
}
.m-home-slide .slide {
float: left; width: 750px; height: 420px;
}
.m-home-slide .slide img{
width: 750px; height: 420px;
}
.m-home-slide .slider-arrows {
display: none;
}
.m-home-best-hd {
height: 120px; text-align: center; position: relative;
}
.m-home-best-hd h3 {
font-size: 24px; color: #3f3f3f; line-height: 1; padding-bottom: 4px; padding-top: 32px;
}
.m-home-best-hd h4 {
display: inline-block; font-size: 18px; color: #FFFFFF; line-height: 30px; width: 132px; background: #3f3f3f;
}
.m-home-best-hd:before {
content: ""; width: 189px; height: 19px; border-top: 1px solid #f44165; border-left: 1px solid #f44165; position:absolute; top:44px; left: 99px;
}
.m-home-best-hd:after {
content: ""; width: 189px; height: 19px; border-top: 1px solid #f44165; border-right: 1px solid #f44165; position:absolute; bottom:28px; right: 99px;
}
.m-home-best-bd {
height: auto; overflow: hidden;
}
.m-home-best-bd ul {
width: 732px; margin: 0 auto;
}
.m-home-best-bd li {
float: left; height: auto; overflow: hidden; position: relative; margin: 0 11px 36px 11px;
}
.m-home-best-bd li .img img {
width: 344px; height: 344px;
}
.m-home-best-bd li .img em {
width: 25px; height: 25px; background: #FFFFFF; font-size: 20px; font-style: none; line-height: 25px; color: #010101; text-align: center; position: absolute; top: 10px; right: 70px; font-style: normal !important;
}
.m-home-best-bd li .img h4 {
width: 58px; height: 50px; padding-top: 8px; background: #282623; border: 1px solid #FFFFFF; position: absolute; top: 10px; right: 10px; font-size: 14px; line-height: 1; color: #FFFFFF; text-align: center;
}
.m-home-best-bd li .img h4 big {
display: inline-block; font-size: 24px; line-height: 1; color: #FFFFFF; padding-top:5px;
}
.m-home-best-bd li .txt {
height: auto; overflow: hidden; position: relative; text-align: left;
}
.m-home-best-bd li .txt h2 {
font-size: 30px; line-height: 1; padding-top: 24px;
}
.m-home-best-bd li .txt h2 a {
color: #f44165; text-decoration:none;
}
[/codesyntax]
文章为原创或者来自于互联网，转载请注明来源，如果文章有侵权请联系，我们会及时删除。
