前端学习-第一阶段day15-day17

于 2020-12-10 13:32:11 发布
阅读量123 收藏
点赞数
分类专栏： 前端学习日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34723035/article/details/110790746
版权
本文介绍了一个移动端网页的设计案例，重点展示了如何使用HTML、CSS及LESS等技术实现不同分辨率下的页面适配。通过设置viewport元标签、使用百分比布局、媒体查询等手段确保了良好的用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

练习目标

移动端不同分辨率下的适配

练习图片

在这里插入图片描述![在这里插入图片描述](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;
        

    }
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值