布局、响应式布局、grid布局、

发布于：2022-07-26 ⋅ 阅读:(379) ⋅ 点赞:(0)

一 、布局

        网站布局是一种定义网站结构的模式(或框架)。

        它具有为网站所有者和用户构造网站上存在的信息的作用。它为网页内的导航提供了清晰的路径，并将网站的最重要元素置于网站的正面和中心。

        良好的布局可以使用户留在网站上，因为它可以轻松访问重要信息并直观地查找它们。不良的布局会使用户感到失望。然后他们会因为找不到所需的内容而迅速离开网站。 出于这个原因，最好花尽可能多的时间找到所需的布局，因为用户给你的时间不会超过几秒钟。布局与用户对网站的参与度之间有着很强的关系，它确定了他们在网站页面上停留了多长时间，浏览了多少页面以及它们回到网站的频率。

1）、基础布局

        网页布局有很多种方式，一般分为以下几个部分︰头部区域、菜单导航区域、内容区域、底部区域。

        1.头部区域位于整个网页的顶部，一般用于设置网页的标题、logo、导航条、

        2.内容区域位于整个网页的中间，用于布置网页的内容。

        3.底部区域位于整个网页的底部，网页结尾部分多用于设置公司的logo、官网、公司名、

 二、响应式布局

           响应式布局比较有代表性的前端UI框架如Bootstrap、LayUl等。

1、移动设备优先

        为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。

<meta name="viewport" content="width=device-width，initia1-scale=1">

2、栅格布局

        使用@media查询，你可以针对不同的媒体类型定义不同的样式。·大屏幕(大桌面显示器，大于等于1200px)

        栅格系统的宽度:

  • 超小屏幕(手机，小于768px): .col-xs-1
  • 小屏幕(平板，大于等于768px): .col-sm-3
  • 中等屏幕(桌面显示器，大于等于992px): .col-md-6.大屏幕(大桌面显示器，大于等于1200px): .col-lg-12

   

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

    <style>

        main {

            width: 100%;

            overflow: auto;

        }

       

        main div {

            background-color: red;

            margin-bottom: 5px;

            float: left;

        }

       

        @media screen and (max-width:768px) {

            main div {

                width: 100%;

                height: 50px;

            }

        }

       

        @media screen and (min-width:768px) {

            main div {

                width: 33.3%;

                height: 50px;

            }

        }

       

        @media screen and (min-width:992px) {

            main div {

                width: 16.6%;

                height: 50px;

            }

        }

       

        @media screen and (min-width:1200px) {

            main div {

                width: 8.3%;

                height: 50px;

            }

        }

    </style>

</head>

<body>

    <main>

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>6</div>

        <div>7</div>

        <div>8</div>

        <div>9</div>

        <div>10</div>

        <div>11</div>

        <div>12</div>

    </main>

</body>

</html>

@media screen and (min-width:1200px) {

            main div {

                width: 8.3%;

                height: 50px;

            }

        }

@media screen and (min-width:992px) {

            main div {

                width: 16.6%;

                height: 50px;

            }

        }

@media screen and (min-width:768px) {

            main div {

                width: 33.3%;

                height: 50px;

            }

        }

@media screen and (max-width:768px) {

            main div {

                width: 100%;

                height: 50px;

            }

        }

3、flex布局

        Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

.box{

        disp1ay: flex;

}

        行内元素也可以使用Flex布局。

.box{

        disp1ay: inline-flex;

}

        Webkit内核的浏览器，必须加上-webkit前缀。

.box{

        display : -webkit-flex; /* safari */

        display : flex ;

}

         注意，设为Flex布局以后，子元素的float、clear和vertical-ali如属性将失效。

        采用Flex布局的元素，称为Flex容器(flex container)，简称“容器"。它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称′项目"。布局原理就是通过给盒子添加flex属性，来控制子盒子的位置和排列方式。

 flex属性

        flex属性是flex-grow, flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {

        flex: none l [ <'flex-grow '> <'f1ex-shrink '>? ll <'flex-basis '> ]

}

        该属性有两个快捷值: auto (1 1 auto)和none (o 0 auto).

        建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

 align-self属性

        align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.

.item {

        align-self: auto l flex-start / flex-end / center / baseline / stretch;

}

4、容器的属性：

        以下6个属性设置在容器上

  •  flex-direction
  • -flex-wrap。
  • flex-flow
  •  justify-contente
  • align-items
  •  align-content

1. flex-direction属性

        flex-direction属性决定主轴的方向(即项目的排列方向)。

.box {

        flex-direction: column | column-reverse [ row / row-reverse ;

}

  • row(默认值)︰主轴为水平方向，起点在左端。
  • row-reverse:主轴为水平方向，起点在右端。
  •  column:主轴为垂直方向，起点在上沿。 
  • column-reverse:主轴为垂直方向，起点在下沿。

2. justify-content属性

        justify-content属性定义了道目在主轴上的对齐方式。

.box {

        justify-content: flex-start / flex-end / center / space-between / space-around;

}

3. align-items属性

        align-items属性定义项目在交叉轴上如何对升。

.box {

        align-items: flex-start | flex-end / center / baseline | stretch;

}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  •   flex-start:交叉轴的起点对齐。
  •  flex-end:交叉轴的终点对齐。- center:交叉轴的中点对齐。
  • -baseline:项目的第一行文字的基线对齐。
  •  stretch(默认值)︰如果项目未设置高度或设为auto，将占满整个容器的高度。

4. flex-wrap属性

        默认情况下，项目都排在一条线(又称"轴线"”)上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box {

       f1ex-wrap: .owrap / wrap / wrap-reverse;

}

三、grid布局

        HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

        通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。

  • fr单位：
    • 轨道可以使用任何长度单位进行定义。
    • 网格引入了fr单位来帮助我们创建灵活的网格轨道。一个fr单位街表网格容器中可用空间的一等份。以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。
  • 网格单元：
    • 一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。
  • 网格线：
    • 划分网格的线，称为""网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m列有m +1根垂直的网格线，n行有n +1跟水平网格线。
网格属性
属性 描述
column-gap

指定列之间的间隙
gap row-gap 和 column-gap 的简写属性
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns 指的默认的列尺寸
grid-auto-flow 指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows 指的默认的行尺寸
grid-column grid-column-start 和 grid-column-end 的简写属性
grid-column-end 指定网格元素列的结束位置
grid-column-gap 指定网格元素的间距大小
grid-column-start 指定网格元素列的开始位置
grid-gap grid-row-gap 和 grid-column-gap 的简写属性
grid-row grid-row-start 和 grid-row-end 的简写属性
grid-row-gap 指定网格元素的行间距
grid-row-end 指定网格元素行的结束位置
grid-row-start 指定网格元素行的开始位置
grid-template grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas 指定如何显示行和列，使用命名的网格元素
grid-template-columns 指定列的大小，以及网格布局中设置列的数量
grid-template-rows 指定网格布局中行的大小
row-gap 指定两个行之间的间距

案例：

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

    <style type="text/css">

        main {

            width: 1000px;

            height: 600px;

            margin: 0 auto;

            display: grid;

            border: 1px solid red;

            grid-template-columns: 1fr 2fr 1fr;

            grid-template-rows: 100px auto 50px;

            overflow: auto;

        }

       

        .col-1 {

            border: 1px solid blue;

            grid-column-start: 1;

            grid-column-end: 4;

        }

       

        .col-2 {

            border: 1px solid green;

            grid-column-start: 1;

            grid-column-end: 2;

        }

       

        .col-3 {

            border: 1px solid black;

            grid-column-start: 2;

            grid-column-end: 4;

        }

       

        .col-4 {

            border: 1px solid orange;

            grid-column-start: 1;

            grid-column-end: 4;

        }

    </style>

</head>

<body>

    <main>

        <div class="col-1"></div>

        <div class="col-2"></div>

        <div class="col-3"></div>

        <div class="col-4"></div>

    </main>

</body>

</html>

效果：

 案例2：html

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

    <link rel="stylesheet" href="css/6-练习.min.css">

</head>

<body>

    <main>

        <div class="col-1">

            <p>手机</p>

            <p>查看更多></p>

        </div>

        <div class="col-2">

            <img src="img/xm/left.jpg" alt="">

        </div>

        <div class="col-3">

            <div class="btn">

                <div>

                    <div class="con">

                        <img src="img/xm/5.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

                <div>

                    <div class="con">

                        <img src="img/xm/1.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

                <div>

                    <div class="con">

                        <img src="img/xm/7.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

                <div>

                    <div class="con">

                        <img src="img/xm/6.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

                <div>

                    <div class="con">

                        <img src="img/xm/3.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

                <div>

                    <div class="con">

                        <img src="img/xm/4.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

                <div>

                    <div class="con">

                        <img src="img/xm/2.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

                <div>

                    <div class="con">

                        <img src="img/xm/8.png" alt="">

                        <p>Xiaomi 12S Ultra</p>

                        <p>这真徕卡 | 专业徕卡影像</p>

                        <p>5999元起</p>

                    </div>

                </div>

            </div>

        </div>

    </main>

</body>

</html>

scss：

* {

    margin: 0;

    padding: 0;

}

main {

    width: 1200px;

    height: 600px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 5fr;

    grid-template-rows: 50px 550px;

    // overflow: auto;

    background-color: #F5F5F5;

    margin-top: 20px;

    .col-1 {

        grid-column-start: 1;

        grid-column-end: 4;

        p {

            &:nth-child(1) {

                font-size: 22px;

                line-height: 50px;

                float: left;

            }

            &:nth-child(2) {

                font-size: 16px;

                float: right;

                line-height: 50px;

                margin-right: 5px;

            }

        }

    }

    .col-2 {

        grid-column-start: 1;

        grid-column-end: 2;

        img {

            width: 200px;

            height: 540px;

        }

    }

    .col-3 {

        grid-column-start: 2;

        grid-column-end: 4;

        .btn {

            width: 1000px;

            height: 550px;

            display: flex;

            justify-content: space-around;

            flex-wrap: wrap;

            div {

                width: 235px;

                height: 265px;

                background-color: white;

                .con {

                    text-align: center;

                    img {

                        width: 170px;

                        height: 170px;

                    }

                    p {

                        font-size: 18px;

                        line-height: 30px;

                        text-align: center;

                        &:nth-child(3) {

                            font-size: 16px;

                            color: #999;

                        }

                        &:nth-child(4) {

                            color: orange;

                        }

                    }

                }

            }

        }

    }

}

css:

*{margin:0;padding:0}main{width:1200px;height:600px;margin:0 auto;display:grid;grid-template-columns:1fr 5fr;grid-template-rows:50px 550px;background-color:#f5f5f5;margin-top:20px}main .col-1{grid-column-start:1;grid-column-end:4}main .col-1 p:nth-child(1){font-size:22px;line-height:50px;float:left}main .col-1 p:nth-child(2){font-size:16px;float:right;line-height:50px;margin-right:5px}main .col-2{grid-column-start:1;grid-column-end:2}main .col-2 img{width:200px;height:540px}main .col-3{grid-column-start:2;grid-column-end:4}main .col-3 .btn{width:1000px;height:550px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-wrap:wrap;flex-wrap:wrap}main .col-3 .btn div{width:235px;height:265px;background-color:#fff}main .col-3 .btn div .con{text-align:center}main .col-3 .btn div .con img{width:170px;height:170px}main .col-3 .btn div .con p{font-size:18px;line-height:30px;text-align:center}main .col-3 .btn div .con p:nth-child(3){font-size:16px;color:#999}main .col-3 .btn div .con p:nth-child(4){color:orange}

效果：

 

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布