<!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;
}
时间： 2024-08-27 10:24:17