<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
<style>{
margin:0;
padding:0;
box-sizing: border-box;
}
img{
max-width:100%;/*img auto adjust*/
}
.row::after{
content:'';
display: block;
clear: both;
}
.items{
width:5rem;
float: left;
font-size:1rem;
text-align: center;
margin-top:1rem;
}
.fav{
text-align:center;
font-size:0.8rem;
padding:0.8rem;
background:#eee;
margin-top:0.8rem;
}
nav{
background:#fe5400 url(img/tao.png);
height:2.5rem;
background-size:2.5rem 2.5rem;
padding:0.5rem 0 0.05rem 2.5rem;
}
nav input{
width:95%;
height:80%;
margin:0;
display: block;
border-radius:0.3rem;
border-style: none;
background-color:#b52600;
color:#fff;
text-align: center;
}</style>
</head>
<body>
<nav>
<input type="text" placeholder="搜索您喜欢的宝贝">
</nav>
<div class="main">
<div class="banner">
<img style="width:100%;height:100%;" class="" src="img/b1.jpg">
</div>
<div class="row">
<div class="items">
<img src="img/1.png" alt="">
<p>天猫</p>
</div>
<div class="items">
<img src="img/2.png" alt="">
<p>聚划算</p>
</div>
<div class="items">
<img src="img/3.png" alt="">
<p>天猫国际</p>
</div>
<div class="items">
<img src="img/4.png" alt="">
<p>外卖</p>
</div>
<div class="items">
<img src="img/5.png" alt="">
<p>超市</p>
</div>
<div class="items">
<img src="img/6.png" alt="">
<p>充值</p>
</div>
<div class="items">
<img src="img/7.png" alt="">
<p>飞猪</p>
</div>
<div class="items">
<img src="img/8.png" alt="">
<p>淘金币</p>
</div>
<div class="items">
<img src="img/9.png" alt="">
<p>拍卖</p>
</div>
<div class="items">
<img src="img/10.png" alt="">
<p>分类</p>
</div>
</div>
<div class="row fav">
<h3>猜你喜欢</h3>
<h4>帮你推荐喜欢的商品</h3>
</div>
<div class="row list">
<div class="goods">
<img src="img/g1.jpg" alt="">
</div>
</div>
</div>
<footer></footer>
</body>
</html>
