8.20笔记

最新推荐文章于 2024-11-01 14:48:20 发布

aaaaaaaallllll653

最新推荐文章于 2024-11-01 14:48:20 发布

阅读量178

点赞数 2

文章标签：笔记 css css3

本文链接：https://blog.csdn.net/aaaaaaaallllll/article/details/141366031

版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* 粘性定位 */
        /* .box {
            width: 100%;
            height: 3000px;
        }
        .box div {
            width: 100%;
            height: 30px;
            background-color: aqua;
            line-height: 30px;
            text-align: center;
        }
        .one {
            position: -webkit-sticky;
            position: sticky;
            top:0;
        }
        .two {
            margin-top: 600px;
            position: -webkit-sticky;
            position: sticky;
            top:0;
        }
        .three {
            margin-top: 600px;
            position: -webkit-sticky;
            position: sticky;
            top:0;
        } */
/* 案例 */
         /* .box {
            width: 300px;
            border: 3px solid #f00;
            overflow: hidden;
            position: absolute;
            right: 0;
            bottom: 0;
         }
         .box img {
            width: 100%;
            float: left;
            position: relative;
         }
         .sign {
            width: 30px;
            color: #f00;
            font-size: 30px;
            position: absolute;
            right: 0;
            overflow: hidden;
         }
         .sign:hover {
            transform: rotate(180deg);
            transition: all 1s;
         }
         .sign p {
            margin: 0;
         } */
/* 定位层级 */
        /* div {
            width: 200px;
            height: 200px;
        }
        .red {
            background-color: #f00;
            position: absolute;
            z-index: 2;
        }
        .blue {
            background-color: #00f;
            position: absolute;
            margin: 50px;
            z-index: 1;
        }
        .green {
            background-color: #0f0;
            position: absolute;
            margin: 100px;
            z-index: 1;
        } */
/* 透明度 */
        /* div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            float: left;
            opacity: 1;
        }
        div:hover {
            opacity: .3;
        }
        div p {
            font-size: 50px;
            margin-top: 10px;
        } */
/* 光标属性 */
         /* p {
            width: 50px;
            height: 50px;
            border: 1px solid #f00;
            line-height: 50px;
            text-align: center; */
            /* 此处默认为"I"光标 */
            /* cursor: pointer; */
            /* 改变为小手光标  */
        /* }  */
/* 隐藏元素的六种方式 */
        /* 1.display*/
            /* div {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                display: none;
                transition:all 1s;
            }
            button:hover~div {
                display: block;
            } */
        /* 2.opacity */
            /* div {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                opacity: 0;
                transition: all 1s;
            }
            button:hover~div {
                opacity: 1;
            } */
        /* 3.设置宽高 */
            /* div {
                width: 0px;
                height: 100px;
                background-color: aquamarine;
                transition: all 1s;
                overflow: hidden;
            }
            button:hover~div {
                width: 100px;
            } */
        /* 4.visibility */
            /* div {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                transition: all 1s;
                visibility: hidden;
            }
            button:hover~div {
               visibility: visible;
            } */
        /* 5.position */
            /* div {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                transition: all 1s;
                position: absolute;
                top:-100px
            }
            button:hover~div {
                top:0
            } */
        /* 6.缩放scale */
            /* div {
                width: 100px;
                height: 100px;
                background-color: aquamarine;
                transition: all 1s;
                margin: 200px;
                transform: scale(0);
            }
            button:hover~div {
               transform: scale(1);
            } */
/* 元素垂直水平居中 */
            /* div {
                width: 100px;
                height: 100px;
                background-color: aqua;
                margin: auto;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            } */
    </style>
</head>
<body>
<!-- 粘性定位 -->
    <!-- <div class="box">
        <div class="one">哈哈哈</div>
        <div class="two">啦啦啦</div>
        <div class="three">呵呵呵</div>
    </div> -->
<!-- 案例 -->
     <!-- <div class="box">
        <div class="imge">
            <img src="../8.6作业/pe.png" alt="">
        </div>
        <div class="sign">
            <p>×</p>
        </div>
     </div> -->
<!-- 定位层级 -->
      <!-- <div class="red"></div>
      <div class="blue"></div>
      <div class="green"></div> -->
<!-- 透明度 -->
      <!-- <div>
            <p>哈哈哈</p>
        </div>   -->
<!-- 光标属性 -->
        <!-- <p>点击</p> -->
<!-- 隐藏元素的六种方式 -->
        <!-- 1.使用display 特点：不占据空间不能添加过渡效果 -->
            <!-- <button>悬浮隐藏/显示</button>
            <div>
                <p>hahah</p>
            </div> 
            <p>lalal</p> -->
        <!-- 2.opacity 特点：占据空间可以添加过渡效果-->
            <!-- <button>悬浮隐藏/显示</button>
            <div>
                <p>hahah</p>
            </div> 
            <p>lalal</p>-->
        <!-- 3.设置宽高 特点：占据一个方向的空间，可以使用过渡效果-->
            <!-- <button>悬浮隐藏/显示</button>
            <div>
                <p>hahah</p>
            </div>
            <p>lalal</p> -->
        <!-- 4.visibility 特点：占据空间不可以使用过渡效果-->
            <!-- <button>悬浮隐藏/显示</button>
            <div>
                <p>hahah</p>
            </div>
            <p>lalal</p> -->
        <!-- 5.position 特点：不占据空间可以使用过渡效果（不推荐）-->
            <!-- <button>悬浮隐藏/显示</button>
            <div>
                <p>hahah</p>
            </div>
            <p>lalal</p> -->
        <!-- 6.缩放scale 特点：可以使用过渡效果不占据空间-->
            <!-- <button>悬浮隐藏/显示</button>
            <div>
                <p>hahah</p>
            </div>
            <p>lalal</p> -->
<!-- 元素垂直水平居中 -->
            <!-- <div></div> -->
<!-- html5新增表单 -->
        <!-- 下拉菜单 -->
            <!-- <form action="">
                <input list="inp" name="aaa">
                <datalist id="inp">
                    <option value="sadfb"></option>
                    <option value="asfd"></option>
                    <option value="hrth"></option>
                    <option value="vnnn"></option>
                    <option value="tyuk"></option>
                </datalist>
            </form> -->
        <!-- 正则 -->
            <!-- <form action="">
                <input type="text" pattern="1[a-z]{2,5}">
                <input type="submit">
            </form> -->
        <!-- 提交到不同页面 -->
            <!-- <form action="aaa.cn">
                <input type="text">
                <input type="submit" value="登录" formaction="qwe">
                <input type="submit" value="注册" formaction="asd">
            </form> -->
    </body>
</html>

html5新增结构化标签：

新的特殊内容元素，比如 header、nav、section、article、footer
新的表单控件，比如 required、date、time、email、url、search
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
新增了本地存储

html5删除的元素：

<acronym>首字母缩写

<applet>嵌入的applet（Applet是采用Java编程语言编写的小应用程序）

<basefont>Applet是采用Java编程语言编写的小应用程序

<big>大号字体效果

<center>居中

<dir>定义目录列表

<font>规定文本字体、大小和颜色

<frame>框架

<frameset>框架集

<noframes>noframes

<strike>可定义加删除线

<tt>呈现类似打字机或者等宽的文本效果

html5音视频标签：

<!-- 音频或者视频 -->
<object data="../video/Tomorrow.mp4" height="200" width="200"></object>
<!-- 音频或者视频 -->
<embed src="../video/Tomorrow.mp4" height="200" width="200">
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>
    audio 音频元素；用于嵌入一个 音频文件
    src 音频文件的URL
    controls 显示播放控件
    autopaly 表示立刻播放
    preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">
    video 视频播放元素
    src 视频资源的URL
    controls 表示显示播放控件
    autoplay 自动播放,目前不能使用
    muted 表示静音
    poster 指定视频载入时显示的图片封面
    loop 反复播放
    preload 预先加载