学习了less做的小案例

m0_64962776

已于 2022-05-16 20:58:44 修改

阅读量180

点赞数

文章标签：学习 less sass

于 2022-05-16 20:56:28 首次发布

本文链接：https://blog.csdn.net/m0_64962776/article/details/124807933

版权

https://s3.bmp.ovh/imgs/2022/05/16/48f124534fa19834.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入icon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 导入字体图标 -->
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <!-- 导入自己的css图标 -->
    <link rel="stylesheet" href="./css/index.css">

</head>
<body>
    <!-- 头部 -->
    <main>
        <!-- 轮播图 -->
        <div class="banner">
            <ul>
                <li>
                    <a href="">
                        <img src="./uploads/banner_1.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 标题 -->
        <div class="title">
            <h2>乐园活动</h2>
        </div>
        <!-- 活动列表 -->
        <div class="activity">
            <div class="item">
                <!-- 图片 -->
                <div class="pic">
                    <img src="./uploads/item_1.png" alt="">
                    <!-- 进行中定位 -->
                    <div class="go">进行中</div>
                    <!-- 字体图标 -->
                    <i class="iconfont icon-shoucang1"></i>
                </div>
                <div class="info">
                    <p>
                        <span>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</span>
                        <span>免费</span>
                    </p>
                    <p>
                        <span><i class="iconfont icon-qizhi"></i> 200人已报名</span>
                        <span><i class="iconfont icon-shizhong"></i> 本周六开始</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <!-- 图片 -->
                <div class="pic">
                    <img src="./uploads/item_1.png" alt="">
                    <!-- 进行中定位 -->
                    <div class="go">进行中</div>
                    <!-- 字体图标 -->
                    <i class="iconfont icon-shoucang1"></i>
                </div>
                <div class="info">
                    <p>
                        <span>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</span>
                        <span>免费</span>
                    </p>
                    <p>
                        <span><i class="iconfont icon-qizhi"></i> 200人已报名</span>
                        <span><i class="iconfont icon-shizhong"></i> 本周六开始</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <!-- 图片 -->
                <div class="pic">
                    <img src="./uploads/item_1.png" alt="">
                    <!-- 进行中定位 -->
                    <div class="go">进行中</div>
                    <!-- 字体图标 -->
                    <i class="iconfont icon-shoucang1"></i>
                </div>
                <div class="info">
                    <p>
                        <span>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</span>
                        <span>免费</span>
                    </p>
                    <p>
                        <span><i class="iconfont icon-qizhi"></i> 200人已报名</span>
                        <span><i class="iconfont icon-shizhong"></i> 本周六开始</span>
                    </p>
                </div>
            </div>
        </div>

    </main>
    <!-- 底部 -->
    <div class="tooble">
        <a href="" class="active">
            <i class="iconfont icon-index-copy"></i>
            <span>首页</span>
        </a>
        <a href="">
            <i class="iconfont icon-youhuiquan"></i>
            <span>卡券</span>
        </a>
        <a href="">
            <i class="iconfont icon-iconfront-"></i>
            <span>我的</span>
        </a>
    </div>
    <!-- 导入js文件 -->
    <script src="./js/flexible.js"></script>
</body>
</html>

// 导入base和normalize文件
@import url(./base.less);
@import url(./normalize.less);
// 创建一个变量
@baseSize: 37.5rem;
// 首页的css
body{
background-color: #f0f0f0;
}
// 网页主体
main{
    margin-bottom: (60/@baseSize);
    // 轮播图

    .banner{
        ul{
            li{
                width: (375/@baseSize);
                height: (160/@baseSize);
            }
        }
    }
    // 标题
    .title{
        h2{
            font-size: 14px;
            color: #3C3C3C;
            margin: (10/@baseSize) 0 (15/@baseSize) (15/@baseSize);
        }
    }
    .activity{

        .item{
            width: (375/@baseSize);
            height: (250/@baseSize);
            margin-bottom: (10/@baseSize);
            .pic{
                width: (375/@baseSize);
                height: (160/@baseSize);
                position: relative;
                .go{
                    position: absolute;
                    top: (-4/@baseSize);
                    left: (15/@baseSize);
                    width: (64/@baseSize);
                    height: (28.5/@baseSize);
                    background: url(../images/status_active.png) no-repeat;
                    background-size: (64/@baseSize) auto;
                    font-size: (12/@baseSize);
                    color: #FFFFFF;
                    text-align: center;
                    line-height: (28.5/@baseSize);
                }
                i{
                    position: absolute;
                    top: (15/@baseSize);
                    right: (18/@baseSize);
                    font-size: (24/@baseSize);
                    color: #fff;
                }
            }
            .info{
                background-color: #fff;
                width: (375/@baseSize);
                height: (90/@baseSize);
                p{
                    padding: (10/@baseSize) 0 (10/@baseSize) (15/@baseSize);
                    font-size: (15/@baseSize);
                    color: #3C3C3C;
                    display: flex;
                    font-size: (15/@baseSize);
                    &:first-child{
                        span{
                            &:nth-child(1){
                                flex: 1;
                                color: #3C3C3C;
                                line-height: (21/@baseSize);
                            }
                            &:nth-child(2){
                                padding-top: (2/@baseSize);
                                text-align: center;
                                width: (65/@baseSize);
                                color: #FE6249;
                            }
                        }
                    }
                    &:last-child{
                        font-size: (11/@baseSize);
                        color: #B4B4B4;
                        padding: 0 0 0 (15/@baseSize);
                        span{
                            &:first-child{
                                margin-right: (15/@baseSize);
                            }
                        }
                        i{
                            font-size: (11/@baseSize);
                        }
                    }
                }
            }
            // 第二个item
            &:nth-child(2){
                .go{
                    background: url(../images/status_default.png) no-repeat;
                    background-size: (64/@baseSize) auto;
                }
            }
            // 第三个item
            &:nth-child(3){
                position: relative;
                .go{
                    background: url(../images/status_default.png) no-repeat;
                    background-size: (64/@baseSize) auto;
                }
                &::after{
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, .3);
                }
            }
        }
    }
}
// 底部的css
.tooble{
    width: (375 /@baseSize);
    height: (50 / @baseSize);
    background: #FECA49;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    a{
        color: #D78B09;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        i{
            font-size: (22/@baseSize);
        }
        span{
            font-size: (12/@baseSize);
        }
        &.active{
            color: #fff;
        }
    }
}

https://s3.bmp.ovh/imgs/2022/05/16/48f124534fa19834.png