HTML+CSS练习移动端less

okstudy

已于 2024-05-31 01:28:15 修改

阅读量183

点赞数 1

分类专栏：前端文章标签： html 前端 css css3 html5

于 2024-05-04 19:57:26 首次发布

本文链接：https://blog.csdn.net/okstudy/article/details/138448918

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

index.less

// out: ../css/
// 导出当前less到index.css

// 导入当前bass.less
@import "./base.less";


@fontSize: 37.5rem;

header{
    display: flex;
    justify-content: space-between;
    padding: 0 (15 / @fontSize);
    height: (44 / @fontSize);
    line-height: (44 / @fontSize);

    .iconfont{
        // background-color: red;
        width: (34 / @fontSize);
        font-size: (25 / @fontSize);
        line-height: (44 / @fontSize);
    }

        h3{
        // background-color: red;
        font-size: (17 / @fontSize);
        line-height: (44 / @fontSize);
    }

        .note{
        // background-color: #2CB5A5;
        color: #2CB5A5;
        font-size: (15 / @fontSize);
        line-height: (44 / @fontSize);
    }
}
.banner{
    text-align: center;
    margin-top: (30 / @fontSize);
    margin-bottom: (76 / @fontSize);
    img{
        width: (240 / @fontSize);
        height: (206 / @fontSize);
        margin-bottom: (18 / @fontSize);
    }
    p{
        font-size: (16 / @fontSize);
    }
    span{
        color: #16C2A3;
    }
}

.bottom{
    ul{
        li{
        width: (345 / @fontSize);
        height: (78 / @fontSize);
        border: (0.5 / @fontSize) solid #EDEDED;
        border-radius: (4 / @fontSize);
        margin-bottom: (15 / @fontSize);
        
        margin: (15 / @fontSize);
        // background-color: red;
        
        a{
            display: flex;
            img{
                width: (40 / @fontSize);
                height: (40 / @fontSize);
                margin: (19 / @fontSize) (15 / @fontSize);
                // background-color: aqua;
            }
            .text{
                flex: 1;
                h3{
                    color: #3C3E42;
                    font-size: (16 / @fontSize);
                    line-height: (24 / @fontSize);
                    text-align: left;
                    // background-color: aqua;
                    margin-top: (15 / @fontSize);
                    margin-bottom: (4 / @fontSize);
                }
                p{
                    color: #848484;
                    font-size: (13 / @fontSize);
                    line-height: (20 / @fontSize);
                    text-align: left;

                }
            }
            .icon{
                font-size: (17 / @fontSize);
                width: (17 / @fontSize);
                height: (17 / @fontSize);
                margin: (33 / @fontSize) (17 / @fontSize);
            }
        }

        
        }
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">

    <title>Document</title>
</head>
<body>
    <header>
        <a href="">
            <div class="iconfont icon-left"></div>
        </a>
        <h3>极速问诊</h3>
        
        <a href="">
            <div class="note">问诊记录</div>
        </a>
    </header>

    <div class="banner">
        <img src="./assets/entry.png" alt="">
        <p><span>20s</span> 快速匹配专业医生</p>
    </div>

    <div class="bottom">
        <ul>
            <li>
                <a href="">
                    <div class="pic">
                        <img src="./assets/type01.png" alt="">
                    </div>
                    <div class="text">
                        <h3>三甲图文问诊</h3>
                        <p>三甲主治及以上级别医生</p>
                    </div>
                    <div class="icon iconfont icon-right"></div>
                </a>
            </li>
            <li>
                <a href="">
                    <div class="pic">
                        <img src="./assets/type02.png" alt="">
                    </div>
                    <div class="text">
                        <h3>普通图文问诊</h3>
                        <p>二甲主治及以上级别医生</p>
                    </div>
                    <div class="icon iconfont icon-right"></div>
                </a>
            </li>
            
        </ul>
    </div>
    <script src="./js/flexible.js"></script>
</body>
</html>