Day05移动web rem；less；游乐园案例

最新推荐文章于 2024-08-28 11:59:16 发布

瑜～

最新推荐文章于 2024-08-28 11:59:16 发布

阅读量46

点赞数

分类专栏：移动web 文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_52284271/article/details/131871033

版权

移动web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该文章展示了一个使用Rem单位进行移动适配的HTML网页结构，包括Less样式表的导入和应用，以及页面布局、字体图标和活动状态的呈现。内容涉及字体大小设置、CSS样式和底部工具栏的设计，适用于响应式网页开发。

摘要由CSDN通过智能技术生成

rem移动适配
在这里插入图片描述
网页的标签是html 所以 html标签的字号又叫做根标签的字号或根字号

![在这里插入图片描述](https://img-blog.csdnimg.cn/054a0de6635542b598af3e229ec918cc.pn

LESS语法

在这里插入图片描述

或者用 @import:url(路径);

综合案例游乐园（less）

<!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>FC游乐园</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 主体内容 -->
    <div class="main">
        <!-- banner -->
        <div class="banner">
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
            </ul>
        </div>

        <!-- 活动标题 -->
        <div class="title">
            <h4>乐园活动</h4>
        </div>
         <!-- 活动标题结束-->


        <!-- 活动 -->
        <section class="item">

            <!-- 图片 -->
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>

                <!-- 字体图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <!-- 文字 -->
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">

            <!-- 图片 -->
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>

                <!-- 字体图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <!-- 文字 -->
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">

            <!-- 图片 -->
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>

                <!-- 字体图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <!-- 文字 -->
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>

        <!-- 活动结束  -->
    </div>
    <!-- 主体内容结束 -->

    <!-- 底部工具栏 -->
    <footer>
        <a href="#" class="current">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-youhuiquan"></i>
            <p>卡券</p>
        </a>
        <a href="#">
            <i class="iconfont icon-iconfront-"></i>
            <p>我的</p>
        </a>
    </footer>
    <!-- 底部工具栏结束 -->
    <script src="./js/flexible.js"></script>
</body>
</html>

less样式

@import './base';
@import './normalize';

// 变量: 存储37.5
@rootSize: 37.5rem;

body {
    background-color: #F0F0F0;
}

// 主体内容
.main {
    // padding-bottom: (50 / 37.5rem);
    padding-bottom: (50 / @rootSize);
    
    // banner
    .banner {
        height: (160 / @rootSize);
    }

    // 活动标题
    .title {
        height: (40 / @rootSize);
        line-height: (40 / @rootSize);
        padding-left: (15 / @rootSize);
        h4 {
            font-size: (14 / @rootSize);
            color: #3C3C3C;
        }
    }

    // 活动
    .item {
        margin-bottom: (10 / @rootSize);

        // 图
        .pic {
            position: relative;
            height: (160 / @rootSize);

            // 字体图标
            i {
                position: absolute;
                top: (15 / @rootSize);
                right: (18 / @rootSize);
                font-size: (24 / @rootSize);
                color: #FFFFFF;
            }

            // 活动状态
            .active {
                position: absolute;
                left: (15 / @rootSize);
                top: (-4 / @rootSize);
                width: (68 / @rootSize);
                height: (29 / @rootSize);
                background-image: url(../images/status_active.png);
                // 背景图缩放
                background-size: contain;
                font-size: (12 / @rootSize);
                color: #FFFFFF ;
                text-align: center;
                line-height: (25 / @rootSize);

                // 灰色图片样式
                // .active .off {} 必须是active类同时应用了off类
                // div.off{} 交集选择器
                &.off {
                    background-image: url(../images/status_default.png);
                }
            }
            // .off {
            //     灰色图片
            // }
        }

        // 文字
        .txt {
            padding: (10 / @rootSize) (15 / @rootSize);
            background-color: #FFFFFF;
            .top {
                display: flex;
                justify-content: space-between;
                h5 {
                    width: (290 / @rootSize);
                    font-size: (15 / @rootSize);
                    font-weight: 400;
                    color: #3C3C3C;
                }
                p {
                    font-size: (15 / @rootSize);
                    color: #FE6249 ;
                }
            }
            .bottom {
                display: flex;
                margin-top: (10 / @rootSize);
                p {
                    margin-right: (15 / @rootSize);
                    font-size: (11 / @rootSize);
                    color: #B4B4B4;
                    i {
                        font-size: (11 / @rootSize);
                    }
                }
            }
        }
    }
}


// 底部工具栏
footer {
    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;

    width: 100%;
    // height: (50 / 37.5rem);
    height: (50 / @rootSize);
    background-color: #FECA49;
    text-align: center;
    a {
        font-size: (11 / @rootSize);
        color: #D78B09;
        .iconfont {
            font-size: (24 / @rootSize);
        }
        &.current {
            color: #FEFEFE;
        }
    }
}

效果图
在这里插入图片描述