前端性能优化--能用css的地方尽量不要用js

最新推荐文章于 2023-03-19 14:58:16 发布

cangowu

最新推荐文章于 2023-03-19 14:58:16 发布

阅读量2k

点赞数 4

分类专栏：性能优化 css 文章标签：前端性能优化

本文链接：https://blog.csdn.net/wzgdjm/article/details/50824236

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

性能优化

4 篇文章 0 订阅

订阅专栏

在写这篇文字的时候，本来没有打算归类到前端性能优化的范畴，只是想写一些关于有的地方我们可以利用css代替js实现网页动态的效果，比较常见的有导航栏，提示信息等，很多时候我们会利用js实现，比如鼠标移动到父级li上，我们希望子级显示菜单，我们可能在js给每个父级的li绑定一个hover事件。

0、导航栏

下面我用css的方式实现，这里我们利用了hover的伪类，（我们可能大部分都是用到a标签上的，提示大家不是只有a标签才可以用哦）。我们先将子级的ul定位到页面之外，在鼠标hover上面的时候，left设置auto即可（用display:none和block同样可以），代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>那些你可能会疏忽的css代替js</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .primary{
        }
        .primary>li{
            position: relative;
            display: inline-block;
            width: 100px;
            background: #89ac10;
        }
        .secondary{
            position: absolute;
            left: -9999px;
        }
        .secondary>li{
            width: 100px;
            background: #66afe9;
        }
        ul.primary li:hover .secondary{
            left: auto;
        }
    </style>
</head>
<body>

<ul class="primary">
    <li>菜单A
        <ul class="secondary">
            <li>A-1</li>
            <li>A-2</li>
            <li>A-3</li>
        </ul>
    </li>
    <li>菜单B
        <ul class="secondary">
            <li>B-1</li>
            <li>B-2</li>
            <li>B-3</li>
        </ul></li>
    <li>菜单C
        <ul class="secondary">
            <li>C-1</li>
            <li>C-2</li>
            <li>C-3</li>
        </ul></li>
    <li>菜单D
        <ul class="secondary">
            <li>D-1</li>
            <li>D-2</li>
            <li>D-3</li>
        </ul></li>
</ul>

</body>
</html>

1、提示信息

就是实现，在input输入内容的时候，要显示提示信息，普遍的做法就是，添加鼠标点击，移出事件，我这里用纯css实现，大家参考一下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        div span {
            display: none;
            color: red;
        }

        div input:focus + span {
            display: inline-block;
        }

    </style>
</head>
<body>

<div>
    <input type="text"/>
    <span>请输入电话号码：138-0080-1209。</span>
</div>

</body>
</html>

cangowu

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端性能优化--能用css的地方尽量不要用js

在写这篇文字的时候，本来没有打算归类到前端性能优化的范畴，只是想写一些关于有的地方我们可以利用css代替js实现网页动态的效果，比较常见的有导航栏，提示信息等，很多时候我们会利用js实现，比如鼠标移动到父级li上，我们希望子级显示菜单，我们可能在js给每个父级的li绑定一个hover事件。0、导航栏下面我用css的方式实现，这里我们利用了hover的伪类，（我们可能大部分都是用到a标签上的
复制链接

扫一扫