<!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) no-repeat;
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 auto;
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>
WEB前端:rem布局仿淘宝首页
最新推荐文章于 2024-07-15 16:47:34 发布