html5-css3 -- 总结 02（小白）

柿子来了

于 2024-08-14 09:00:00 发布

阅读量158

点赞数 5

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/2301_78949452/article/details/140889752

版权

浏览器内核

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            -webkit-color: 1s;
            -moz-color: 1s;
            -o-color: 1s;
            color: 1s;
        }
    </style>
</head>

<body>
    <!-- 浏览器内核 -->
    <!-- 谷歌 google bink -->
    <!-- IE  trident -->
    <!-- 火狐 firefox gecko -->
    <!-- open webkit -->
    <!-- safari webkit -->

    <!-- 优雅降级:一开始就针对比较完整,兼容性比较好的版本进行开发,然后在项目后期对低版本进行兼容。

        举例子：我们前端在开发项目的时候一开始可能不会再ie上进行开发测试,一般是现在谷歌上跑通,然后再去兼容低版本的ie浏览器。

        渐进增强:则是和优雅降级相反,一开始我们就针对ie浏览器进行开发,然后逐步完善提升版本去适配高级浏览器。

        举例子：我们一开始就在ie低版本浏览器上进行开发测试,走通之后我们再去谷歌,火狐浏览器上进行测试开发。 -->
</body>

</html>

新增选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ID 类名 * 标签 伪类选择器 */
        /* 后代 直接后代 并集 交集 */

        /* 相邻兄弟 */
        h1 + p{
            color: red;
        }
        p + h1{
            color: pink;
        }

        /* 匹配选择器 */
        div ~ p{
            color: blue;
        }

        /* 属性选择器 */
        [class] {
            font-style: italic;
        }

        [title="top"]{
            font-family: "宋体";
        }

        .son:last-child {
            color: pink;
        }

        .son:nth-child(2) {
            color: red;
        }

        .son:nth-child(2n){
            color: red;
        }

        .son:nth-child(2n-1){
            color: green;
        }

        /* 表单状态选择器 */
        input:disabled {
            background-color: #f00;
        }
    </style>
</head>

<body>

    <div>
        <div class="a">div</div>
        <h1 class="b">123</h1>
        <p class="c">abc</p>
        <h1 title="top">ABC</h1>
        <p>aaa</p>
        <p>bbb</p>
        <main>
            <p>ccc</p>
        </main>
    </div>

    <div class="father">
        <div class="son">son1</div>
        <div class="son">son2</div>
        <div class="son">son3</div>
        <div class="son">son4</div>
        <div class="son">son5</div>
        <div class="son">son6</div>
        <div class="son">son7</div>
        <div class="son">son8</div>
        <div class="son">son9</div>
        <div class="son">son10</div>
    </div>

    <input type="text">
    <input type="text" disabled>
</body>

</html>

内容追加伪元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div::after {
            /* 追加内容 */
            content: "追加";
            width: 200px;
            height: 200px;
            background-color: pink;
            display: block;
        }

        div::before {
            /* 追加内容 */
            content: "追加";
            width: 200px;
            height: 200px;
            background-color: pink;
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <span>111</span>
    </div>
</body>

</html>

js新增获取元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="main" class="box">1</div>
    <div id="main1" class="box">2</div>
    <div id="main2" class="box">3</div>

    <script>
        // 通过 ID 获取元素
        var mainbox = document.getElementById("main");
        var box = document.getElementsByClassName("box")[0];
        var div = document.getElementsByTagName("div")[0];

        // document.querySelector()
        // document.querySelectorAll()

        var box = document.querySelector("#main+div");
        console.log(box);

        var boxs = document.querySelectorAll(".box");
        console.log(boxs);

    </script>
</body>

</html>

多重背景

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1 {
            background-image: url(), url(), url();
            background-repeat: no-repeat, no-repeat, no-repeat;
            background-position: 0 20px, 20px 40px, 40px 80px;
            background-size: 100%, 100%, 100%;
        }

        .box2 {
            width: 200px;
            height: 200px;
            /* border-radius: 50%; */
            /* 背景渐变 */
            /* 线性渐变 */
            /* background-image: linear-gradient(to right bottom, red, pink, orange); */

            /* 径向渐变 */
            /* background-image: radial-gradient(circle, red, orange);

            box-shadow: 0 0 50px 5px yellow,0 0 50px 10px yellow inset; */

            /* 背景图片大小 cover contain */
            /* background-size:  ; */

            background-color: rgba(255, 0, 0, 0.5);
        }

        .box3 {
            width: 400px;
            height: 400px;
            margin: 100px;
            border: 1px dashed #000;
            font-size: 60px;
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F11%2F20200511150640_sSkhy.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1725089886&t=fe5b0cbf224b34875cfc4aa47744b203);
            background-size: cover;
            background-repeat: no-repeat;

            padding: 100px;
            /* background-position: 50px 50px; */

            /* 背景定位原点 */
            background-origin: padding-box;

            /* 不透明度 */
            /* opacity: .5; */

            /* 滤镜 */
            /* filter: grayscale(100%); */

            /* 高斯模糊 */
            /* filter: blur(5px); */
        }

        .box4 {
            width: calc(100% - 20px);
            height: 200px;
            /* background-color: hsla(120, 50%, 50%, 1); */
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="box1"></div>

    <div class="box2">aaaaaaaaaaaa</div>

    <div class="box3">bbbbbbbbbbbbbb</div>

    <div class="box4"></div>
</body>

</html>