index.less
@import "common";
body{
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica, sans-serif;
background-color: #F7F7F7;
}
*{
box-sizing: border-box;
text-align: center;
}
img{
display: block;
}
a{
text-decoration: none;
}
@bounce:50;
/* 顶部搜索框 */
.top{
position: relative;
overflow: hidden;
&::before{
content: "";
position: absolute;
height: 2000rem / @bounce;
width: 2000rem / @bounce;
border-radius: 2000rem / @bounce;
z-index: -1;
background: linear-gradient(to right,rgb(255, 220, 220),rgba(255, 0, 0, 0.658));
left: -86.5%;
top: -1600rem / @bounce;
}
}
.search-content{
position: relative;
height: 180rem / @bounce;
width: 15rem;
margin: 0 auto;
.search-one{
display: flex;
margin: 0 34rem / @bounce;
height: 88rem / @bounce;
padding-top: 20rem / @bounce;
.fenlei{
height: 60rem / @bounce;
width: 36rem / @bounce;
background: url("../img/lb.png");
background-size: 36rem / @bounce;
}
.guanggao{
flex: 1;
width: 450rem / @bounce;
height: 55rem / @bounce;
background: url("../img/gg.gif") no-repeat 100rem / @bounce;
background-size: 372rem / @bounce;
}
.login{
height: 60rem / @bounce;
width: 36rem / @bounce;
background: url("../img/login.png");
background-size: 36rem / @bounce;
}
}
.search{
position: relative;
display: block;
margin: 16rem / @bounce 34rem / @bounce;
height: 60rem / @bounce;
flex: 1;
border-radius: 50rem / @bounce;
background-color: #fff;
&::before{
content: "";
position: absolute;
background: url("../img/search.png");
background-size: 36rem / @bounce;
height: 36rem / @bounce;
width: 36rem / @bounce;
top: 12rem / @bounce;
left: 20rem / @bounce;
}
&::after{
content: "商品/店铺";
position: absolute;
font-size: .5rem;
top: 14rem / @bounce;
left: 70rem / @bounce;
color: #999;
}
}
}
/* 轮播图 */
.slideimg{
position: relative;
height: 260rem / @bounce;
width: 15rem;
margin: 0 auto;
overflow: hidden;
img{
position: absolute;
top: -100rem / @bounce;
border-radius: 10rem / @bounce;
width: 14rem;
left: 50%;
transform: translateX(-50%);
}
}
/* 导航 */
.nav{
height: 320rem / @bounce;
width: 15rem;
display: flex;
flex-wrap: wrap;
background-color: #fff;
a{
display: block;
width: 3rem;
height: 142rem / @bounce;
font-size: 20rem / @bounce;
color: #666;
img{
height: 84rem / @bounce;
width: 84rem / @bounce;
margin: 24rem / @bounce 33rem / @bounce 5rem / @bounce;
}
}
}
/* 满减 */
.manjian{
height: 210rem / @bounce;
width: 15rem;
display: flex;
a{
height: 210rem / @bounce;
width: 7.5rem;
img{
width: 7.5rem;
}
}
}
/* 底部 */
.footer{
height: 190rem / @bounce;
width: 15rem;
position:fixed;
bottom: 0;
.ljdl{
display: block;
height: 90rem / @bounce;
width: 15rem;
background: url("../img/dl.png") no-repeat;
background-size: 15rem;
}
.bottom{
height: 100rem / @bounce;
width: 15rem;
display: flex;
background-color: #fff;
a{
height: 100rem / @bounce;
width: 3rem;
font-size: 16rem / @bounce;
color: #333;
padding: 10rem / @bounce 0;
img{
margin: 0 47rem / @bounce;
height: 56rem / @bounce;
width: 56rem / @bounce;
}
}
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
</head>
<body>
<div class="top">
<div class="search-content">
<div class="search-one">
<a class="fenlei"></a>
<a class="guanggao"></a>
<a class="login"></a>
</div>
<a href="" class="search"></a>
</div>
<div class="slideimg">
<img src="./img/1.jpg" >
</div>
</div>
<nav class="nav">
<a href="#"><img src="./img/jg.webp" alt=""> 限时抢购</a>
<a href="#"><img src="./img/cs.webp" alt="">苏宁超市</a>
<a href="#"><img src="./img/pg.webp" alt="">苏宁拼购</a>
<a href="#"><img src="./img/sj.webp" alt="">爆款手机</a>
<a href="#"><img src="./img/jd.webp" alt="">苏宁家电</a>
<a href="#"><img src="./img/nz.webp" alt="">免费兑好物</a>
<a href="#"><img src="./img/zq.webp" alt="">赚钱</a>
<a href="#"><img src="./img/qd.webp" alt="">签到有礼</a>
<a href="#"><img src="./img/lq.webp" alt="">领券中心</a>
<a href="#"><img src="./img/gd.webp" alt="">更多频道</a>
</nav>
<div class="manjian">
<a href="#"><img src="./img/asd.gif" alt=""></a>
<a href="#"><img src="./img/nrm.gif" alt=""></a>
</div>
<footer class="footer">
<a class="ljdl"></a>
<div class="bottom">
<a href="#"><img src="./img/xh.png" alt="">猜你喜欢</a>
<a href="#"><img src="./img/xh.png" alt="">分类</a>
<a href="#"><img src="./img/xh.png" alt="">必抢清单</a>
<a href="#"><img src="./img/xh.png" alt="">购物车</a>
<a href="#"><img src="./img/xh.png" alt="">我的易购</a>
</div>
</footer>
</body>
</html>