<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./vw.css">
<title>Document</title>
</head>
<body>
<section id="header" class="clearfix">
<h1 class="left"><a href="#"><img src="images/logo.png" alt=""></a></h1>
<div class="bar right">
<a href="#"><img src="images/ico_01.png" alt=""></a>
<a href="#"><img src="images/ico_02.png" alt=""></a>
</div>
</section>
<section class="banner">
<div class="moveWrap">
<div><img src="images/banner.jpg" alt=""></div>
</div>
<div class="control">
<span class="active"></span>
<span></span>
<span></span>
</div>
</section>
<nav class="nav" class="clearfix">
<a href="#"><img src="images/ico_03.png" alt="">
<span>天天菜市</span>
</a>
<a href="#"><img src="images/ico_04.png" alt="">
<span>我的订单</span>
</a>
<a href="#"><img src="images/ico_05.png" alt="">
<span>充值有礼</span>
</a>
<a href="#"><img src="images/ico_06.png" alt="">
<span>积分商城</span>
</a>
</nav>
<section class="id">
<a href="#"><img src="images/img_01.jpg" alt=""></a>
</section>
<section class="item">
<div>
<a href="#"><img src="images/img_02.jpg" alt=""></a>
</div>
<div class="coloum">
<a href="#"><img src="images/img_03.jpg" alt=""></a>
<a href="#"><img src="images/img_04.jpg" alt=""></a>
</div>
</section>
<section class="item pd">
<div class="coloum">
<a href="#"><img src="images/img_03.jpg" alt=""></a>
<a href="#"><img src="images/img_04.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="images/img_02.jpg" alt=""></a>
</div>
</section>
<footer id="footer">
<a href="#"><img src="images/ico_07.png" alt=""></a>
<a href="#"><img src="images/ico_08.png" alt=""></a>
<a href="#"><img src="images/ico_09.png" alt=""></a>
<a href="#"><img src="images/ico_10.png" alt=""></a>
</footer>
</body>
</html>
css部分
body {
font-family: helvetica;
max-width: 750px;
margin: 0 auto;
font-size: 12px; /* 需要限制一个字体大小,要不然的话默认字体大小也会跟着变 */
}
body * {
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-text-size-adjust: 100%;
}
a,button,input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button,input {
-webkit-appearance: none;
border-radius: 0;
}
a {
text-decoration: none;
}
input {
outline: none;
vertical-align: middle;
padding: 0;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
img{
vertical-align: middle;
}
h1,h2,h3,h4,p{
margin: 0;
}
.left {
float: left;
}
.right {
float: right;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
@media screen and (min-width:750px){
font-size:69.445px;
/*页面达到750px时 根字体的大小9.259259259259261vw转成px为9.259259259259261vw*7.5px/vw=69.444px */
}
html{
font-size:9.259259259259261vw;
/* 100*(clientWidth/designWidth) */
/*iphone6 plus: 100*(414/1080)=38.333333333333336 px*/
/* 1vw=414/100=4.14px */
/* 38.333333333333336px/4.14=9.259259259259261vw */
}
/* color="#46ae00" */
#header{
background-color:#46ae00;
/* height:58.666666666666664px; */
height:calc(176px / 3);
}
#header h1 img{
width:calc(517px / 3);
}
.right{
height:calc(176px / 3);
width:calc(276px / 3);
}
.bar a{
display:inline-block;
line-height: calc(176px / 3);
text-align: center;
}
.bar img{
width:calc(85px / 3);
}
.bar a:nth-of-type(1){
padding-right:calc(62px / 3);
}
.banner{
height:5.40rem;
position:relative;
}
.banner .moveWrap img{
width:100%;
}
.banner .control{
position:absolute;
bottom:0.34rem;
text-align: center;
left:50%;
transform:translateX(-50%);
}
.control span{
width:0.24rem;
height:0.24rem;
border-radius: 50%;
background-color:#dddddd;
display:inline-block;
margin:0 0.08rem;
}
.control span.active{
background-color:red;
}
/* nav */
.nav{
padding-top:0.6rem;
height:3rem;
background-color:#ffffff;
}
.nav a{
width:25%;
float:left;
text-align: center;
}
.nav a img{
width:1.8rem;
height:1.8rem;
display: block;
margin:0 auto 0.16rem auto;
}
.nav a span{
font-size:0.4rem;
color:#666;
}
.id{
height:4rem;
}
.id img{
width:100%;
}
/* item */
.item{
display: flex;
justify-content: space-between;
background-color: #f5f5f5;
padding:0.2rem;
padding-bottom:0;
}
.pd{
padding-bottom:0.2rem;
}
.item div img{
width:4.5rem;
height:6.4rem;
}
.item div.coloum{
display: flex;
width:5.7rem;
flex-wrap:wrap;
align-content: space-between;
}
.item div.coloum img{
width:5.7rem;
height:3.1rem;
}
/* footer */
#footer{
height:calc(180px / 3);
background-color: #ffffff;
display:flex;
justify-content: space-around;
margin-top:0.2rem;
box-shadow: 0 -0.06rem 0.06rem #dcdcdc;
}
#footer a img{
width:calc(160px / 3);
}