高效前端:css方面的小技巧

1、使用css绘制一个自定义提示框

可以将提示文字放入标签元素的属性中，然后通过伪元素中的content来展示：

<div class="container">
    <span data-title="this is a tip" class="item">hover here</span>
</div>

        .container .item{
            position:relative;
        }
        .container .item:hover::after{
            content:attr(data-title);
            background: black;
            color:#fff;
            border-radius:6px;
            line-height: 30px;
            font-size:18px;
            padding:10px;
            position:absolute;
            top:100%;
            left:0;
            width:100%;
        }

2、使用css变量

定义全局css变量：

:root{
<!--变量使用--开头-->
    --default-color:blue
}

使用时

        .container .item:hover::after{
        
            content:attr(data-title);
            background: black;
            <!--表示先使用之前定义过的变量，如果没有定义，使用第二个参数-->
            color:var(--default-color,#fff);
        }

也可以定义局部css变量，只会影响到当前元素以及子元素

        .container .item{
            position:relative;
            --default-color:blue;
            color:var(--default-color,#fff);
        }

3、使用语义化标签

建议不要在页面中都采用div+span的布局方式（尽管能够满足大部分需求），尽量采用语义化标签的形式，能够是整天布局结构更加清晰，如

h1~h6 :各级标题

p:文本

button:按钮

form:用于表单区域的最外层

b:强调的内容

header,nav,artical,aside用于不同的网页区域

…

使用form表单能够更方便获取到用户输入的内容：

<form id="form">
    <input type="text" name="name">
    <input type="password" name="psd">
    <select name="select" id="">
        <option value="1"></option>
        <option value="2"></option>
    </select>
    <button>提交</button>
</form>

    let form=document.forms.namedItem('form');
    //分别代表对应name的元素
    console.log(form.name);
    console.log(form.psd);
    console.log(form.select)

4、使用css的counter属性进行计数

css中有存在counter-reset，counter-increment，counter属性，通过这些属性可以在实现一些计数功能

css

<style>
        body{
            /*
            通过counter-reset可以定义一个变量，并且定义其初始值（默认为0），可以定义多个。
            变量的影响范围是其子元素
            */
            counter-reset:h1 0 item 2
        }
        .section{
            counter-reset:h2 0
        }
        h1{
            /*
                每次定义了属性counter-increment都会使之后的变量增加，增量默认为1，可以自定义
            */
            counter-increment:h1 1;
        }
        h1::before{
            /*
                使用伪元素中的content可以将计数变量具现出来（只能通过before和after）
                使用counter(变量名，style)来展示变量，其中style与ul中的list-style-type值相同
                content中的字符串可以直接拼接，不需要使用+符号
            */
            content:counter(h1)' '
        }
        h2{
            counter-increment:h2
        }
        h2::before{
            /*可以使用多个counter*/
            content:counter(h1)'.'counter(h2)' '
        }
    </style>

html

<body>

<div class="section">
    <h1>h1</h1>
    <h2>h2</h2>
    <h2>h2</h2>
    <h2>h2</h2>
</div>

<div class="section">
    <h1>h1</h1>
    <h2>h2</h2>
</div>

</body>

页面效果

在这里插入图片描述

高效前端:css方面的小技巧

1、使用css绘制一个自定义提示框

2、使用css变量

3、使用语义化标签

4、使用css的counter属性进行计数

猜你喜欢