从0开始学web-day18

oxygen_ls

于 2022-01-23 10:23:21 发布

阅读量613

点赞数

分类专栏：前端 # css 文章标签： web学习从零开始学前端

本文链接：https://blog.csdn.net/oxygen_ls/article/details/122647918

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

css

19 篇文章 0 订阅

订阅专栏

1.复习
day17复习
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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: red;
        }
        ul {
            max-width: 1000px;
            height: 200px;
            background: blueviolet;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        li {
            width: 23%;
            height: 50px;
            background: palegreen;
            list-style: none;
            
        }
        /* 大于等于300是黄色 */
        @media all and (min-width:300px) {
            body {
                background: yellow;
            }
        }
        /* 设置区间范围 */
        @media all and (min-width:500px) and (max-width:700px) {
            body {
                background: blue;
            }
            ul li {
                width: 46%;
            }
        }
    </style>
</head>
<body>
    <!-- 
        媒体查询注意点
        连接词之间空格的存在
     -->
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
   </ul> 
</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>
    <link rel="stylesheet" href="./shan.css">
</head>
<body>
    <div class="container">
        <div class="col-lg-3 col-md-4 col-sl-6">1</div>
        <div class="col-lg-3 col-md-4 col-sl-6">1</div>
        <div class="col-lg-3 col-md-4 col-sl-6">1</div>
        <div class="col-lg-3 col-md-4 col-sl-6">1</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>
    <link rel="stylesheet" href="red.css">
    <link rel="stylesheet" href="blue.css" media="all and (min-width:400px)">
    <link rel="stylesheet" href="green.css" media="all and (min-width:400px) and (max-width:700px)" >
</head>
<body>
    <div>
        <nav>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <ol>
                <li>登录</li>
                <li>登录</li>
                <li>登录</li>
            </ol>
        </nav>
    </div>
</body>
</html>

5.视口

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background: red;
        }
        @media all and (min-width:320px) {
            body {
                background: yellow;
            }
        }
        @media all and (min-width:350px) and (max-width:400px) {
            body {
                background: blue;
            }
        }
        @media all and (min-width:410px) and (max-width:500px) {
            body {
                background: green;
            }
        }     
    </style>
</head>
<body>
    
</body>
</html>

6.布局

1.列表布局
        一排显示的个数是n 每个的宽度是iw 空隙是x
            width=一行显示的个数 * 每个的宽度 * 空隙 * 个数-1
            w = n*iw + （n-1）*x

            实现的方式： 1用浮动 然后给父元素设置margin-right负值 前提是父元素没有设置宽度
                        2给每一排最后一个单独设置margin-right：0（不推荐）
                        3弹性盒justify-content：space-between
                        4结构伪类选择器 4n
                        5多列 可以实现瀑布流效果 
        2.双飞翼布局（先加载中间 再加载两端）左右固定 中间自动
        结构里中间先写 再写左右两端 
        3.圣杯布局（先加载中间 再加载左右两端）左右固定 中间自动
        结构里中间先写 再写两端
        4.响应式布局
        能够随着屏幕的改变，改变排版布局
        5.百分比布局 百分比值
        6.网格布局 
        7.rem布局 等比缩放布局

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>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 1000px;
            background: red;
            margin: 0  auto;
            /* 创建多列 */
            column-count: 3;
            /* 设置多列之间的空隙 */
            column-gap: 50px;
            /* 设置中间的边框线 */
            column-rule: 10px solid springgreen;
        }
        h1 {
            /* 设置多列标题所在列 */
            column-span: all;
        }
    </style>
</head>
<body>
    <div>
        <h1>标题字体标题标题字体标题标题字体标题标题字体标题标题字体标题标题字体标题</h1>
        拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊
        拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊
        拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊
        拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊
        拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊
        拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊拥有集成商品基督教才能胡椒粉了数据好久都安静电话费俊

    </div>
</body>
</html>

8.多列实现瀑布流

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        section {
            max-width: 95%;
            margin: 0 auto;
            column-count: 6;
        }
        figure {
            /* 设置多列在哪里中断 */
            break-inside: avoid;
            margin-bottom: 10px;
            
        }
        section figure:hover {
            box-shadow: 0px 0px 4px 4px slategray;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
    <section>
        <figure><img src="./img/pic1.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic2.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic3.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic4.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic5.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic6.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic7.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic8.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic9.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic10.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic11.png"><figcaption>文字信息</figcaption></figure>
        <figure><img src="./img/pic12.png"><figcaption>文字信息</figcaption></figure>
    </section>
</body>
</html>

9.双飞翼

<!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>
        * {
            margin:0;
            padding: 0;
        }
        .main {
            float: left;
            width: 100%;
            height: 400px;
            background: yellow;
        }
        .left {
            float: left;
            width: 200px;
            height: 100px;
            background: red;
            margin-left: -100%;
        }
        .right {
            width: 180px;
            height: 100px;
            float: left;
            background: blue;
            margin-left: -180px;
        }
        .center {
            height: 150px;
            background: yellowgreen;
            margin-left: 200px;
            margin-right: 180px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="center">2</div>
    </div>
    <div class="left">1</div>
    <div class="right">3</div>
</body>
</html>

10.圣杯

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            height: 400px;
            background: yellowgreen;
            padding-left: 200px;
            padding-right: 180px;
        }
        .center {
            width: 100%;
            height: 150px;
            background: yellow;
            float: left;
        }
        .left {
            width: 200px;
            height: 100px;
            background: red;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            width: 180px;
            height: 100px;
            background: blue;
            float: left;
            margin-left: -180px;
            position: relative;
            right: -180px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="center">2</div>
        <div class="left">1</div>
        <div class="right">3</div>
    </div>
</body>
</html>

11.其他方式

<!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>
        /* 定位写法 */
       /* * {
            margin: 0;
            padding: 0;
        }
        .center {
            height: 300px;
            background: yellow;
            margin-left: 200px;
            margin-right: 180px;
        }
        .left {
            width: 200px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
        .right {
            width: 180px;
            height: 100px;
            background: blue;
            position: absolute;
            right: 0;
            top: 0;
        } */
        /* 弹性盒 */
        body {
            display: flex;
        }
        .left {
            width: 200px;
            height: 100px;
            background: red;
            order: -1;
        }
        .center {
            flex: 1;
            background: yellow;
            height: 400px;
        }
        .right {
            width: 180px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="center">2</div>
    <div class="left">1</div>
    <div class="right">3</div>
</body>
</html>

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>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 500px;
            height: 300px;
            background: yellow;
            display: flex;
            flex-direction: column;
        }
        header {
            flex: 1;
            background: violet;
            display: flex;
        }
        header p:nth-child(1) { 
            flex: 3;
            background: purple;
        }
        header p:nth-child(2) {
            flex: 2;
            background: pink;
        }
        nav {
            background: red;
            flex: 2;
            display: flex;
        }
        nav p:nth-child(1) {
            flex: 1;
            background: plum;
        }
        nav p:nth-child(2) {
            flex: 3;
            background: powderblue;
        }
        nav p:nth-child(3) {
            flex: 1;
            background: rebeccapurple ;
        }


        section {
            /* 设置网格 */
            display: grid;
            /* 列的宽度 5列每列100px */
            grid-template-columns: repeat(5,100px);
            /* grid-template-columns: 100px 200px 300px; */
            /* grid-template-columns: 100px 1fr 3fr; */
            /* 3行每行100px */
            grid-template-rows: repeat(3,100px);
            /* 划分区域 */
            grid-template-areas: 
                "a1 a1 a1 a2 a2"
                "a3 a4 a4 a4 a5"
                "a3 a4 a4 a4 a6"
            ;
        }
        h2:nth-child(1) {
            background: lightblue;
            grid-area: a1;
        }
        h2:nth-child(2) {
            background: lightsalmon;
            grid-area: a2;
        }
        h2:nth-child(3) {
            background: rgb(163, 38, 157);
            grid-area: a3;
        }
        h2:nth-child(4) {
            background: rgb(11, 175, 79);
            grid-area: a4;
        }
        h2:nth-child(5) {
            background: rgb(190, 137, 22);
            grid-area: a5;
        }
        h2:nth-child(6) {
            background: rgb(114, 131, 67);
            grid-area: a6;
        }
    </style>
</head>
<body>
    <div>
        <header>
            <p>1</p>
            <p>2</p>
        </header>
        <nav>
            <p>1</p>
            <p>2</p>
            <p>
                <span></span>
                <span></span>
            </p>
        </nav>
    </div>

    <section>
        <h2>1</h2>
        <h2>2</h2>
        <h2>3</h2>
        <h2>4</h2>
        <h2>5</h2>
        <h2>6</h2>
    </section>
</body>
</html>

13.单位

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 50px;
        }
        div {
            height: 32px;
            background: red;
        }
        header {
            height: 32px;
            background: yellow;
        }
        nav {
            height: 2rem;
            background: blue;
        }
        section {
            height: 10vw;
            background: blueviolet;
        }
        main {
            height: 10vh;
            background: chartreuse;
        }
    </style>
</head>
<body>
    <!-- 
        px:定值 
        em根据自身的font-size计算 如果自身没有就根据离其最近的父级计算 
        rem根据根元素html的font-size计算
        vw视窗宽度的百分比 1vw=视窗宽度的1%
        vh视窗高度的百分比 1vh=视窗高度的1%
        vmin视窗宽高中较小的那个
        vmax视窗宽高中较大的那个
    
    -->
    <div></div>
    <header></header>
    <nav></nav>
    <section></section>
    <main></main>
</body>
</html>

14.shan.css

.container {
    margin: 0 auto;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
@media all and (min-width:1200px) {
    .container {
        max-width: 1200px;
    }
    .col-lg-1 {
        width: 8.3333333333333333%;
    }
    .col-lg-2 {
        width: 16.666666666666666%;
    }
    .col-lg-3 {
        width: 25%;
    }
    .col-lg-4 {
        width: 33.3333333333333333%;
    }
    .col-lg-5 {
        width: 41.6666666666666666%;
    }
    .col-lg-6 {
        width: 50%;
    }
    .col-lg-7 {
        width: 58.3333333333333334%;
    }
    .col-lg-8 {
        width: 66.6666666666666666%;
    }
    .col-lg-9 {
        width: 75%;
    }
    .col-lg-10 {
        width: 83.3333333333333334%;
    }
    .col-lg-11 {
        width: 91.6666666666666666%;
    }
    .col-lg-12 {
        width: 100%;
    }
}
@media all and (min-width:992px) and (max-width:1199px) {
    .container {
        max-width: 1199px;
    }
    .col-md-1 {
        width: 8.3333333333333333%;
    }
    .col-md-2 {
        width: 16.666666666666666%;
    }
    .col-md-3 {
        width: 25%;
    }
    .col-md-4 {
        width: 33.3333333333333333%;
    }
    .col-md-5 {
        width: 41.6666666666666666%;
    }
    .col-md-6 {
        width: 50%;
    }
    .col-md-7 {
        width: 58.3333333333333334%;
    }
    .col-md-8 {
        width: 66.6666666666666666%;
    }
    .col-md-9 {
        width: 75%;
    }
    .col-md-10 {
        width: 83.3333333333333334%;
    }
    .col-md-11 {
        width: 91.6666666666666666%;
    }
    .col-md-12 {
        width: 100%;
    }   
}
@media all and (min-width:768px) and (max-width:991px) {
    .container {
        max-width: 991px;
    }
    .col-sl-1 {
        width: 8.3333333333333333%;
    }
    .col-sl-2 {
        width: 16.666666666666666%;
    }
    .col-sl-3 {
        width: 25%;
    }
    .col-sl-4 {
        width: 33.3333333333333333%;
    }
    .col-sl-5 {
        width: 41.6666666666666666%;
    }
    .col-sl-6 {
        width: 50%;
    }
    .col-sl-7 {
        width: 58.3333333333333334%;
    }
    .col-sl-8 {
        width: 66.6666666666666666%;
    }
    .col-sl-9 {
        width: 75%;
    }
    .col-sl-10 {
        width: 83.3333333333333334%;
    }
    .col-sl-11 {
        width: 91.6666666666666666%;
    }
    .col-sl-12 {
        width: 100%;
    }
}