二十三、移动页面练习2

一、界面第二部分开发 - 图片展示

<body>
    
    <header class="top-bar">
        
        <div class="menu-btn">
            <a href="#">
                <i class="fas fa-stream">i>
            a>
        div>
         
        <h1 class="logo">
            <a href="#">
                爱学习
            a>
        h1>
         
        <div class="search-btn">
            <a href="#">
                <i class="fas fa-search">i>
            a>
        div>
    header>

    
    <div class="banner">
        <a href="#">
            <img src="./img/17.banner.png" alt="">
        a>
    div>
    

style.less

// 设置banner

.banner:extend(.w){
    img{
        // 不让图片溢出
        width: 100%;
    }
}
二十三、移动页面练习2_第1张图片

二、设置菜单按钮

  
    <div class="menu">
        <a class="course" href="#">
            <i class="fas fa-book">i>
            我的课程
        a>

        <a class="star" href="#">
            <i class="fas fa-cut">i>
            明细讲师
        a>

        <a class="sub" href="#">
            <i class="fas fa-envelope">i>
            我的订阅
        a>

        <a class="download" href="#">
            <i class="fas fa-globe">i>
            我的下载
        a>
    div>

style.less

// 设置中间菜单
.menu:extend(.w){
    // 确定菜单所在容器的高度
    height: 329/40rem;
    // 设置弹性元素 - 横向排列
    display: flex;

    // 设置换行(按行排列,换行)
    flex-flow:row wrap;

    //设置里面单个模块的框大小
    // 有人说a是行内元素,为啥还设置宽高 - 因为一旦变成弹性元素,这就随便设置
    a{
        width: 327/40rem;
        height: 104/40rem;
    }
}

如果不加 flex-flow:row wrap; 样式就是这样,因为flex自带伸缩,让他们都放到一行,即使设置了每个元素的宽也无用。
二十三、移动页面练习2_第2张图片

解决: 设置换行(按行排列,换行) flex-flow:row wrap;
二十三、移动页面练习2_第3张图片

三、详细设置每个菜单的样式


.menu:extend(.w){

    height: 329/40rem;
    display: flex;
    flex-flow:row wrap;
    a{
        width: 327/40rem;
        height: 104/40rem;
        
        color:white;
        border-radius: 10/40rem;
        //只能控制文字横向居中,无法控制垂直居中
        // text-align: center; 
        // 垂直居中
        line-height:104/40rem;
        // 设计图 里面内容是 水平方向是设置间距
        i{
            margin: 0 20/40rem 0 38/40rem;
        }

    }

    .course{
        background-color: #f97053;
    }
    .star{
        background-color: #cd6efe;
    }
    .course{
        background-color: #fe4479;
    }
    .course{
        background-color: #1bc4fb;
    }
}
二十三、移动页面练习2_第4张图片

三、设置这4个菜单的对齐方式

一个是设置主轴方向左右又空白:
justify-content:space-between;
// 设置辅轴方向的对齐方式(这里还可以用space-around)
因为这里我们当时量整体高度是包含了上下空白的。
align-content:space-evenly;

二十三、移动页面练习2_第5张图片
.menu:extend(.w){
    height: 329/40rem;
    display: flex;
    flex-flow:row wrap;
    // 设置主轴对齐方式
    justify-content:space-between;
    // 设置福州方向的对齐方式(这里还可以用space-around) 因为这里我们当时量整体高度是包含了上下空白的
    align-content:space-evenly;
    
    a{
        width: 327/40rem;
        height: 104/40rem;
        color:white;
        border-radius: 10/40rem;
        line-height:104/40rem;
        i{
            margin: 0 20/40rem 0 38/40rem;
        }
    }
    .course{
        background-color: #f97053;
    }
    .star{
        background-color: #cd6efe;
    }
    .course{
        background-color: #fe4479;
    }
    .course{
        background-color: #1bc4fb;
    }
}
二十三、移动页面练习2_第6张图片

你可能感兴趣的:(html+css,移动页面)