本文共 5944 字，大约阅读时间需要 19 分钟。

页面效果

设计稿psd文件

核心代码

html部分

   
        
    
            
     
                
                      
      搜索课程/老师/课堂            
     
            
     
                
                  
     
        
    
    
   
    
   
        
        
   
        
   
        
    
            
     
            
     
            
     
        
    
        
    
            
                 
     
            
     APP设计        
    
        
    
            
     
     
            
     WEB设计        
    
        
    
            
                 
     
            
     ICON设计        
    
        
    
            
                 
     
            
     其他设计        
    
    
   
    
   
        
    
            
      名师精品课        
    
        
    
                 查看全部>        
    
    
   
    
   
        
    
            
             
    
        
    
            
             
    
    
   
    
   
        
    
            
      公开体验课        
    
    
   
    
   
        
    
     课程方向
    
        
    
     APP设计
    
        
    
     WEB设计
    
        
    
     ICON设计
    
    
   
    
   
        
    
     
    
        
    
     
    
    
   
        
   

less部分

* {    margin: 0;    padding: 0;}body {    margin: 0 auto;    font-family: -apple-system, Helvetica, sans-serif;    color: #666;    background-color: #F6F6F6;    box-sizing: border-box;    padding-bottom: 200rem/54;}header {    width: 1080rem /54;    height: 370rem /54;    padding: 0 40rem /54;    margin: 0 auto;    box-sizing: border-box;    background: url(../images/椭圆2.png) no-repeat;    background-size: 100% 100%;    overflow: hidden;    .search-box {        width: 100%;        height: 100rem /54;        margin-top: 70rem/54;        line-height: 100rem /54;        position: relative;        .search {            margin-right: 140rem/54;            height: 100rem /54;            background-color: #83a6ff;            border-radius: 50px;            padding-left: 75rem /54;            img {                width: 50rem /54;                height: 50rem /54;                vertical-align: middle;            }            span {                font-size: 45rem /54;                color: rgb(232, 232,232);            }        }        .search-right {            position: absolute;            right: 0px;            top: 10rem /54;            img {                width: 60rem /54;                height: 66rem /54;            }        }    }}.banner {    width: 1000rem /54;    height: 430rem /54;    margin: -180rem /54 auto;    img {        width: 1000rem /54;        height: 430rem /54;    }}.diannav{    width: 1080rem /54;    display: flex;    justify-content: center;    position: absolute;    left: -50%;    margin-left: 540rem /54;    top: -30rem /54;    div{        width: 16rem /54;        height: 16rem /54;        border-radius: 8rem /54;        margin: 0 20rem /54;        background-color: #999;    }    .dianing{        background-color: #5887ff;    }}.list {    width: 1080rem /54;    height: 220rem /54;    margin: 0 auto;    margin-top: 230rem /54;    display: flex;    justify-content: space-around;    align-items: center;    text-align: center;    font-size: 37rem /54;    position: relative;    img {        width: 132rem /54;    }}.fine {    width: 1000rem /54;    height: 60rem /54;    margin: 0 auto;    margin-top: 50rem /54;    line-height: 60rem /54;    box-sizing: border-box;    .fine-left {        float: left;        font-size: 42rem /54;        overflow: hidden;        font-weight: 900;        span {            display: inline-block;            width: 10rem /54;            height: 50rem /54;            background-color: #5887ff;            position: relative;            top: 10rem/54;        }    }    .fine-right {        float: right;        font-size: 30rem /54;    }}.fine-bottom {    width: 1000rem/54;    height: 290rem /54;    margin: 0 auto;    margin-top: 30rem /54;    display: flex;    justify-content: flex-start;    div img {        height: 280rem /54;     }    .fbleft img{        margin-right: 30rem /54;    }}.epic {    width: 1000rem /54;    height: 60rem /54;    margin: 0 auto;    margin-top: 50rem /54;    line-height: 60rem /54;    box-sizing: border-box;    .epic-left {        float: left;        font-weight: 900;        font-size: 42rem /54;        span {            display: inline-block;            width: 10rem /54;            height: 50rem /54;            background-color: #5887ff;            position: relative;            top: 10rem/54;        }    }}.epic-bottom {    width: 1000rem /54;    height: 60rem /54;    margin: 10rem/54 auto;    font-size: 34rem /54;    display: flex;    justify-content: flex-start;    align-items: center;    box-sizing: border-box;    div {        margin-right: 50rem /54;    }}.epic-img {    width: 1000rem /54;    height: 210rem /54;    margin: 0 auto;    margin-top: 30rem /54;    display: flex;    justify-content: space-between;    img {        width: 480rem /54;    }}footer {    width: 1080rem /54;    height: 130rem /54;    position: fixed;    background-color: #fff;    right: 0;    left: 0;    bottom: 0;    z-index: 99;    margin: 0 auto;    display: flex;    justify-content: space-around;    align-items: center;    font-size: 28rem /54;    img {        width: 60rem /54;        height: 60rem /54;    }}

js部分

set_fontsize()        function set_fontsize() {            let htm = document.documentElement            let view_width = htm.clientWidth            if (view_width >= 320 && view_width <= 1080) {                htm.style.fontSize = view_width / 20 + 'px'            } else {                htm.style.fontSize = 54 + 'px'            }        }        window.addEventListener('resize', function () {            set_fontsize()        })

源码下载

转载地址：http://hhpdz.baihongyu.com/