0
点赞
收藏
分享

微信扫一扫

【web前端HTML5+CSS3】09CSS--layout(布局)之 flex (弹性盒)

山竹山竹px 2022-02-27 阅读 50

目录

1.弹性盒子简介

2.京东导航条练习

3.弹性容器上的样式

4.弹性元素上的样式

5.淘宝导航练习

6.像素

7.移动端像素

8.完美视口

9.vw单位

10.vw适配

11.移动端页面练习

12.媒体查询简介

13.响应式布局

14.美图手机练习


1.弹性盒子简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 500px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;

            /* 
               flex-direction 指定容器中弹性元素的排列方式
                可选值:
                    row 默认值,弹性元素在容器中水平排列(左向右)
                        - 主轴 自左向右
                    row-reverse 弹性元素在容器中反向水平排列(右向左)
                        - 主轴 自右向左
                    column 弹性元素纵向排列(自上向下)
                    column-reverse 弹性元素方向纵向排列(自下向上)

                主轴:
                    弹性元素的排列方向称为主轴
                侧轴:
                    与主轴垂直方向的称为侧轴

            */

            flex-direction: row;
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            /* 
                弹性元素的属性:
                    flex-grow 指定弹性元素的伸展的系数
                    - 当父元素有多余空间的时,子元素如何伸展
                    - 父元素的剩余空间,会按照比例进行分配
                    flex-shrink 指定弹性元素的收缩系数
                    - 当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩
            */
            /* flex-grow: 1; */

            /* 
            
            */
            flex-shrink: 0;

            
        }
        li:nth-child(1){
            flex-grow: 0;
            flex-shrink: 1;
        }

        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
            flex-shrink: 2;
        }

        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            flex-shrink: 3;
        }
    </style>
</head>
<body>
    <!-- 
        flex(弹性盒、伸缩盒)
            - 是CSS中的又一种布局手段,它主要用来代替浮动来完成页面的布局
            - flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变
            - 弹性容器
                - 要使用弹性盒,必须先将一个元素设置为弹性容器
                - 我们通过 display 来设置弹性容器
                    display:flex  设置为块级弹性容器
                    display:inline-flex 设置为行内的弹性容器

            - 弹性元素
                - 弹性容器的子元素是弹性元素(弹性项)
                - 弹性元素可以同时是弹性容器

     -->

     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>

2.京东导航条练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .nav{
            width: 1210px;
            height: 48px;
            line-height: 48px;
            margin: 50px auto;
            background-color: #E8E7E3;
            /* 设置为弹性容器 */
            display: flex;
        }

        .nav li{
            /* 设置增长系数 */
            flex-grow: 1;
        }

        .nav a{
            display: block;
            color: #808080;
            text-decoration: none;
            font-size: 16px;
            text-align: center;
            
        }

        .nav a:hover{
            background-color: #636363;
            color: #fff;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programming</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>
</body>
</html>

3.弹性容器上的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 600px;
            height: 800px;
            border: 10px red solid;
          /* 设置ul为弹性容器 */
            display: flex;

            /* flex-direction: column; */

            /* flex-wrap: 
                设置弹性元素是否在弹性容器中自动换行
                可选值:
                    nowrap 默认值,元素不会自动换行
                    wrap 元素沿着辅轴方向自动换行
                    wrap-reverse 元素沿着辅轴反方向换行
            */

            /* flex-wrap: wrap-reverse; */

            /* flex-flow:  wrap 和 direction 的简写属性 */
            flex-flow: row wrap;


            /*  
                justify-content
                    - 如何分配主轴上的空白空间(主轴上的元素如何排列)
                    - 可选值:
                        flex-start 元素沿着主轴起边排列
                        flex-end 元素沿着主轴终边排列
                        center 元素居中排列
                        space-around 空白分布到元素两侧
                        space-between 空白均匀分布到元素间
                        space-evenly 空白分布到元素的单侧

            */
            /* justify-content: center; */

            /*
             align-items: 
                - 元素在辅轴上如何对齐
                - 元素间的关系
                    - 可选值:
                        stretch 默认值,将元素的长度设置为相同的值
                        flex-start 元素不会拉伸,沿着辅轴起边对齐
                        flex-end 沿着辅轴的终边对齐
                        center 居中对齐
                        baseline 基线对齐
             */

             /* justify-content: center; */
             align-items: flex-start;


             /* align-content: 辅轴空白空间的分布 */
             align-content: space-between;
            
        }

        li{
            width: 200px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;


            
        }
        li:nth-child(1){
            /* align-self: 用来覆盖当前弹性元素上的align-items */
            align-self: stretch;
        }

        li:nth-child(2){
            background-color: pink;
        }

        li:nth-child(3){
            background-color: orange;
        }

        li:nth-child(4){
            background-color: yellow;
        }

        li:nth-child(5){
            background-color: chocolate;
        }
    </style>
</head>
<body>
    

     <ul>
         <li>1</li>
         <li>
             2
            <div>2</div>
         </li>
         <li>
             3
             <div>3</div>
             <div>3</div>
        </li>

        <li>1</li>

        <li>
                2
               <div>2</div>
            </li>
     </ul>

</body>
</html>

4.弹性元素上的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 900px;
            border: 10px red solid;
            /* 设置弹性盒 */
            display: flex;
        
        }

        li{
            width: 200px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            /* 
                弹性的增长系数
            */
            /* flex-grow: 1; */

            /* 
                弹性元素的缩减系数
                    - 缩减系数的计算方式比较复杂
                    - 缩减多少是根据 缩减系数 和 元素大小来计算
            */
            /* flex-shrink: 1; */

            /* 
                元素基础长度

                flex-basis 指定的是元素在主轴上的基础长度
                    如果主轴是 横向的 则 该值指定的就是元素的宽度
                    如果主轴是 纵向的 则 该值指定的是就是元素的高度
                    - 默认值是 auto,表示参考元素自身的高度或宽度
                    - 如果传递了一个具体的数值,则以该值为准
            */
            /* flex-basis: auto; */

            /* 
                flex 可以设置弹性元素所有的三个样式
                    flex 增长 缩减 基础;
                        initial "flex: 0 1 auto".
                        auto  "flex: 1 1 auto"
                        none "flex: 0 0 auto" 弹性元素没有弹性
            */
            flex: initial;

            
        }
        li:nth-child(1){
            /* order 决定弹性元素的排列顺序 */
            order: 2;
        }

        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
            order: 3;
        }

        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            order: 1;
        }
    </style>
</head>
<body>
    

     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>

</body>
</html>

5.淘宝导航练习

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置外层的容器 */
        .nav{
            width: 100%;
        }

        /* 设置每一行的容器 */
        .nav-inner{
            /* 设置为弹性容器 */
            display: flex;
            /* 设置主轴上空白的分布 */
            justify-content: space-around;
        }

        .item{
            width: 18%;
            /* background-color: #bfa; */
            /* flex: auto; */
            text-align: center;
        }

        .item img{
            /* 设置图片的宽度和父元素宽度一样 */
            width: 100%;
        }

        .item a{
            color: #333;
            text-decoration: none;
            font-size: 16px;
            
        }
    </style>
</head>

<body>
    <!-- 创建一个外层的容器 -->
    <nav class="nav">
        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img src="img/16/1.png">
                    <span>天猫</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/2.png">
                    <span>聚划算</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/3.png">
                    <span>天猫国际</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/4.png">
                    <span>外卖</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/5.png">
                    <span>天猫超市</span>
                </a>
            </div>
        </div>
        <div class="nav-inner">
            <div class="item">
                <a href="#">
                    <img src="img/16/6.png">
                    <span>充值中心</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/7.png">
                    <span>飞猪旅行</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/8.png">
                    <span>领金币</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/9.png">
                    <span>拍卖</span>
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="img/16/10.png">
                    <span>分类</span>
                </a>
            </div>
        </div>
    </nav>
</body>

</html>

 

6.像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div class="box1"></div>


    <!-- 
        像素:
            - 屏幕是由一个一个发光的小点构成,这一个个的小点就是像素
            - 分辨率:1920 x 1080 说的就是屏幕中小点的数量
            - 在前端开发中像素要分成两种情况讨论:CSS像素 和 物理像素
            - 物理像素,上述所说的小点点就属于物理像素
            - CSS像素,编写网页时,我们所用像素都是CSS像素
                - 浏览器在显示网页时,需要将CSS像素转换为物理像素然后再呈现
                - 一个css像素最终由几个物理像素显示,由浏览器决定:
                    默认情况下在pc端,一个css像素 = 一个物理像素

        视口(viewport)
            - 视口就是屏幕中用来显示网页的区域
            - 可以通过查看视口的大小,来观察CSS像素和物理像素的比值
            - 默认情况下:
                视口宽度 1920px(CSS像素)
                        1920px(物理像素)
                        - 此时,css像素和物理像素的比是 1:1

            - 放大两倍的情况:
                视口宽度 960px(CSS像素)
                        1920px(物理像素)
                        - 此时,css像素和物理像素的比是1:2

            - 我们可以通过改变视口的大小,来改变CSS像素和物理像素的比值



     -->
    
</body>
</html>

 

 

7.移动端像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box1{
            width: 900px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <!-- 
        在不通的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰
            24寸 1920x1080
            i6 4.7寸 750 x 1334

            智能手机的像素点 远远小于 计算机的像素点

            问题:一个宽度为900px的网页在iphone6中要如何显示呢?

            默认情况下,移动端的网页都会将视口设置为980像素(css像素)
                以确保pc端网页可以在移动端正常访问,但是如果网页的宽度超过了980,
                    移动端的浏览器会自动对网页缩放以完整显示网页

            https://material.io/resources/devices/


            所以基本大部分的pc端网站都可以在移动端中正常浏览,但是往往都不会有一个好的体验,
                为了解决这个问题,大部分网站都会专门为移动端设计网页


     -->

     <div class="box1"></div>
</body>
</html>

 

 

8.完美视口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- 设置视口大小 device-width表示设备的宽度(完美视口)-->
    <!-- <meta name="viewport" content="width=device-width"> -->
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;

        }
    </style>
</head>
<body>
    <!-- 
        移动端默认的视口大小是980px(css像素),
            默认情况下,移动端的像素比就是  980/移动端宽度  (980/750)
            如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比是非常不好,
                导致网页中的内容非常非常的小
            编写移动页面时,必须要确保有一个比较合理的像素比:
                1css像素 对应 2个物理像素
                1css像素 对应 3个物理像素

            - 可以通过meta标签来设置视口大小

            - 每一款移动设备设计时,都会有一个最佳的像素比,
                一般我们只需要将像素比设置为该值即可得到一个最佳效果
                将像素比设置为最佳像素比的视口大小我们称其为完美视口

                将网页的视口设置为完美视口
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                结论:以后再写移动端的页面,就把上边这个玩意先写上

     -->
    <div class="box1"></div>
</body>
</html>

 

 

9.vw单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 6.4vw;
            height: 4.667vw;
            background-color: #bfa;
        }
    </style>
</head>
<body>

    <!-- 
        不同的设备完美视口的大小是不一样的
            iphone6 -- 375
            iphone6plus -- 414

        由于不同设备视口和像素比不同,所以同样的375个像素在不同的设备下意义是不一样,
            比如在iphone6中 375就是全屏,而到了plus中375就会缺一块

        所以在移动端开发时,就不能再使用px来进行布局了

        vw 表示的是视口的宽度(viewport width)
            - 100vw = 一个视口的宽度
            - 1vw = 1%视口宽度

            vw这个单位永远相当于视口宽度进行计算

            设计图的宽度
                750px 1125px

            设计图 
                750px  

            使用vw作为单位
                100vw

            创建一个 48px x 35px 大小的元素

            100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
            6.4vw = 48px(设计图像素)
            4.667vw = 35px

    -->
    <div class="box1">
    </div>
    
</body>
</html>

 

 

10.vw适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html{
            /* 
                网页中字体大小最小是12px,不能设置一个比12像素还小的字体
                    如果我们设置了一个小于12px的字体,则字体自动设置为12

                0.1333333vw = 1px

                5.3333vw = 40px
            */
            font-size: 5.3333vw;
        }

        .box1{
            /* 
                rem
                    - 1 rem = 1 html的字体大小
                    - 1 rem = 40 px(设计图)
            */
            width: 18.75rem;
            height: 0.875rem;
            background-color: #bfa;
        }
    </style>
</head>
<body>

    <!-- 
        48 x 35
     -->
     <div class="box1"></div>
    
</body>
</html>

 

 

11.移动端页面练习

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>爱学习</title>
    <link rel="stylesheet" href="./fa/css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>

<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>

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

    <nav 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>
    </nav>

    <!-- 课程列表 -->
    <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 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 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 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 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 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>

    <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 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 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 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 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 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>

        <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 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 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 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 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 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>
</body>

</html>

 

*{
    margin: 0;
    padding: 0;
}

@total-width:750;

.w{
    width: 693/40rem;
    margin: 0 auto;
}

//设置根元素
html{
    // 设置rem的比值
    font-size: 100vw/@total-width * 40;
    background-color: #eff0f4;
}

a{
    text-decoration: none;
}

//设置头部header
.top-bar:extend(.w){
    //设置弹性容器
    display: flex;
    // 设置高度
    height: 175/40rem;
    line-height: 175/40rem;
    // 设置对齐方式
    justify-content: space-between;
    // 设置辅轴的对齐方式
    align-items: center;


    a{
        color: #24253d;
        font-size: 50/40rem;

        i{
            color: #999;
            font-size: 40/40rem;
        }
    }
    
}

// 设置banner
.banner:extend(.w){
    img{
        width: 100%;
    }
}

// 设置中间菜单
.menu:extend(.w){
    // 确定元素的高度
    height: 329/40rem;
    // 设置弹性元素
    display: flex;
    // 设置换行
    flex-flow: row wrap;
    // 设置对齐方式
    justify-content: space-between;
    //设置辅轴方向的对齐方式
    align-content: space-evenly;
    //设置框的大小
    a{
        width: 327/40rem;
        height: 104/40rem;
        line-height: 104/40rem;
        color: white;
        border-radius: 10/40rem;

        i{
            margin: 0 20/40rem 0 38/40rem;
        }
    }

    .course{
        background-color:#f97053; 
    }
    .star{
        background-color:#cd6efe; 
    }
    .sub{
        background-color:#fe4479; 
    }
    .download{
        background-color:#1bc4fb; 
    }
}

// 设置课程列表
.course-list:extend(.w){
    height: 394/40rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-bottom: 46/40rem;
    
    .title{
        display: flex;
        // 主轴的空间
        justify-content: space-between;
        // 辅轴的对齐方式
        align-items: center;

        h2{
            font-size: 33/40rem;
            color: #24253d;
            border-left: 2px solid #3a84ff;
            padding-left: 4px;
        }

        a{
            font-size: 28/40rem;
            color: #656565
        }
    }
}


// 设置课程列表的项
.item-list{
    width: 720/40rem;
    display: flex;
    overflow: auto;
}
.item{
    flex: none;
    box-sizing: border-box;
    width: 320/40rem;
    height: 324/40rem;
    padding: 0 22/40rem;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    margin-right: 24/40rem;

    // 设置图片的宽度
    img{
        width: 100%;
        vertical-align: top;
    }

    //课程标题
    .course-title{
        font-size: 32/40rem;
        color: #24253d;
    }

    // 设置用户信息的容器
    .user-info{
        display: flex;
        align-items: center;
    }

    //头像
    .avatar{
        width: 42/40rem;
        height: 42/40rem;

    }

    //用户的昵称
    .nickname{
        margin-left: 6px;
        font-size: 24/40rem;
        color: #969393;
    }
}

 

 

12.媒体查询简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*
         使用媒体查询 
            语法: @media 查询规则{}
                媒体类型:
                    all 所有设备
                    print 打印设备
                    screen 带屏幕的设备
                    speech 屏幕阅读器
                    - 可以使用,连接多个媒体类型,这样它们之间就是一个或的关系

                可以在媒体类型前添加一个only,表示只有。
                    only的使用主要是为了兼容一些老版本浏览器
         */

        /* @media print,screen{
            body{
                background-color: #bfa;
            }
        } */

        @media only screen {
            body{
                background-color: #bfa;
            }
        }
    </style>
</head>
<body>
    <!-- 
        响应式布局
            - 网页可以根据不通的设备或窗口大小呈现出不同的效果
            - 使用响应式布局,可以使一个网页适用于所有设备
            - 响应布局的关键就是 媒体查询
            - 通过媒体查询,可以为不通的设备,或设备不同状态来分别设置样式
     -->
    
</body>
</html>

 

 

13.响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*
             媒体特性:
                width 视口的宽度
                height 视口的高度

                min-width 视口的最小宽度(视口大于指定宽度时生效)
                max-width 视口的最大宽度(视口小于指定宽度时生效)
         */

         /* @media (max-width: 500px){
             body{
                background-color: #bfa;
             }
         } */

/* 
         样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化
         一般比较常用的断点

         小于768 超小屏幕 max-width=768px
         大于768 小屏幕   min-width=768px
         大于992 中型屏幕 min-width=992px
         大于1200 大屏幕  min-width=1200px

*/
         @media only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }
    </style>
</head>
<body>
    
</body>
</html>

 

 

14.美图手机练习

 

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./fa/css/all.min.css">
    <link rel="stylesheet" href="./meitu/style.css">
</head>
<body>
    <!-- 
        响应式设计的网页:
            ① 移动端优先
            ② 渐进增强
     -->

     <!-- 外部容器 -->
<div class="top-bar-wrapper">
    <div class="top-bar">
        <!-- 左侧菜单 -->
        <div class="left-menu">
            <!-- 创建菜单图标 -->
            <ul class="menu-icon">
                <li></li>
                <li></li>
                <li></li>
            </ul>

            <!-- 创建菜单 -->
            <ul class="nav">
                <li><a href="#">手机</a></li>
                <li><a href="#">美容仪器</a></li>
                <li><a href="#">配件</a></li>
                <li><a href="#">服务支持</a></li>
                <li><a href="#">企业网站</a></li>
                <li>
                    <a href="#"><i class="fas fa-search"></i></a>
                    <span>搜索 Meitu.com</span>
                </li>
            </ul>
        </div>

        <!-- logo -->
        <h1 class="logo">
            <a href="/">美图手机</a>
        </h1>

        <!-- 用户信息 -->
        <div class="user-info">
            <a href="#">
                <i class="fas fa-user"></i>
            </a>
        </div>
    </div>
</div>
    
</body>
</html>

 

a{
    text-decoration: none;
    color: #fff;

    &:hover{
        color: rgb(197, 196, 196);
    }
}

// 导航条的外部容器

.top-bar-wrapper{
    background-color: #000;
}
.top-bar{
    max-width: 1200px;
    margin: 0 auto;
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}

// 设置左侧的导航
.left-menu{
    &:active{
        //显示隐藏的菜单
        .nav{
            display: block;
        }
    }
    // position: relative;
    // 设置菜单
    .nav{
        display: none;
        position: absolute;
        top:48px;
        left: 0;
        bottom: 0;
        right: 0;
        // 设置背景颜色
        background-color: #000;
        padding-top: 60px;

        li{
            width: 80%;
            margin: 0 auto;
            border-bottom: 1px solid #757474;

            a{
                display: block;
                line-height: 44px;
                font-size: 14px;
                
            }

            &:last-child a{
                display: inline-block;
                margin-right: 6px;
            }

            span{
                color: #fff;
                font-size: 14px;
            }
        }

    }

    // 图标
    .menu-icon{
        width: 18px;
        height: 48px;
        position: relative;

        // 导航的线
        li{
            width: 18px;
            height: 1px;
            background-color: #fff;
            position: absolute;

            // 修改变形的原点
            transform-origin:left center; 

            transition: 0.5s
        }

        li:nth-child(1){
            top:18px;
        }

        li:nth-child(2){
            top:24px;
        }

        li:nth-child(3){
            top:30px;
           
        }

        // 鼠标移入以后的效果,正常项目时,效果需要通过js来实现
        &:active{
            

            li:nth-child(1){
                // 向下旋转
                transform: rotateZ(40deg);
            }
    
            li:nth-child(2){
                // 隐藏
                opacity: 0;
            }
    
            li:nth-child(3){
                transform: rotateZ(-40deg);
            }
        }
    }
}

//设置logo
.logo{
    a{
        text-indent: -9999px;
        display: block;
        width: 122px;
        height: 32px;
        background-image: url('../img/18/dff63979.sprites-index@2x.png');
        background-size: 400px 400px;
    }
}

//设置媒体查询
@media only screen{
    // 断点 768px
    @media (min-width: 768px){
       .left-menu{
           order: 2;
           flex: auto;
           //显示菜单
           .nav{
               display: flex;
               position: static;
               padding: 0;
               justify-content: space-around;
               li{
                   width: auto;
                   border-bottom: none;
                   margin: 0;
                   a{
                       line-height: 48px;
                   }

                   span{
                       display: none;
                   }
               }
           }
           //隐藏菜单图标
           .menu-icon{
               display: none;
           }

       }
       .logo{
           order: 1;
       }
       .user-info{
           order: 3;
       }
    }
}

举报

相关推荐

0 条评论