CSS3学习第九天

最新推荐文章于 2024-07-25 22:24:14 发布

你还要我怎样？

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量120

点赞数

分类专栏： CSS学习文章标签： css3 学习 css

本文链接：https://blog.csdn.net/qq_46563235/article/details/127533307

版权

CSS学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、网格布局

2、网格布局-行列属性

代码练手：

<!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>
        .box{
            width: 600px;
            height: 600px;
            border: 5px solid gray;

            /* 网格布局 */
            display: grid;


            /* 1、固定值写法 */
            /* grid-template-rows: 200px 200px 200px; */
            /* grid-template-columns: 200px 200px 200px; */



            /* 2、百分比写法 */
            /* grid-template-rows: 25% 25% 25% 25%; */
            /* grid-template-columns: 25% 25% 25% 25%; */



            /* 3、repeat函数  3重复3次的意思*/
            /* grid-template-rows: repeat(3,33.33%); */
            /* grid-template-columns: repeat(3,33.33%); */


            /* 4、repeat auto-fill 按照百分比自动填充   下列代码即是把div划分成4*4个项目*/
            /* grid-template-rows: repeat(auto-fill,25%); */
            /* grid-template-columns: repeat(auto-fill,25%); */


            /* 5、fr  片段  自适应 */
            /* grid-template-rows: 100px 1fr 100px; */
            /* grid-template-columns: 100px 1fr 100px; */


            /* 6、minmax   下列代码第一行至少最小为100px，尽管后面所占的位置让前面不满足第一行的条件，而第一行最小至少也得占100px，而后面的就得被挤出去*/
            /* grid-template-rows: minmax(100px,200px) 200px 400px; */
            /* grid-template-columns: 200px 200px 200px; */


            /* 7、auto  占满剩余空间*/
            grid-template-rows: 100px auto 200px;
            grid-template-columns: 100px 200px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <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>
</body>
</html>

3、网格布局-间距

代码练手

<!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>
        .box{
            width: 600px;
            height: 600px;
            border: 5px solid gray;
            /* 网格布局 */
            display: grid;


            grid-template-rows: 200px 180px 180px;
            grid-template-columns: 200px 180px 180px;

            /* 间距学习*/
            

            /* 第一种写法 */
            /*已经被弃用了*/
            /* grid-row-gap: 20px; */
            /* grid-column-gap: 20px; */


            /* 第二种写法   这行代码和第一种写法一样 */
            /* grid-gap: 20px 20px; */

            /* 第三种写法 */
            /* row-gap: 20px; */
            /* column-gap: 20px; */
        }
        .box div{
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div class="box">
        <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>
</body>
</html>

4、网格布局-区域命名与合并

代码练手：

<!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>
        .box{
            width: 600px;
            height: 600px;
            border: 5px solid gray;
            /* 网格布局 */
            display: grid;

            grid-template-rows: repeat(3,33.33%);
            grid-template-columns: repeat(3,33.33%);


            /* 区域命名和划分 */

            /* 区域命名 */
            grid-template-areas: 'a a c'
                                 'd e f'
                                 'g h i'
            ;
        }


        .box div:nth-child(1){
            /* 合并  最好吧合并的区域名取相同的 */
            /* 只能做矩形和正方形合并 */
            grid-area: a;
        }
    </style>
</head>
<body>
    <div class="box">
        <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>
</body>
</html>

5、网格布局-案例1（区域命名与合并实现）

效果：

代码：

<!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>
        .box{
            width: 600px;
            height: 300px;
            border: 5px solid gray;
            margin: 0 auto;
            /* 网格布局 */
            display: grid;

            grid-template-areas: 'a a a a b b'
                                 'a a a a c c'
                                 'd d e f c c'
            ;
        }
        .box img{
            width: 100%;
            
        }
        .box img:nth-child(1){
            grid-area: a;
            height: 200px;
        }
        .box img:nth-child(2){
            grid-area: b;
            height: 100px;
        }
        .box img:nth-child(3){
            grid-area: c;
            height: 200px;
        }
        .box img:nth-child(4){
            grid-area: d;
            height: 100px;
        }
        .box img:nth-child(5){
            width: 100px;
            height: 100px;
        }
        .box img:nth-child(6){
            width: 100px;
            height: 100px;
        }
        /* 因为我图片的原因，所以才一直调宽高，不然效果不好看 */
    </style>
</head>
<body>
    <div class="box">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">
    </div>
</body>
</html>

6、网格布局-对齐方式

效果：

代码练手：

<!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>
        .box{
            width: 600px;
            height: 600px;
            border: 5px solid gray;
            display: grid;
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3,100px);
            
            /* 改变顺序 */
            /* grid-auto-flow: column; */

            /* 控制轴 */
            /* justify-content: center; */
            /* align-content: center; */

            /* 上面两行代码等价于 */
            place-content: center center;



            /* 控制内容 */
            /* justify-items: center; */
            /* align-items: center; */

            /* 上面两行代码等价于 */
            place-items: center center;
        }

        .box div{
            border: 1px solid red;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <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>
</body>
</html>

7、网格布局-项目属性

代码练手效果：

代码：

<!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>
        .box{
            width: 600px;
            height: 600px;
            border: 5px solid gray;

            display: grid;
            grid-template-rows: repeat(3,33.33%);
            grid-template-columns: repeat(3,33.33%);
        }


        /* .box div:nth-child(1){
            grid-column-start: 1;
            grid-column-end: 3;

        } */
        

        .box div:nth-child(2){
            /*   写法1     */
            /* grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 3; */


            /*    写法2     简写方式 */
            grid-column: 2/4;
            grid-row: 1/3;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <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>
</body>
</html>

8、网格布局-案例2（项目属性实现）

效果：

代码：

<!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>
        .box{
            width: 600px;
            height: 300px;
            border: 5px solid gray;
            margin: 0 auto;
            /* 网格布局 */
            display: grid;

         /* grid-template-areas: 'a a a a b b'
                                 'a a a a c c'
                                 'd d e f c c'
            ; */
        }
        .box img{
            width: 100%;
            
        }
        .box img:nth-child(1){
           grid-column: 1/5;
           grid-row: 1/3;
            height: 200px;
        }
        .box img:nth-child(2){
            grid-column: 5/7;
            grid-row: 1/2;
            height: 100px;
        }
        .box img:nth-child(3){
            grid-column: 5/7;
            grid-row: 2/4;
            height: 200px;
        }
        .box img:nth-child(4){
            grid-row: 3/4;
            grid-column: 1/3;
            height: 100px;
        }
        .box img:nth-child(5){
            width: 100px;
            height: 100px;
        }
        .box img:nth-child(6){
            width: 100px;
            height: 100px;
        }
        /* 因为我图片的原因，所以才一直调宽高，不然效果不好看 */
    </style>
</head>
<body>
    <div class="box">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">
    </div>
</body>
</html>