coderwhy--前端知识整合包--htmlcss08

最新推荐文章于 2024-04-19 10:49:05 发布

Princesk

最新推荐文章于 2024-04-19 10:49:05 发布

阅读量1.3k

点赞数

分类专栏： html5/css基础学习文章标签： css3 html css

本文链接：https://blog.csdn.net/Princesk/article/details/108771859

版权

html5/css基础学习专栏收录该内容

7 篇文章 5 订阅

订阅专栏

coderwhy–前端知识整合包–html/css08

1、css–颜色渐变（背景颜色）

linear-gradient(0,red,blue);角度、渐变颜色一、渐变颜色二

    <style>
        .box{
            width: 100px;
            height: 100px;
            background: linear-gradient(0,red,blue);
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

2、有些元素无法使用transfrom

只适用于可行变元素，行内元素无效，修改display可以有效

3、高斯模糊fluter

 
 /* 轮播图服务 */
#top .banner .server{
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;

    /* width: 100%; */
    height: 45px;
    /* background-color: rgb(0,0,0,.6); */
    /* 滤镜 */

    
}
#top .banner .server .blur{
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;

    /* height: 45px; */
    /* background-color: hotpink; */

    background-image: url("../asset/image/lunbo1.jpg") ;
    background-position: center bottom;
    filter: blur(10px);

    z-index: -1;
}
#top .banner .server .wrap ul{
    height: 45px;
    line-height: 45px;

}
#top .banner .server .wrap ul li{
    float: left;
    font-size: 15px;
    margin-right: 30px;
}
 
 
 
 <div class="banner">
            <a class="swiper"href="#">
                <img src="./asset/image/lunbo1.jpg" alt="">
            </a>

            <div class="server">
                <div class="blur"></div>
                <div class="wrap">
                    <ul>
                        <li>卡拉直营</li>
                        <li>全球直产</li>
                        <li>假一赔十</li>
                        <li>假s赔十</li>
                    </ul>
                </div>
            </div>
        </div>

4、无法撑起a元素原因

如果对某一个a元素内部内容在设置浮动情况下还设置了z-index，有很大可能，a元素无法撑起内容

遇到这种情况注意z-index

5、html5新增语义元素

让网页语义化，如nav、header、section、article、aside、footer等，这些元素都算块级元素

6、媒体元素video与audio

音频audio

(1)常见属性

src：媒体来源

controls：增加控制工具栏

autoplay：自动播放

muted：静音

loop：循环播放

<audio src="" controls autoplay muted loop>
    <!--多个格式防止浏览器不识别-->
    <source src="/.mp4">
    <source src="/.avi">
    <source src="/.webm">
</audio>

视频video

(1)常见属性

src：媒体来源

controls：增加控制工具栏

autoplay：自动播放

muted：静音

loop：循环播放

<video src="" controls autoplay muted loop>
    <!--多个格式防止浏览器不识别-->
    <source src="/.mp4">
    <source src="/.avi">
    <source src="/.webm">
</video>

7、html5–input元素扩展

placeholder:输入框站位文字

multiple:多个值

autofocus:最多输入内容（自动聚焦）

8、flex布局（重要，比浮动好用，老板不支持）

(1)概念

开启flex布局元素叫 flex container

flex container里面子元素叫flex items

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tps2Lib3-1600922672614)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200727182546983.png)]

<!--开启flex布局，flex是块级元素，inline-flex是行内-->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
        }.item2{
            background-color: rebeccapurple;
        }.item3{
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

(2)flex-container属性

flex direction决定主轴方向，但是这个属性可以改变flex布局块内主轴方向

row：主轴方向默认是浏览器布局方向（从左到右）

row-reverse：是浏览器布局方向（从右到左）

column：是浏览器布局方向（从上到下）

column-reverse：是浏览器布局方向（从下到上）

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            flex-direction: row-reverse;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
        }.item2{
            background-color: rebeccapurple;
        }.item3{
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

（3）justify-content，决定主轴上对齐方式

flex-start:默认值，在开始位置对齐

flex-end:main end对齐

center：居中对齐，不需要margin 0 auto什么的

space-between：flex-items之间距离相等，main-start、end两端对齐

spcae-evenly：flex-items之间距离相等，main-start、end跟前面相等

space-around：flex-items之间距离相等，，main-start、end变为前面一半

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            /* flex-direction: row-reverse; */
            justify-content: flex-end;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
        }.item2{
            background-color: rebeccapurple;
        }.item3{
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

（4）align-items，flex-items在cross axis交叉轴对齐方式

noraml:早弹性布局效果和stretch一致

stretch: 当flex-items在cross axis方向上的size为auto时，会自动填充到flex container

flex-start: 与cross start对齐

flex-end: 与cross end对齐

center: 居中对齐

baseline: 与基线对齐，且不是最后一行而是第一行

  <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            /* flex-direction: row-reverse; */
            justify-content: flex-end;
            align-items: center;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
            height: 30px;
        }.item2{
            background-color: rebeccapurple;
            height: 60px;
        }.item3{
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

（5）flex-wrap,修改flex-item一行显示格式


<!--没有该属性时--><style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            /* flex-direction: row-reverse; */
            justify-content: flex-end;
            align-items: center;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
            /* height: 30px; */
        }.item2{
            background-color: rebeccapurple;
            /* height: 60px; */
        }.item3{
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>




<!--有改属性-->
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            /* flex-direction: row-reverse; */
            justify-content: flex-end;
            align-items: center;

            flex-wrap: wrap;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
            /* height: 30px; */
        }.item2{
            background-color: rebeccapurple;
            /* height: 60px; */
        }.item3{
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

（6）flex-flow,缩写属性=flex-direction +flew-wrap

flex-flow:row wrap

取值跟上面的fle-wrap一直

algin-content,决定多行flex-items在cross axis对齐方式，用法跟justify-content类似，常用于多行属性设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R0ZpSFFF-1600922672617)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200727223352988.png)]

(7)flex-items属性（flex布局里的所有子元素都被认为是flex-items）

order,决定item排布顺序，值越小越靠前

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            /* flex-direction: row-reverse; */
            justify-content: flex-end;
            /* align-items: center; */

            /* flex-wrap: wrap; */
            align-content: center;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
            /* height: 30px; */
            order: 20;
        }.item2{
            background-color: rebeccapurple;
            /* height: 60px; */
            order: 23;
        }.item3{
            background-color: lawngreen;
            order: 19;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

align-self，会覆盖你父元素的algin-items属性值，为单独flex-item设置

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            /* flex-direction: row-reverse; */
            justify-content: flex-end;
            align-items: center;

            /* flex-wrap: wrap; */
            align-content: center;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
        }.item1{
            background-color: bisque;
            height: 30px;
            order: 20;
        }.item2{
            background-color: rebeccapurple;
            height: 60px;
            order: 23;


        }.item3{
            background-color: lawngreen;
            align-self: baseline;
            order: 19;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

flex-grow，根据数字一行数字之和等分给所有行内元素,也支持小数

小数之和没有大于1不会沾满全部空间，分发按照小数乘以总宽度去分配

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            /* flex-direction: row-reverse; */
            justify-content: flex-end;
            /* align-items: center; */

            /* flex-wrap: wrap; */
            align-content: center;
        }
        .item{
            width: 50px;
            height: 50px;
            text-align: center 
            
        }.item1{
            background-color: bisque;
            height: 30px;
            /* order: 20; */
            flex-grow: 1;
        }.item2{
            background-color: rebeccapurple;
            height: 60px;
            flex-grow: 1;
            /* order: 23; */


        }.item3{
            background-color: lawngreen;
            align-self: baseline;
            flex-grow: 3;
            /* order: 19; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

flex-shrink，收缩，当一行内不够撑开所有元素时可以一试，同样也可以是小数

如果小数之和没超过1，每个item收缩比例size为

item超过container的size 乘 sum 乘收缩比例/flex items收缩比例之和
收缩比例=shrink*item的baseline
basesize就是item放入container之前的size

    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            display:flex;
            justify-content: flex-end;

            align-content: center;
        }
        .item{
            width: 100px;
            height: 50px;
            text-align: center 
            
        }.item1{
            background-color: bisque;

            flex-shrink: 2;
             /* w==100-100*2/8 */

        }.item2{
            background-color: rebeccapurple;

            flex-shrink: 2;
             /* w==100-100*4/8 */



        }.item3{
            background-color: lawngreen;
            flex-shrink: 4;
            /* w==100-100*4/8 */

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
</body>

flex-basis，用来设置主轴mainaxis方向上的大小（base-size）

用来决定一个item在主轴上面的大小,优先级最高，

优先级：

max-width\max-height\min-width\minheight
flex-basis
width\height
内容本身的size

(4)要点补充

a、默认情况下，所有flex-item都会在同一行显示

b、缩写属性flex：flex-grow||flex-shrink||flex-basis

单值语法无单位数为flex-grow
- 有效宽度值flex-basis
  
  关键字none auto initial
双值语法
- 第二值必为以下其一一个无单位数为shrinl
- 一个有效宽度值basis
三值语法
- grow无单位数
- shrink无单位数
- basis有效宽度值

9、网络字体使用

    <style>
        @font-face {
            font-family: "kai";
            src: url("D:\Github\coderwhy_html\html基本元素\test\font\FZSTK.TTF") 
            
             }

             p{
                 font-family: "kai";
             }
    </style>
</head>
<body>
    <p>jizj时间简史</p>
</body>

10、字体图标和阿里icon库

两种用法

直接引用字体格式内容

从icon下载所需图表，然后将icon文件的不同格式复制到font中，然后将阿里icon库里对应的图表代码复制到页面里

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29VxhzUz-1600922672621)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728220004449.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6ICRivPx-1600922672624)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728220024867.png)]

    <style>
        @font-face {
            font-family: "kai";
            src: url("./font/iconfont.svg"), 
            url("./font/iconfont.ttf"),
            url("./font/iconfont.woff"),
            url("./font/iconfont.woff2");
        }

             p{
                 font-family: "kai";
             }
    </style>
</head>
<body>
    <p>&#xe659;</p>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sjoPfsym-1600922672628)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728215922668.png)]

这玩意看着是图片但本质为字体，请注意，用字体设置方式控制此图标变化，字体能设置的都能使用

导入字体的css样式，然后通过字体对应代码和设置该css里class样式使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kdEfZQHa-1600922672630)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728221048233.png)]

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/iconfont.css">
    <style>
        /* @font-face {
            font-family: "kai";
            src: url("./font/iconfont.svg"), 
            url("./font/iconfont.ttf"),
            url("./font/iconfont.woff"),
            url("./font/iconfont.woff2");
        } */

             p{
                 font-family: "kai";
             }
    </style>
</head>
<body>
    <p class="iconfont">&#xe659;</p>
    <span class="iconfont icon-flow "></span>
</body>

优点

放大不失真
可以任意切换颜色
使用多个图标文件相对其他图标较小

11、html5–使用图片方式

img元素
- 不能实用精灵图
background-image
- 装饰
- 先加载css-url
- 能实用精灵图
iconfont字体图标
- 放大不失真
- 可以任意切换颜色
- 使用多个图标文件相对其他图标较小，节省空间

12、css–关键帧动画

（1）跟transition的过渡动画不同，transition只定义了相当于关键帧的第一针和最后一针

（2）动画若有多种变化可以使用关键帧动画

（3）关键帧动画使用规则

使用@keyframes来定义多个变化状态并使用animation-name来声明匹配
- 首先使用@keyframes创建一个规则
- 其次使用@keyframes百分比定义各个阶段样式
- 通过animation将动画添加到属性上
  - animation值（按顺序表现）：
    - [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lr3Vdkar-1600922672633)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200728224211529.png)]

    <style>
        .one{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        .one:hover{
            animation: test1 2s linear,test2 4s linear;
            /*       执行的关键帧动画名字  持续时间  展示形式 
            
            可以用，写多个动画，但是这不同的动画不能用同一个属性，否则后一个动画会层叠掉前一个动画的同名属性值，只能表现出后一个动画的效果,比如现在*/
        }
        @keyframes test1 {
            0%{
                transform:  translate(0,0);
                opacity: 0;
            }
            25%{
                transform:  translate(2,200px);
                opacity: 2;
            }
            50%{
                transform:  translate(4,50px);
                opacity: 10;
            }
            75%{
                transform:  translate(0,200px);
                opacity: 0.2;
            }
            100%{
                transform:  translate(0,0);
                opacity: 0;
            }
        }


        @keyframes test2 {
            0%{
                transform:  scale(2,2);
                opacity: 0;
            }
            25%{
                transform:  scale(2,200px);
                opacity: 2;
            }
            50%{
                transform:  scale(4,50px);
                opacity: 10;
            }
            75%{
                transform:  scale(0,200px);
                opacity: 0.2;
            }
            100%{
                transform:  scale(0,0);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="one">

    </div>
</body>

13、css–3d动画

实现方式：transform-style：presserve-3d

perspective

       }
        100%{
            transform:  translate(0,0);
            opacity: 0;
        }
    }


    @keyframes test2 {
        0%{
            transform:  scale(2,2);
            opacity: 0;
        }
        25%{
            transform:  scale(2,200px);
            opacity: 2;
        }
        50%{
            transform:  scale(4,50px);
            opacity: 10;
        }
        75%{
            transform:  scale(0,200px);
            opacity: 0.2;
        }
        100%{
            transform:  scale(0,0);
            opacity: 0;
        }
    }
</style>

</div>

```

13、css–3d动画

实现方式：transform-style：presserve-3d

perspective

js实现的3d库：three.js

Princesk

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
coderwhy--前端知识整合包--htmlcss08

coderwhy–前端知识整合包–html/css081、css–颜色渐变（背景颜色）linear-gradient(0,red,blue);角度、渐变颜色一、渐变颜色二 <style> .box{ width: 100px; height: 100px; background: linear-gradient(0,red,blue); } </style>&
复制链接

扫一扫