HTML/CSS优化

最新推荐文章于 2024-03-13 14:51:16 发布

三台禁地

最新推荐文章于 2024-03-13 14:51:16 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/u012298076/article/details/103153433

版权

1、关于使用`:invalid`伪类来实现验证不通过样式设置

<style>
        input[type=email]:invalid + .next-step{
            display: none
        }
    </style>
</head>
<body>
    <form action="">
        <input type="email">
        <span class="next-step">Next</span>
    </form>

2、实现title效果

<style>
        span[data-title]{
            position: relative;
        }
        span[data-title]:hover:before {
            content: attr(data-title);
            position: absolute;
            top: -150%;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
            background-color: aqua;
        }
    </style>
<span>hello, <span data-title="FDSDSLKDJLSJKLJWWOIonosdfs">FED</span></span>

3、原始写法的form获取值

<form action="/s" id="reg">
        <input type="text" name="username" value="123"> 
        <input type="text" name="password" value="456">
    </form>

    <script>
        var form = document.forms.namedItem("reg");
        // var form = document.getElementById('reg');
        console.log(form['username'].value);
        console.log(form.password.value);
    </script>

4、获取fomr值的方法，jquery改版

    <form action="/s" id="reg">
        <input type="text" name="username" value="123">
        <input type="text" name="username" value="333">
        <input type="text" name="password" value="456">
    </form>


    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
    <script>
        $.fn.serializeForm = function () {
            var o = {},
                a = this.serializeArray();
            $.each(a, function () {
                // 如果存在两个input的name相同，则转成一个数组
                if (o[this.name] !== undefined) {
                    if (!o[this.name].push) { // 当前name是不是数组
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            })
            return o;
        }

        var userdata = $('#reg').serializeForm();
        console.log(userdata);

5、一个标签指向

<style>
      .chat-msg {
            width: 300px;
            height: 80px;
            border: 1px solid #ccc;
            position: relative;
            border-radius: 5px;
            filter: drop-shadow(0 0 2px #999);
            background-color: #fff;
        }
        .chat-msg:before{
            content: '';
            position: absolute;
            left: -10px;
            top: 34px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid #ccc;
        }
        .chat-msg:after {
            content: '';
            position: absolute;
            left: -8px;
            top: 34px;
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            border-right: 10px solid #fff;
        }
    </style>


    <div style="margin: 100px 100px;">
            <div class="chat-msg">hi 你好呀</div>
    </div>

6、利用伪元素

 <style>
        .or {
            text-align: center;
        }

        .or:before,
        .or:after {
            content: '';
            position: absolute;
            line-height: 1;
            width: 200px;
            height: 1px;
            background-color: #ccc;
        }

        .or:before {
            left: 0;
        }

        .or:after {
            right: 0;
        }
    </style>
</head>

<body>
    <p class="or">OR</p>

三台禁地

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML/CSS优化

1、关于使用:invalid伪类来实现验证不通过样式设置<style> input[type=email]:invalid + .next-step{ display: none } </style></head><body> <form action=""...
复制链接

扫一扫