<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/02.css">
<link rel="stylesheet" href="font/iconfont.css">
<title>Document</title>
</head>
<body>
<header>
<input type="text" placeholder="搜索商品名或粘贴淘宝标题">
</header>
<section>
<ul>
<li>优选榜单</li>
<li>女装</li>
<li>女鞋</li>
<li>男鞋单</li>
<li>女装护理</li>
<li>女装</li>
<li>男装</li>
<li>童装</li>
<li>母婴</li>
<li>百货</li>
<li>箱包</li>
<li>内衣</li>
<li>配饰</li>
<li>优选榜单</li>
<li>优选榜单</li>
<li>优选榜单</li>
<li>优选榜单</li>
<li>优选榜单</li>
<li>优选榜单</li>
<li>优选榜单</li>
</ul>
<div>
<p>优选榜单</p>
<main>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
</main>
<p>优选榜单</p>
<main>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
</main>
<p>优选榜单</p>
<main>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
<div>
<img src="img/pic1.png" alt="">
<p>潮流穿搭</p>
</div>
</main>
</div>
</section>
<footer>
<div class="iconfont icon-shouye">
<p>首页</p>
</div>
<div class="iconfont icon-fenlei">
<p>分类</p>
</div>
<div class="iconfont icon-shoucang">
<p>收藏</p>
</div>
<div class="iconfont icon-wode">
<p>我的</p>
</div>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: middle;
}
a {
text-decoration: none;
}
input {
outline: none;
border: 0;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.wnqc::after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
header {
height: 44px;
background-image: url(../img/bgc2.png);
background-repeat: no-repeat;
background-size: 100% 100%;
line-height: 44px;
text-align: center;
}
header input {
width: 92%;
height: 30px;
background-color: #fff;
text-align: center;
line-height: 30px;
font-size: 14px;
border-radius: 15px;
background-image: url(../img/search1.png);
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: 20% center;
}
section {
flex: 1;
display: flex;
overflow: auto;
}
section ul {
width: 90px;
background-color: #f6f6f6;
overflow: auto;
}
section ul li {
line-height: 48px;
text-align: center;
color: #616161;
font-size: 14px;
}
section ul li:hover {
background-image: url(../img/bgc3.png);
background-repeat: no-repeat;
background-size: 4px 4px;
background-position: 5px center;
background-color: #fff;
color: #fd2a24;
}
section>div {
flex: 1;
background-color: #fff;
overflow: auto;
}
section>div>p {
line-height: 62px;
font-size: 12px;
font-weight: bold;
padding-left: 26px;
}
section>div>main {
height: 250px;
display: flex;
flex-wrap: wrap;
}
section>div>main>div {
width: 33.33%;
height: 125px;
box-sizing: border-box;
text-align: center;
}
section>div>main>div>img {
width: 61px;
margin-top: 15px;
}
section>div>main>div>p {
font-size: 12px;
color: #061b28;
line-height: 26px;
}
::-webkit-scrollbar{
display: none;
}
footer {
height: 59px;
display: flex;
justify-content:space-around;
align-items: center;
}
footer>div{
width: 30px;
height: 49px;
font-size: 17px;
text-align: center;
padding-top: 9px;
box-sizing: border-box;
color: #777777;
}
footer>div:hover{
color: #ff2725;
}
footer>div>p{
font-size: 10px;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4306a5619182ff9c2e31c677642bba11.png)