<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/flexble.js"></script>
<link rel="stylesheet" href="font/iconfont.css">
<link rel="stylesheet" href="css/01.css">
<title>Document</title>
</head>
<body>
<header>
<span class="iconfont icon-xiangzuo"> </span>
<span>打底裤</span>
<span class="iconfont icon-fangdajing"></span>
</header>
<nav>
<span>推荐</span>
<span>最新</span>
<span>销量</span>
</nav>
<section>
<div>
<img src="img/pic1.png" alt="">
<div class="txtarea">
<p class="p1">
<span>包邮</span>
抖音爆款小猫魔术裤4.0热绒版加绒
</p>
<p class="p2">
<span>淘宝价¥169</span>
<span>月销807</span>
</p>
<p class="p3">
<span>券后¥ 69</span>
<img src="img/pic2.png" alt="">
</p>
</div>
</div>
<div>
<img src="img/pic1.png" alt="">
<div class="txtarea">
<p class="p1">
<span>包邮</span>
抖音爆款小猫魔术裤4.0热绒版加绒
</p>
<p class="p2">
<span>淘宝价¥169</span>
<span>月销807</span>
</p>
<p class="p3">
<span>券后¥ 69</span>
<img src="img/pic2.png" alt="">
</p>
</div>
</div>
</section>
</body>
</html>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
img{
vertical-align: middle;
}
a{
text-decoration: none;
}
input{
outline: none;
border: none;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
header{
background-color: #ffffff;
height: 0.84rem;
line-height: 0.84rem;
font-size: 0.4rem;
display: flex;
justify-content: space-between;
color: #999999;
}
header>span:not(:nth-child(2)){
padding: 0 0.3rem;
}
header>span:nth-child(2){
font-size: 0.3rem;
color: #666;
}
nav{
height: 0.84rem;
color: #333333;
background-color: #ffffff;
font-size: 0.25rem;
line-height: 0.84rem;
display: flex;
justify-content: space-around;
}
nav span:hover{
color: #ff2220;
}
section{
flex: 1;
background-color: #f5f5f5;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
overflow: auto;
}
section>div{
width: 49%;
box-sizing: border-box;
background-color: #fff;
margin-bottom: 0.1rem;
}
section>div>img{
width: 100%;
}
section>div>.txtarea{
padding: 0.17rem 0.2rem;
}
section>div>.txtarea>.p1{
font-size: 0.24rem;
line-height: 0.38rem;
color: #061b28;
}
section>div>.txtarea>.p1>span{
font-size: 0.17rem;
background-color: #ff5000;
color: #fff;
padding: 0.05rem 0.08rem;
}
section>div>.txtarea>.p2{
line-height: 0.48rem;
display: flex;
justify-content: space-between;
}
section>div>.txtarea>.p2>span{
color: #ccc;
font-size: 0.2rem;
}
section>div>.txtarea>.p3{
font-size: 0.22rem;
color: #ff2220;
display: flex;
padding-top: 0.2rem;
justify-content: space-between;
}
section>div>.txtarea>.p3>img{
width: 1.16rem;
}