首页 > 其他 > 详细

日常DEMO

时间：2017-06-21 10:26:55      阅读：267      评论：0      收藏：0      [点我收藏+] 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>手机商城</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/swiper.min.css">
	
</head>
<body>
    <!--头部-->
    <div class="heade">
    	<div class="header-l"><span>宿迁市宿豫区</span><img src="img/6.png"  /></div>
    	<div class="header-inp"><img src="img/7.png"  /><span>输入店铺、商品等</span></div>
    	<div class="header-r"><img src="img/5.png"/><span>我的</span></div>
    </div>
    <div class="clear"></div>
    <!--轮播图-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/z1.jpg"/></div>
            <div class="swiper-slide"><img src="img/z2.jpg"/></div>
            <div class="swiper-slide"><img src="img/z3.jpg"/></div>
            <div class="swiper-slide"><img src="img/z4.jpg"/></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!--服务-->
	<div class="serve">
		<ul>
			<li>
				<div style="background: #ea8a57;"><img src="img/8.png"  /></div>
				<span>餐饮住宿</span>
			</li>
			<li>
				<div style="background: #cd9cc9;"><img src="img/9.png"  /></div>
				<span>汽车美容</span>				
			</li>
			<li>
				<div style="background: #76c0d9;"><img src="img/10.png"  /></div>
				<span>生活服务</span>
			</li>
			<li>
				<div style="background: #7687f1;"><img src="img/11.png"  /></div>
				<span>休闲娱乐</span>
			</li>
			<li>
				<div style="background: #f56f6c;"><img src="img/12.png"  /></div>
				<span>教育培训</span>
			</li>
			<li>
				<div style="background: #66ccee;"><img src="img/13.png"  /></div>
				<span>家具建材</span>
			</li>
			<li>
				<div style="background: #eea83b;"><img src="img/14.png"  / style="width: 20%;"></div>
				<span>酒水饮料</span>
			</li>
			<li>
				<div style="background: #7687f1;"><img src="img/15.png"  /></div>
				<span>婚庆婚纱</span>
			</li>
		</ul>
	</div>
	<div class="clear"></div>
	<div class="tips">
		<img src="img/2.png"  />
		<img src="img/3.png"  />
		<img src="img/4.png"  />
	</div>
	<div class="tips1">
		<img src="img/16.png"  />
	</div>
	<div class="clear"></div>
	<div class="foot">
		<div class="foot-t">
			<div></div><span>综合推荐</span>
		</div>
		<div class="clear"></div>
		<div class="foot-c">
			<img src="img/1.png"  / class="foot-c-img">
			<div class="foot-c-r">
				<p style="font-size: 20px;margin-top: 5px;">呦呦奶茶</p>
				<p style="color: #979797;font-size: 11px;">销售各类散茶、品牌茶叶、茶具。全品一<br />展示茶叶茶具批发商</p>
				<div>
					<span style="color: #525252;font-family: ‘微软雅黑‘;float: left;">剩余领取<span style="color: #cc0530;font-weight: bold;">0</span>份</span>
					<img src="img/17.png"  / style="float: left;width: 20%;float: left;">
					<div style="float: right;">
						<img src="img/18.png"  / style="float: left;width: 20%;">
						<p style="float: left;font-size: 12px;">幸运红包</p>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="foot-c">
			<img src="img/1.png"  / class="foot-c-img">
			<div class="foot-c-r">
				<p style="font-size: 20px;margin-top: 5px;">呦呦奶茶</p>
				<p style="color: #979797;font-size: 11px;">销售各类散茶、品牌茶叶、茶具。全品一<br />展示茶叶茶具批发商</p>
				<div>
					<span style="color: #525252;font-family: ‘微软雅黑‘;float: left;">剩余领取<span style="color: #cc0530;font-weight: bold;">0</span>份</span>
					<img src="img/17.png"  / style="float: left;width: 20%;float: left;">
					<div style="float: right;">
						<img src="img/18.png"  / style="float: left;width: 20%;">
						<p style="float: left;font-size: 12px;">幸运红包</p>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="foot-c">
			<img src="img/1.png"  / class="foot-c-img">
			<div class="foot-c-r">
				<p style="font-size: 20px;margin-top: 5px;">呦呦奶茶</p>
				<p style="color: #979797;font-size: 11px;">销售各类散茶、品牌茶叶、茶具。全品一<br />展示茶叶茶具批发商</p>
				<div>
					<span style="color: #525252;font-family: ‘微软雅黑‘;float: left;">剩余领取<span style="color: #cc0530;font-weight: bold;">0</span>份</span>
					<img src="img/17.png"  / style="float: left;width: 20%;float: left;">
					<div style="float: right;">
						<img src="img/18.png"  / style="float: left;width: 20%;">
						<p style="float: left;font-size: 12px;">幸运红包</p>
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="foot-c">
			<img src="img/1.png"  / class="foot-c-img">
			<div class="foot-c-r">
				<p style="font-size: 20px;margin-top: 5px;">呦呦奶茶</p>
				<p style="color: #979797;font-size: 11px;">销售各类散茶、品牌茶叶、茶具。全品一<br />展示茶叶茶具批发商</p>
				<div>
					<span style="color: #525252;font-family: ‘微软雅黑‘;float: left;">剩余领取<span style="color: #cc0530;font-weight: bold;">0</span>份</span>
					<img src="img/17.png"  / style="float: left;width: 20%;float: left;">
					<div style="float: right;">
						<img src="img/18.png"  / style="float: left;width: 20%;">
						<p style="float: left;font-size: 12px;color: #525252;">幸运红包</p>
					</div>
				</div>
			</div>
		</div>
	</div>
    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper(‘.swiper-container‘, {
        pagination: ‘.swiper-pagination‘,
        paginationClickable: true,
        loop:true,
        autoplay: 3000,
    });
    </script>
</body>
</html>

　　

*{
	padding: 0px;
	margin: 0px;
}
li{
	list-style: none;
}
a{
	text-decoration: none;
}
.clear{
	clear: both;
}
.heade{
	width: 100%;
	height: 40px;
	display: block;
	background: #d22147;
}
@media only screen and (min-width:320px ) {
	.heade{
		height:55px;		
	}
}
.header-l{
	display:block;
	float: left;
	padding: 10px 0px;
	text-align: center;
}
@media only screen and (min-width:320px ) {
	.header-l{
		padding: 17px 0px;		
	}
}
.header-l span{
	color: #FFFFFF;
	font-family: "微软雅黑";
}
.header-l img{
	width: 10%;
	margin: 0 3px;
}
.header-inp{
	display: block;
	width: 44%;
	float: left;
	background: #ae3e56;
	border-radius: 7px;
	margin: 8px 0px ;
}

.header-inp img{
	width: 10%;
	/*display: block;*/
	padding: 8px 5px;
	float: left;
}
@media only screen and (min-width:320px ) {
	.header-inp img{
		padding: 10px 5px;
	}
}
.header-inp span{
	color: #e2c2c9;
	display: block;
	padding: 0px 0px;
	font-family: "微软雅黑";
}
@media only screen and (min-width:320px ) {
	.header-inp span{
		padding: 8px 0px;
	}
}
.header-r{
	display:block;
	float: left;
	padding:10px 0px ;
	text-align: center;
}
@media only screen and (min-width:320px ) {
	.header-r{
		padding:15px 0px ;
	}
}
.header-r img{
	width: 18%;
}
.header-r span{
	color: #FFFFFF;
	font-family: "微软雅黑";
}
/*轮播图*/
.swiper-slide img{
	width: 100%;
}
/*服务*/
.serve{
	width: 100%;
}
.serve ul{
	padding: 10px 5px;
}
.serve li{
	float: left;
	padding: 10px 15px ;
	text-align: center;
}
@media only screen and (min-width:320px ) {
	.serve li{
		padding: 10px 13px ;
	}
	html{
		font-size:12px;		
	}
}
@media only screen and (min-width:360px ) {
	.serve li{
		padding: 10px 15px ;
	}
	html{
		font-size:14px;		
	}
}
@media only screen and (min-width:375px ) {
	.serve li{
		padding: 10px 17px ;
	}
}
@media only screen and (min-width:412px ) {
	.serve li{
		padding: 10px 18px ;
	}
	html{
		font-size:16px;		
	}
}
.serve div{
	width: 45px;
	height: 45px;
	border-radius:25px;
	text-align: center;
	display: table-cell;
	vertical-align:middle;
 	*display: block;
}
.serve img{
	width: 50%;
	vertical-align:middle;
}
.serve span{
	font-size: 1em;
	display: block;
	text-align: center;
	margin: 5px 0 0 0;
	font-family: "微软雅黑";
}
.tips{
	width: 100%;
	padding: 10px 0;
}
.tips img{
	float: left;
	width: 33%;
}
.tips1 img{
	width: 100%;
}
.foot{
	width:100% ;
}
.foot-t{
	width: 100%;
	height: 30px;
	border-bottom: 1px solid #c1c0c5;
	float: left;
}
.foot-t div{
	width: 5px;
	height: 20px;
	float: left;
	background: #cc0530;
	border-radius: 5px;
	margin: 5px 10px;
}
.foot-t span{
	font-family: "微软雅黑";
	line-height: 30px;
}
@media only screen and (min-width:320px ) {
	.foot-t span{
		font-size: 15px;
	}
}
.foot-c{
	width: 100%;
	border-bottom: 1px solid #c1c0c5;
	float: left;
}
.foot-c-img{
	width: 20%;
	padding: 10px;
	float: left;
}
.foot-c-r{
	width: 70%;
	float: left;
}

　　

日常DEMO

原文：http://www.cnblogs.com/daokuangjianchi/p/7057867.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！