成都苗方清颜

切版网专注网页切版服务


演示地址:

http://www.qieban.cn/html/xiyou

html代码:

<!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>

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;
}
免费索取报价