HTML基础--CSS3（三）

最新推荐文章于 2023-02-21 09:39:27 发布
最新推荐文章于 2023-02-21 09:39:27 发布
阅读量598 收藏 1
点赞数 1
文章标签： css3 html css 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50315078/article/details/126282057
版权

1.关键帧动画

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:red;
            animation: kerwinrun2 5s linear infinite;
            /* infinite 表示无限次 */
        }

        /* 声明动画，使用keyframes关键帧 */
        @keyframes kerwinrun1 {
            from{
                width: 200px;
                height: 200px;
                background:red;
            }

            to{
                width: 400px;
                height: 600px;
                background:green;
            }
        }

        @keyframes kerwinrun2 {
            0%{
                width: 200px;
                height: 200px;
                background:red;
            }

            25%{
                width: 200px;
                height: 400px;
                background:yellow;
            }

            50%{
                width: 400px;
                height: 400px;
                background:blue;
            }


            75%{
                width: 400px;
                height: 500px;
                background:gray;
            }


            100%{
                width: 400px;
                height: 600px;
                background:green;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

2.animation（单一属性）

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background:red;
            /* animation: kerwinrun1 2s linear infinite; */
            animation-name: kerwinrun1;
            animation-duration: 2s;
            animation-timing-function: linear;
            /* animation-delay: 5s; */
            animation-iteration-count: infinite;
            animation-play-state: running;
            /*
              running
              paused
            */
            animation-direction: alternate-reverse;
            /* normal 正常
               reverse 反方向
               alternate 正常方向-交替
               alternate-reverse 反方向-交替
             */
        }
        div:hover{
            animation-play-state: paused;
        }
        /* 声明动画 */
        @keyframes kerwinrun1 {
            from{
                width: 200px;
                height: 200px;
                background:red;
            }
            to{
                width: 400px;
                height: 600px;
                background:green;
            }
        }
        @keyframes kerwinrun2 {
            0%{
                width: 200px;
                height: 200px;
                background:red;
            }

            25%{
                width: 200px;
                height: 400px;
                background:yellow;
            }

            50%{
                width: 400px;
                height: 400px;
                background:blue;
            }


            75%{
                width: 400px;
                height: 500px;
                background:gray;
            }
            100%{
                width: 400px;
                height: 600px;
                background:green;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

其他属性

  • 抽屉动画–animation-fill-mode(最后一帧的定格)
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height: 100%;
        }

        div{
            height: 100%;
            width: 200px;
            background:red;
            position: fixed;
            left:0px;
            top:0px;
            /* transform: translateX(-200px); */
            transform: translateX(-100%);

            /* 100% 是相对于自身的100% */

            /* animation: run 1s linear forwards; */

            animation: run 1s linear forwards reverse;
             /*animation-fill-mode: forwards; */
            /* none 默认值            
               forwards 最后的画面
               backwards 初始画面
             */
        }
        @keyframes run {
            from{
                transform: translateX(-100%);
            }
            to{
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
  • steps(直接进行关键帧跳跃),linear,ease-in，去除传统补间
    • steps(1,start)等价于step-start
    • steps(1,end)等价于step-end
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            background:red;

            /* animation: run 5s steps(1,start); */
            /* animation: run 5s step-start; */
            animation: run 5s step-end;

            /* end（保留当前帧，看不到最后一帧，动画结束） */
            /* start（保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧） */
        }

        @keyframes run {
            0%{
                background:red;
            }
            50%{
                background:green;
            }
            100%{
                background:yellow;
            }
        }
    </style>
</head>
<body>
    <!-- steps(直接进行关键帧跳跃)  , linear ,ease-in  -->

    <div></div>
</body>

3.轮播图案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .swiper-container{
            width: 640px;
            height: 300px;
            margin:0 auto;
            overflow:hidden;
        }

        .swiper-container img{
            width: 640px;
            height: 300px;
        }
        .swiper-slide{
            float:left;
        }
        .swiper-wrapper{
            width: 9999px;
            animation:swiperrun 10s linear infinite;
        }

        .swiper-wrapper:hover{
            animation-play-state: paused;
        }

        @keyframes swiperrun {
            0%{
                transform: translateX(0);
            }
            5%{
                transform: translateX(-640px);
            }

            25%{
                transform: translateX(-640px);
            }

            30%{
                transform: translateX(-1280px);
            }

            50%{
                transform: translateX(-1280px);
            }

            55%{
                transform: translateX(-1920px);
            }

            75%{
                transform: translateX(-1920px);
            }


            80%{
                transform: translateX(-2560px);
            }

            100%{
                transform: translateX(-2560px);
            }
        }
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="img/1.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/2.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/3.jpg" alt="">
            </div>
            <div class="swiper-slide">
                <img src="img/4.jpg" alt="">
            </div>

            <!-- 为了实现无缝轮播，最后一份跟第一份是一样的， -->
            <div class="swiper-slide">
                <img src="img/1.jpg" alt="">
            </div>
        </div>
    </div>
</body>

4.逐帧动画案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 180px;
            height: 300px;
            background-image: url(./charector.png);
            animation:run 1s steps(1,end) infinite;
        }

        @keyframes run {
            0%{
                background-position: 0px 0;
            }
            14.3%{
                background-position: -180px 0;
            }
            28.6%{
                background-position: -360px 0;
            }
            42.9%{
                background-position: -540px 0;
            }
            57.2%{
                background-position: -720px 0;
            }
            71.5%{
                background-position: -900px 0;
            }
            85.8%{
                background-position: -1080px 0;
            }
            100%{
                background-position: -1260px 0;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>

5.Animate动画库

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
    <style>
        div{
            width: 200px;
            height: 200px;
            background:red;
            margin:0 auto;
        }

        .kerwininfinite{
            animation-iteration-count: 3;
            animation-duration: 3s;
        }
        
    </style>
</head>
<body>
    <div class="animated wobble kerwininfinite"></div>
</body>

6.3D平移

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border:5px solid black;
            transform-style: preserve-3d;
            /* flat: 2d舞台 */
            /* preserve-3d：3d舞台 */
            position: relative;
            margin: 0 auto;
            /* transform: rotateY(30deg); */
            perspective: 900px;
            /* 设置景深 */
        }
        .center{
            position: absolute;
            width: 200px;
            height: 200px;
            background:red;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
            transition:all 5s;
        } 
        .box:hover .center{
            /* transform:translateZ(-200px); */
            transform: translate3d(0,0,200px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center"></div>
    </div>
</body>

7.3D旋转

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border:5px solid gray;
            display: flex;
            transform-style: preserve-3d;
            /* transform: rotateY(30deg); */
            /* transform: rotateX(30deg);; */
        }
        .center{
            margin:auto;
            width: 200px;
            height: 200px;
            background:red;
            /* transform: rotateX(30deg); */        
            /* transform: rotateY(30deg);
             */
             /* transform: rotateZ(30deg); */
             transform: rotate3d(0,0,1,30deg);
             /* 前面三个值取值 0-1,代表对后面角度的倍数（矢量值） */
        }
    </style>
</head>
<body>
    <!-- 3d旋转 -->
    <div class="box">
        <div class="center"></div>
    </div>
</body>

8.3D缩放

在这里插入图片描述

  • 缩放，必须加上景深+旋转
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            border:5px solid gray;
            display: flex;
            transform-style: preserve-3d;
            perspective: 800px;
        }
        .center{
            margin:auto;
            width: 200px;
            height: 200px;
            background:red;
            /* transform: scaleZ(10) rotateX(45deg); */
            transform: scale3d(1,1,10) rotateX(45deg);
        }
    </style>
</head>
<body>
    <!-- 3d缩放 -->
    <div class="box">
        <div class="center"></div>
    </div>
</body>

9.立方体案例

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

        .box{
            width: 600px;
            height: 600px;
            margin:0 auto;
            border:5px solid gray;
            transform-style: preserve-3d;
            position: relative;
            transform: rotateY(30deg) rotateX(30deg);
            animation: run 5s linear infinite;
        }

        @keyframes run {
            0%{
                transform: rotateY(30deg) rotateX(30deg);
            }

            50%{
                transform: rotateY(300deg) rotateX(300deg);
            }

            100%{
                transform: rotateY(30deg) rotateX(30deg);
            }
        }

        .box div{
            width: 200px;
            height: 200px;
            /* background: */
            position: absolute;
            left:50%;
            top:50%;
            margin-left: -100px;
            margin-top:-100px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color:white;
            opacity: 0.7;
        }

        .box div:nth-child(1){
            background:gray;
            transform: translateZ(100px);
        }
        .box div:nth-child(2){
            background:cadetblue;
            transform: translateX(-100px) rotateY(-90deg);
        }
        .box div:nth-child(3){
            background:purple;
            transform: translateY(-100px) rotateX(90deg);
        }
        .box div:nth-child(4){
            background:green;
            transform: translateY(100px) rotateX(-90deg);
        }

        .box div:nth-child(5){
            background:red;
            transform: translateX(100px) rotateY(90deg);
        }
        .box div:nth-child(6){
            background:darkblue;
            transform: translateZ(-100px);
        }
    </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>
</body>

10.网格布局

1.使用网格布局

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • 使用网格布局
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box{
            width: 200px;
            height: 200px;
            background:red;
            /* display: grid; 块级网格 */
            /* display: inline-grid; 行内块级网格 */
            display: grid;
        }
    </style>
</head>
<body>
    <span>1111</span>
    <span class="box">222</span>
    <span>3333</span>
</body>

2.行与列的划分

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.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: 33.3% 33.3% 33.4% ;
            grid-template-columns: 33.3% 33.3% 33.4% ; */

            /* 3 repeat（重复函数，防止手写特别多遍） */
            /* grid-template-rows: repeat(3,33.33%);
            grid-template-columns: repeat(3,33.33%); */

            /* 4. repeate autofill（重复函数加自动填充，防止算不出来应该具有多少份，而且百分比和px都可以使用） */
            /* grid-template-rows: repeat(auto-fill,200px);
            grid-template-columns: repeat(auto-fill,20%); */
        
            /* 5. fr 片段，指的是整体按照相对单位的多少来定，每份的大小是权重/权重和 */
            /* grid-template-rows: 1fr 2fr  1fr;
            grid-template-columns: 1fr 2fr  1fr; */
        
            /* 6. minmax ，限制最小最大值，直接写就行，其他的按其他原则写*/
            /* grid-template-rows: minmax(100px,200px)  200px 100px;
            grid-template-columns: 200px  200px 200px; */

            /* 7 auto，自动填满剩余空间 */

            grid-template-rows: 100px  200px auto;
            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>

3.列间距

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <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;
            /* row-gap:20px;
            column-gap:20px; */
            gap:20px 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>

4.指定区域（命名与合并）

在这里插入图片描述

在这里插入图片描述

  • 注意，这种方式仍然实现不了T型布局
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            /* background:red; */
            display: grid;
            border: 5px solid gray;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
            grid-template-areas: 'a e e'
                                 'd e e'
                                 'g h i' 
            ;
        }
        /* .box div:nth-child(1){
            grid-area:a;
        } */

        /* .box div:nth-child(5){
            grid-area:e;
        } */

        .box div:nth-child(2){
            grid-area:e;
        }
    </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>
</body>

5.网格布局案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 650px;
            height: 320px;
            border:5px solid red;
            margin:0 auto;
            display: grid;
            grid-template-rows:repeat(3,100px);
            grid-template-columns:repeat(6,100px);

            grid-template-areas: 'a a a a b b'
                                 'a a a a c c'
                                 'd d e f c c'
            ;

            grid-gap:10px 10px;
        }

        .box img{
            width: 100%;
        }
        .box img:nth-child(1){
            grid-area:a;
        }
        .box img:nth-child(2){
            grid-area:d;
        }
        .box img:nth-child(3){
            grid-area:e;
        }
        .box img:nth-child(4){
            grid-area:f;
        }
        .box img:nth-child(5){
            grid-area:b;
        }
        .box img:nth-child(6){
            grid-area:c;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/a1.png" alt="">
        <img src="images/a2.png" alt="">
        <img src="images/a3.png" alt="">
        <img src="images/a4.png" alt="">
        <img src="images/a5.png" alt="">
        <img src="images/a6.png" alt="">
    </div>
</body>

6.网格布局–对齐方式

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

  • place-items(复合属性)
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            /* background:red; */
            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 green;
            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>

7.网格线合并

在这里插入图片描述

在这里插入图片描述

  • 复合属性

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            display: grid;
            border:5px solid gray;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
        }

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

        .box div:nth-child(2){
            /* grid-column-start:2;
            grid-column-end:4;
            grid-row-start:1;
            grid-row-end:3 */
            grid-column: 2/4;
            grid-row:1/3;
        }
    </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>

8.网格线合并案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 650px;
            height: 320px;
            border:5px solid red;
            margin:0 auto;
            display: grid;
            grid-template-rows:repeat(3,100px);
            grid-template-columns:repeat(6,100px);

            grid-template-areas: 'a a a a b b'
                                 'a a a a c c'
                                 'd d e f c c'
            ;

            grid-gap:10px 10px;
        }

        .box img{
            width: 100%;
        }
        .box img:nth-child(1){
            grid-column: 1/5;
            grid-row:1/3;
        }
        .box img:nth-child(2){
            grid-column: 1/3;
            grid-row:3/4;
        }
        .box img:nth-child(3){
            grid-column: 3/4;
            grid-row:3/4;
        }
        .box img:nth-child(4){
            grid-column: 4/5;
            grid-row:3/4;
        }
        .box img:nth-child(5){
            grid-column: 5/7;
            grid-row:1/2;
        }
        .box img:nth-child(6){
            grid-column: 5/7;
            grid-row:2/4;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="images/a1.png" alt="">
        <img src="images/a2.png" alt="">
        <img src="images/a3.png" alt="">
        <img src="images/a4.png" alt="">
        <img src="images/a5.png" alt="">
        <img src="images/a6.png" alt="">
    </div>
</body>
孤影&碧空
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
freeMarker 中宏＜#macro ＞解析
qq_27009517的博客
12-15 3658
用户定义指令－使用@符合来调用 有两种不同的类型：Macro(宏)和transform(传递器)，Macro是在模板中使用macro指令定义，而transform是在模板外由程序定义(基本上都是基于Java的)，这里通过Macro来介绍自定义指令。 1：在介绍宏<#macro >之前我们先了解一下html中<meta>标签： 1.1、name= viewport <meta name="viewport" content="width=device...
关于html中head的写法.-搜索引擎SEO优化
gwdfff的博客
01-17 954
文章目录蜜罐智能柜 蜜罐智能柜 <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1"> <title>蜜罐智能柜</title> <me...
前端基础-01-HTML
gemoumou的python学习实记
05-19 810
一个完整的网页是由 >html:完成页面各组成部分的搭建;css：进行页面修饰；js：让html页面具有很多的功能 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我是标题</title>.
html5中的meta标签用法详解
专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播
02-21 3149
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。html5中的meta标签主要用于描述网页的元数据，它可以用于描述网页的标题、关键词、描述、作者、版权等信息，还可以用于设置网页的字符集、设置网页的刷新时间、设置网页的跳转页面等。
移动端H5如何固定表头和首列
一个有节操的码农
07-30 872
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" > <title>固定表头和首列</title> <script src="https://code.jquery.com/.
事项助手-html-css
最新发布
06-17
HTML是网页内容的基础结构，而CSS则负责这些内容的呈现样式和布局。 HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它的主要功能是定义网页的结构，如标题、段落、链接、图像等元素。在"事项...
xtx-pc html css
03-10
一、HTML基础 HTML是一种标记语言，用于定义网页的结构。在XTX-PC项目中，HTML文件起着骨架的作用，它定义了页面的基本元素，如标题（`<h1>`至`<h6>`）、段落（`<p>`）、链接（`<a>`）、图像（`<img>`）等。通过...
HTML-CSS结合-基础讲解2022优秀文档.ppt
11-14
HTML 和 CSS 是构建网页设计的基础，它们的结合使得开发者能够创建功能丰富且视觉美观的网页。下面我们将深入探讨这两个核心技术。 XHTML 部分： XHTML，即 Extensible Hypertext Markup Language，是 HTML 的一个...
html-css-网页模板-团队介绍
11-23
【标题】"html-css-网页模板-团队介绍" 指的是一个基于HTML和CSS设计的网页模板，专门用于展示团队成员的介绍。这个模板可能包含各种页面元素和布局，如团队成员的照片、简介、职位、联系方式等，帮助网站访客了解一...
html-and-css-w2d3
03-02
标题“html-and-css-w2d3”暗示了这是一个关于HTML和CSS的学习资源，可能是某个在线课程的第二周第三天的课程内容。在这个主题下，我们将深入探讨HTML与CSS这两个核心的网页设计技术。 HTML（HyperText Markup ...
移动前端开发之viewport的深入理解
FFy's Blog
01-26 1万+
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个a
关于HTML5中meta name=“viewport“ 的用法
热门推荐
自然醒
11-01 7万+
vieport，移动端布局
HTML meta 标签
zhangankang的博客
06-28 3万+
！！<meta> 标签是 HTML 语言头部的一个辅助性标签，我们可以定义页面编码语言、搜索引擎优化、自动刷新并指向新的页面、控制页面缓冲、响应式视窗等！ 属性 值 描述 charset( H5 New) character_set 定义文档的字符编码。 content text 定义与 http-equiv 或 name 属性相关...
head头部meta标签设置
baidu_16685009的博客
11-22 1576
&lt;meta name="renderer" content="webkit" /&gt; //360浏览器 //若页面需默认用极速核，增加标签：&lt;meta name="renderer" content="webkit"&gt;  //若页面需默认用ie兼容内核，增加标签：&lt;meta name="renderer" content="i
css实现多行文字限制显示
weixin_30945039的博客
03-28 72
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,...
CSS（CSS3）知识点学习
于公子的博客
03-03 5286
CSS（CSS3）自我学习，知识点总结
Web学习（一） html基础标签
May the Force be with you
03-05 3198
Web学习（一） html基础标签 1.1 文档结构 文档结构 html的所有标签为树形结构，例如： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</ti
Vue模板语法（二）
凉茶铺的博客
01-17 2061
介绍了vue条件语句、v-show、template元素、v-show和v-for模板语法的使用方法，对其用法进行了说明。
H5开发：H5如何设置head头部与做到咯浏览器适配
Generon的博客
07-25 1万+
meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 name="format-detect
HTML5与CSS3基础教程 - 入门指南
"这是一份HTML5与CSS3的基础教程，适用于初学者，也适合中高级开发者更新知识。书中详尽地介绍了HTML5的新特性及CSS3的特效，包含网页元素如文本、图像、链接、列表、表格、表单的使用，同时也讲解了网页布局、动态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值