练习目标
移动端不同分辨率下的适配
练习图片
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201207083527355.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NzIzMDM1,size_16,color_FFFFFF,t_70#pic_center
部分代码
主页html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/ds.js"></script>
<link rel="stylesheet" href="./css/repeat.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2249154_z34dg0g339.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<a href="">
<i class="iconfont icon-weizhi"></i>
</a>
<a href="">
<img src="./image/index/white.png" alt="">
</a>
<div class="search">
<form action="">
<input type="text" name="" id="" placeholder="按内容搜索">
</form>
<a href="">
<i class="iconfont icon-sousuo"></i>
</a>
</div>
<a href="">
<i class="iconfont icon-bao"></i>
</a>
</div>
<div class="top-nav clearfix">
<div class="top-nav-long">
<a href="" class="specil-a">
推荐
<div></div>
</a>
<a href="">
女装
<div></div>
</a>
<a href="">
鞋包
<div></div>
</a>
<a href="">
居家
<div></div>
</a>
<a href="">
母婴
<div></div>
</a>
<a href="">
推荐
<div></div>
</a>
<a href="">
女装
<div></div>
</a>
<a href="">
鞋包
<div></div>
</a>
<a href="">
居家
<div></div>
</a>
<a href="">
母婴
<div></div>
</a>
<a href="">
居家
<div></div>
</a>
<a href="">
母婴
<div></div>
</a>
</div>
</div>
<div class="classification">
<i class="iconfont icon-sanheng"></i>
分类
</div>
<div class="banner">
<div class="banner-box">
<div class="banner-pic"><a href=""></a></div>
<div class="banner-pic"><a href=""></a></div>
<div class="banner-pic"><a href=""></a></div>
<div class="banner-pic"><a href=""></a></div>
<div class="banner-pic"><a href=""></a></div>
</div>
<div class="banner-button">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="middle-nav">
<div class="div"><a href=""><img src="./image/index/seckill.png" alt=""><span>限时秒杀</span></a></div>
<div class="div"><a href=""><img src="./image/index/top.png" alt=""><span>畅销商品</span></a></div>
<div class="div"><a href=""><img src="./image/index/brand.png" alt=""><span>品质大牌</span></a></div>
<div class="div"><a href=""><img src="./image/index/selfsupport.png" alt=""><span>小U自营</span></a></div>
<div class="div"><a href=""><img src="./image/index/integral.png" alt=""><span>积分商城</span></a></div>
<div class="div"><a href=""><img src="./image/index/integral.png" alt=""><span>积分商城</span></a></div>
</div>
<div class="first-skill clearfix">
<div class="left-skill clearfix">
<div>
<span class="skill-font">限时秒杀</span>
<a href="">
<span>查看更多
<i class="iconfont icon-youfangxiang"></i>
</span>
</a>
</div>
<p>每天0点场,好货秒不停</p>
<div class="time-last">
<span>05</span>
<b>:</b>
<span>05</span>
<b>:</b>
<span>05</span>
</div>
</div>
<div class="right-skill">
<div>
<span>品牌上新</span>
<p>9点整,抢大牌</p>
<a href="">
疯抢红包
<i class="iconfont icon-youfangxiang"></i>
</a>
</div>
<div>
<span>品牌上新</span>
<p>9点整,抢大牌</p>
<a href="">
疯抢红包
<i class="iconfont icon-youfangxiang"></i>
</a>
</div>
</div>
</div>
<div class="advance">
<div class="advance-title">
<p>双11尖货预购</p>
<span>畅购全球</span>
</div>
<div class="pro-look">
<a href="">
<img src="./image/index/01.png" alt="">
</a>
<a href="">
<img src="./image/index/02 (2).png" alt="">
</a>
<a href="">
<img src="./image/index/03.png" alt="">
</a>
<a href="">
<img src="./image/index/04.png" alt="">
</a>
<a href="">
<img src="./image/index/04.png" alt="">
</a>
<a href="">
<img src="./image/index/03.png" alt="">
</a>
<a href="">
<img src="./image/index/02 (2).png" alt="">
</a>
<a href="">
<img src="./image/index/01.png" alt="">
</a>
</div>
</div>
<div class="bottom-nav">
<div class="bottom-nav-box">
<div class="icon icon-orange">
<p><i class="iconfont icon-shouye"></i></p>
<span>商城</span>
</div>
<div class="icon">
<p><i class="iconfont icon-shouye"></i></p>
<span>分类</span>
</div>
<div class="icon">
<p><i class="iconfont icon-shouye"></i></p>
<span>购物车</span>
</div>
<div class="icon">
<p><i class="iconfont icon-shouye"></i></p>
<span>我</span>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
重置样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
color: black;
text-decoration: none;
font-size: 10px;
}
b{
font-weight: 400;
}
li{
list-style: none;
}
input{
border: none;
outline: none;
}
.clearfix::after,.clearfix::before{
content: "";
display: block;
clear: both;
}
body{
margin: 0 auto;
font: 10px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
}
.wrapper{
min-width: 320px;
max-width: 750px;
}
less文件
body{
background-color: #f2f2f2;
}
.header{
-webkit-display: flex;
display: flex;
justify-content:space-between;
padding-left: .15rem;
width: 100%;
height: .4rem;
background-color: #ff6040;
background-image:linear-gradient(to bottom,#ff6040 -30%,#ff7157);
i,.icon-weizhi{
color: white;
margin-right: .1rem;
font-size: 0.2rem;
line-height:0.42rem;
}
img{
margin-top: 0.1rem;
width: 0.91rem;
height: 0.24rem;
}
.search{
position: relative;
margin-top: 0.05rem;
margin-left: 0.1rem;
height: .4rem;
input{
width: 1.7rem;
height: .32rem;
margin-left: .1rem;
padding-left: .3rem;
border-radius: 0.04rem;
font-size: .14rem;
color: black;
}
input::placeholder{
color: #999999;
}
i,.icon-sousuo{
position: absolute;
top: -.05rem;
left: .15rem;
font-size: 0.2rem;
color: #999999;
}
}
}
.top-nav{
padding-left: .1rem;
width: 100%;
height: .40rem;
background-image:linear-gradient(to bottom,#ff6040 -30%,#ff8a7fd2);
overflow-x: auto;
overflow-y: hidden;
&::-webkit-scrollbar{width:0;height:0}
.top-nav-long{
display: flex;
justify-content: space-between;
align-items: center;
width: 200%;
a{
margin-top: .14rem;
font-size: .14rem;
color: white;
&:hover{
font-size: .16rem;
}
div{
display: none;
margin: 0 auto;
width: 0.2rem;
height: 0.02rem;
background-color: white;
}
&:hover div{
display: block;
}
}
.specil-a{
font-size: .16rem;
div{
display: block;
}
}
}
}
.wrapper{
position: relative;
.classification{
position: absolute;
right: 0;
top: .48rem;
width: 0.65rem;
height: 0.32rem;
line-height: 0.32rem;
text-align: center;
font-size: .12rem;
color: white;
background-image: linear-gradient(180deg, #FF7A68 0%, #FF8A80 100%);
box-shadow: -.05rem .02rem .05rem -0.02rem #E63D2E;
}
}
.banner{
position: relative;
margin-top: .1rem;
width: 100%;
height: 1.95rem;
overflow: hidden;
.banner-box{
position: absolute;
top: 0;
left: -87.7%;
display: flex;
width: 500%;
height: 100%;
animation: move 4s linear infinite;
.banner-pic{
margin-right: .1rem;
width: 18%;
border-radius: .05rem;
background-image: url(../image/index/banner.jpg) ;
background-size: cover;
a{
display: block;
width: 100%;
height: 100%;
}
}
}
@keyframes move{
0%{
left: -87.7%;
}
25%,50%{
left: -180%;
}
75%,100%{
left: -273%;
}
}
.banner-button{
position: absolute;
display:flex;
justify-content: space-between;
align-items: center;
bottom: .1rem;
left: 41%;
width: .65rem;
height: .1rem;
span{
width: .06rem;
height: .06rem;
border-radius: 50%;
background: white;
&:hover{
width: .12rem;
border-radius: .06rem;
}
&:nth-child(1){
width: .12rem;
border-radius: .06rem;
}
}
}
}
.middle-nav{
display: flex;
align-items: center;
width: 100%;
height: 0.9rem;
background-color: white;
div{
width: 20%;
height: auto;
a{
display: flex;
flex-direction: column;
align-items: center;
font-size: .12rem;
color: #333333 ;
img{
width: .32rem;
}
span{
margin-top: .05rem;
transform: scale(.9);
}
}
}
}
.first-skill{
padding-top: .1rem;
height: 1.95rem;
width: 100%;
.left-skill{
margin-left: .1rem;
padding-left: .1rem;
width: 1.75rem;
height: 1.75rem;
float: left;
background-image: url(../image/index/big.png);
background-size: cover;
div{
width: 100%;
height: 0.3rem;
.skill-font{
float: left;
font-size: .16rem;
color: #85A642 ;
}
a{
padding-right: .08rem;
float: right;
margin-top: .05rem;
font-size: .12rem;
color: #333333 ;
span{
display: inline-block;
i,.icon-youfangxiang{
font-size: .12rem;
}
transform: scale(.9);
}
}
}
p{
margin-left: -.08rem;
display: block;
font-size: .12rem;
color: #B1CC7A;
transform: scale(.9);
}
.time-last{
display: flex;
margin-left: -.03rem;
width: 0.58rem;
height: 0.2rem;
span{
width: 0.23rem;
height: 0.20rem;
padding: 0 .05rem;
background-image: linear-gradient(180deg, #85A642 0%, #B1CC7A 100%);
border-radius: .01rem;
font-size: .1rem;
text-align: center;
line-height:0.20rem;
color: white;
transform: scalex(.7);
}
b{
width: 0.02rem;
height: 0.20rem;
background-image: linear-gradient(180deg, #85A642 0%, #B1CC7A 100%);
border-radius: .01rem;
font-size: .1rem;
text-align: center;
line-height:0.20rem;
color: transparent;
transform: scalex(.8);
-webkit-background-clip: text;
background-clip: text;
}
}
}
.right-skill{
float: left;
margin-left: -.03rem;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: .1rem;
height: 1.75rem;
width: 1.75rem;
div{
padding-top: .01rem;
padding-left: .1rem;
width: 1.75rem;
height: 0.85rem;
background-image: url(../image/index/small.png);
background-size: cover;
span{
display: block;
font-size: .16rem;
font-weight: 900;
color: #FF6040 ;
margin-bottom: .05rem;
}
p{
color: #FF9580;
}
a{
white-space: nowrap;
margin-top: .01rem;
display: block;
width: 0.7rem;
padding-left: .05rem;
background-image: linear-gradient(180deg, #FF6040 0%, #FF9F80 100%);
border-radius: .02rem .12rem .12rem .02rem;
color: white;
i,.icon-youfangxiang{
color: white;
font-size: .1rem;
}
}
}
}
}
.advance{
margin: 0 auto;
padding: .05rem .1rem .0rem .1rem;
width: 3.57rem;
background-color: white;
.advance-title{
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: .1rem;
p{
font-size: 16px;
color: #FF6040;
font-weight: 900;
}
span{
color: #999999;
font-size: 16px;
}
}
.pro-look{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
a{
width: 0.8rem;
height: 0.8276rem;
margin-bottom: .05rem;
img{
width: 100%;
height: 100%;
}
}
}
}
.bottom-nav{
position: fixed;
padding-top: .05rem;
bottom: 0;
left: 0;
width: 100%;
max-width: 750px;
height: 0.83rem;
background-color: white;
box-shadow: 0 -5px 10px 0 rgba(204,204,204,0.20), 0 0 0 0 #CCCCCC;
.bottom-nav-box{
margin: 0 auto;
display: flex;
justify-content: space-around;
width: 3.75rem;
height: 0.83rem;
text-align: center;
color: #999999;
font-size: .1rem;
p{
i,.icon-shouye{
font-size: .1rem;
}
}
}
.icon-orange{
color: #ff6040;
}
}