二十四、移动页面练习3

gaoya7305

于 2023-07-21 15:01:29 发布

阅读量62

点赞数

分类专栏： html+css 文章标签：移动页面练习 rem

本文链接：https://blog.csdn.net/gaoya7305/article/details/131829200

版权

本文介绍了如何在移动页面中实现课程列表布局，使用flex布局展示item，并通过设置flex:none防止元素堆叠。在遇到内容超出屏幕时，采用overflow: auto实现区域内滚动，同时调整item-list宽度以保持显示效果。

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

一、课程列表布局

目标：

实现：

 <!-- 4.课程列表 -->
    <div class="course-list">
        <!-- 列表标题 -->
        <div class="title">
            <h2>最新课程</h2>
            <a class="more" href="#">更多+</a>
        </div>

         <!-- 列表容器 -->
         <div class="item-list">
            <div class="item">
                <!-- 封面 -->
                <div class="cover">
                    <img src="img/17/cover.png" alt="">
                </div>
                <!-- 小标题 -->
                <h3 class="course-title">
                    摄影课程
                </h3>
                <!-- 用户信息 -->
                <div class="user-info">
                    <div class="avatar">
                        <img src="img/17/avatar.png" alt="">
                    </div>
                    <div class="nickname">
                        令狐冲
                    </div>
                </div>

            </div>
          
         </div>

    </div>

style.less - 列表标题

// 设置课程列表
.course-list:extend(.w){
   

    /*设置列表的标题*/

    .title{
   
        display: flex;
        // 主轴的空白左右分布
        justify-content: space-between;
        //辅轴的对齐方式 - 元素居中对齐
        align-items: center;

        // 左侧的文字
        h2{
   
            font-size: 30/40rem;
            color: #24253d;
            border-left: 2px solid #3a84ff;
            padding-left: 10px;
        }
        // 右侧的更多文字 - 注意移动端没有hover,因为移动端是手指，手指是没有hover,只有点击效果
        a{
   
            font-size: 28/40rem;
            color:#656565;
        }
    }
}
</