提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

HTML基础第五课（冲浪笔记5）

基础笔记HTML 冲浪 第五课
2023-06-13 09:13:10 时间

一、透明度

1、opacity不透明度

是占位置的，子元素也会透明

0（完全透明）-1（完全不透明）

（1）区别

display: none; 块会消失，不占位置

opacity: 0; 块会消失，但是还占位置

（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;
        }
        .box2{
            width: 100px;
            height: 200px;
            background-color: blue;
            display: none;
        }
        .box1{
            width: 100px;
            height: 200px;
            background-color: rgb(187, 255, 0);
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

2、background: rgba(r,g,b,a);

元素不受影响

二、手势（改变鼠标形状）https://www.runoob.com/try/try.php?filename=trycss_cursor

小手cursor: pointer;

image.png

三、最大/最小宽度

1、max-width、max-height

类似于将宽高定死

2、min-width、min-height

当界面缩小到固定范围后，内容不会再跟着缩小

代码例子，需要的小伙伴可以复制运行在自己的浏览器看效果

<!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;
        }
        .box{
            background-color: rgb(255, 0, 4);
            min-width: 500px;
            max-height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">多地高招录取启动3中国经济正在稳步恢复热1枪击案嫌犯称最初目标并非安倍热480秒看斯里兰卡大抗议6个时间节点新231省份新增本土“65+279”热5《密室大逃脱》节目组致歉</div>
</body>
</html>
背景色的最大高度、字体内容的最小宽度

四、transform属性

1、平移

transform: translate(x轴, y轴);

transform:translateX(200px);

transform:translateY(); 

<!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;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            /* transform: translate(100px,50px); */
            /* transform: translateX(200px); */
            transform: translateY(150px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 其他平移效果，小伙伴可以将上面代码的注释去掉观察蛤

2、旋转

transform: rotate(45deg);

<!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;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            transform:rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="box">2</div>
</body>
</html>

 旋转135°的效果，deg为度的角度单位

3、缩放

transform: scale(缩放比例)

transform: scaleX()

transform: scaleY()

<!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;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            transform: scale(0.5);
            /* transform: scaleX(0.6); */
            /* transform: scaleY(0.3); */
        }
    </style>
</head>
<body>
    <div class="box">2</div>
</body>
</html>

注意：缩放改变大小，但是位置还在

4、三合一

transform: translate(200px,200px) rotate(45deg) scale(0.5);

注意：三者位置不同效果截然不同

（1）transform: translate(200px,200px) rotate(45deg) scale(0.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;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 4);
            transform: translate(200px,200px) rotate(45deg) scale(0.5);
        }
    </style>
</head>
<body>
    <div class="box">2</div>
</body>
</html>

（2） transform: rotate(45deg) translate(200px,200px) scale(0.5); 先旋转，再平移，最后缩小

会出现显示不正常

 还有其他情况，这里就不一一展示，小伙伴们可以自己去尝试

五、动画CSS3 animation 属性 | 菜鸟教程

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>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 10px solid rgb(168, 38, 166);
        }
        .move{
            width: 100px;
            height: 100px;
            background-color: blue;
            animation-name: moveBox;/*动画名称*/
            animation-duration: 2s;/*2s完成这件事情（周期2s）*/
            animation-iteration-count: infinite;/*动画迭代次数：无限次*/
            animation-delay: 2s;/*延迟3s后才开始（延迟启动时间）*/
            animation-timing-function: linear;/*动画从头到尾速度相同（默认是以低速开始，然后加快，结束前变慢）*/
            /* animation: moveBox 2s linear 2s infinite; */
        }@keyframes moveBox{
            0%{
                transform: translate(0,0);
                background-color: aqua;
            }
            25%{
                transform: translateX(400px) rotate(360deg);
                background-color: rebeccapurple;
                height: 50px;
            }
            50%{
                transform: translate(400px,400px) rotate(90deg);
                background-color: black;
                width: 200px;
            }
            75%{
                transform: translate(0,400px) rotate(360deg) scale(0.5);
                background-color: blue;
            }
            100%{
                transform: translate(0,0) rotate(0deg);
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="move"></div>
    </div>
</body>
</html>

代码效果小伙伴们可以把代码复制，运行查看，更多效果可以参考网址介绍

六、calc函数（自动计算动态宽度）

注意：-前后有空格

<!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;
        }
        .left{
            width: 300px;
            height: 200px;
            background-color: aqua;
            float: left;
        }
        .right{
            width: calc(100% - 300px);/*注意-前后有空格*/
            height: 200px;
            background-color: orange;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

七、媒体查询：适应设备CSS3 @media查询 | 菜鸟教程

代码例子，小伙伴可以复制代码运行查看效果

<!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;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: aqua;
            float: left;
            margin-bottom: 10px;
            margin-right: 10px;
        }@media screen and (max-width:620px){
            body{
                background-color: brown;
            }
            .box1{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box1"></div>
</body>
</html>

八、清除浮动：因为float不占空间，有时候影响后面的布局

代码例子

<!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;
        }
        .box{
           border: 10px solid yellow;
        }
        /* 清除浮动 
        .box::after{
            content: "";
            display: block;
            clear: both;
        }
        */
        .item{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-right: 10px;
            float: left;
        }
        .part{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="part"></div>
</body>
</html>

1、清除浮动前

2、清除浮动后

九、过渡属性：标签样式发生变化时有动画效果

1、格式： transition: 2s;

<!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;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            transition: 2s;
        }
        .box:hover{
            height: 200px;
            background-color: rgb(0, 234, 255);
            transform: translate(100px,100px);
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
</html>

相关文章