【html + css】滚轮隐藏

已于 2022-08-08 17:03:15 修改
阅读量1.2k 收藏
点赞数
分类专栏： bilibili视频源码 文章标签： 大数据 javascript css html 前端
于 2022-07-07 21:09:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45562037/article/details/125667199
版权

效果视频展示：

（html + css）滚轮隐藏

全部代码（放心粘贴）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a:link{
        color: white;
        text-decoration: none;
    }
   
    a:visited{
        color: white;
    }

    a:hover{
        color: black;
    }
    body{
        background: white;
        animation: color 5s 1s infinite;
    }

    @keyframes color {
        0%{
            background: white;
        }
        50%{
            background: gray;
        }
        80%{
            background: black;
        }
        100%{
            background: white;
        }
    }
    .sign{
        position: fixed;
        width: 800px;
        height: 500px;
        top: 50%;
        margin-top: -400px;
        left: 50%;
        margin-left: -250px;
        border-radius: 10px;
        background: rgba(10, 10, 10, 0.5); 
        
        overflow: hidden;
        overflow-y: scroll;
    }
    .sign>.suttle{
        float: left;
        width: 135px;
        height: 500px;
        overflow: hidden;
        
        position: fixed;
    }
    .sign>.suttle:hover{
        overflow-y: scroll;
    }
    ::-webkit-scrollbar{
        width:5px;
    }
    
    .sign>.suttle>ul>li{
        width: 125px;
        height: 60px;
        border: 1px solid black;
        font-size: 20px;
        color: white;
        text-align: center;
        line-height: 60px;
        background: rgb(4, 30, 39);

        overflow: hidden;
    }
    .sign>.suttle>ul>li:hover{
        background: lightblue;
        color: black;
    }
    .text{
        position: relative;
        width: 650px;
        margin-left: 150px;
        
    }
    .text>div{
        width: 650px;
        height: 500px;
        margin-top: 9px;
        display: grid;
        grid-template-columns:33% 33% 33%;
        grid-template-rows:33% 33% 33%;

       
    }
    .text>div>div{
        width: 200px;
        height: 150px;
        border: 2px solid black;
        font-size: 30px;

        overflow: hidden;

        display: grid;
        grid-template-rows: 70% 30%;
    }
    .text>div>div:hover>div:nth-child(1){
        background: red;
        transform: scale(1.5);
    }
    .text>div>div>div:nth-child(2){
        background: white;
        
    }
    .text>div>div:hover>div:nth-child(2){
        transform: translateY(50px);
    }
    img{
        width: 100%;
        height: 100%;
    }
</style>
<body>
    <div class="sign">
        <div class="suttle">
            <ul>
            <li>
                <a href="#登录界面">登录界面</a>
            </li>
            <li>
                <a href="#信息">信息</a>
            </li>
            <li>
                <a href="#作品">作品</a>
            </li>
            <li>
                <a href="#收藏">收藏</a>
            </li>
            <li>
                <a href="#模式">模式</a>
            </li>
            <li>
                <a href="#商城">商城</a>
            </li>
            <li>
                <a href="#充值">充值</a>
            </li>
            <li>
                <a href="#客服">客服</a>
            </li>
            <li>
                <a href="#设置">设置</a>
            </li>
            <li>
                <a href="#其他">其他</a>
            </li>
        </ul>
        </div>
        <div class="text">
            <div class="text1" id="登录界面">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>登录界面</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>

            <div class="text1" id="信息">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>信息</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>

            <div class="text1" id="作品">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>作品</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>

            <div class="text1">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>

            <div class="text1">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>

            <div class="text1">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>

            <div class="text1">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>

            <div class="text1">
                <div>
                    <div><img src="https://pic.vjshi.com/2016-10-05/c390feef652f579adc3498c33b74f504/00001.jpg?x-oss-process=style/watermark" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.ff78f992e522c01d8e71478bf95606cd?rik=CNykr9q8bVup1w&riu=http%3a%2f%2fpic40.photophoto.cn%2f20160724%2f0006019096318486_b.jpg&ehk=Z%2b%2fAsYswJ7qa12Pg4%2fDwsiPWNcwDd5HBEK%2fJTPhjFhI%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/014737558f58dc6ac7253264a8f228.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.69f4097f529458008f8c9e829d340c01?rik=lq%2bJ0pYEfTsogQ&riu=http%3a%2f%2fwww.woaihuahua.com%2fuploads%2fallimg%2f150811%2f16-150Q1115149112.jpg&ehk=z5%2bbboHR5sfUelHon0cYlw7MoXe2%2bSPs63Jfp43WQ%2fc%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01e3685cceaf85a801208f8b4381bb.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.c0c3b34eafeb11c3cada1f52c62021be?rik=ADluoj3twa%2fypg&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366892-SMqUZkEYXH.jpg&ehk=0uJwC7n%2bCf2eVZ9ghrOLCv5kLdYU45%2b6ZYnaJYIRvJg%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/011df05b0df6b2a8012043d8ef9a0f.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://tse1-mm.cn.bing.net/th/id/R-C.4b07e7dc609721b0d2b200c3d193e2b3?rik=Tt5iUDbjvuRjmQ&riu=http%3a%2f%2fimg.ewebweb.com%2fuploads%2f20191006%2f21%2f1570366910-jAHQcPhUxO.jpg&ehk=A4jd8PotSA9FBK86aSMx7tuHzRNMNyOcbgmCdEcIBQY%3d&risl=&pid=ImgRaw&r=0" alt=""></div>
                    <div>标题</div>
                </div>
                <div>
                    <div><img src="https://img.zcool.cn/community/01fdc755b372ed6ac725ca500e2d1d.jpg@1280w_1l_2o_100sh.jpg" alt=""></div>
                    <div>标题</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

阡小年
关注
专栏目录
HTML5+CSS3+JS小实例：原生JS实现全屏滚动
艾恩小灰灰的博客
03-26 142
实例：原生JS实现全屏滚动。技术栈：HTML+CSS+JS。
HTML+CSS总结
m0_62497325的博客
11-21 1118
学习目标 一、网页的相关概念 1.1什么是网页？ 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 1.2什么是HTML？ 1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。 2.HTML 不是 一种编程语言，而是一种标记语言 (markup language)。 1.3常用的浏览器 IE
HTML+CSS+JS实现简单滚动效果
huai2325的专栏
07-25 529
html代码段，需要引用“autoScroll.js”和“autoScroll.css”两个文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
火狐浏览器滚动条样式
gztrljh
10-31 1409
* { scrollbar-color: #e5e5e5 #f7f7f9; /* 滑块颜色 滚动条背景颜色 */ scrollbar-width: thin; /* 滚动条宽度有三种：thin、auto、none */ }
隐藏页面滚动条
iteye_9609的博客
10-07 115
有的时候当页面中嵌入有iframe或宽高超出边界,就会出现滚动条   从而会破坏整个页面的布局   下面的代码是通过css样式隐藏横向滚动条   html{overflow-x : hidden ; height : 100% ; margin : 0 ; padding : 0 ; } body{ height : 99% ; margin : 0 ;  overflow-x : hidde...
隐藏滚动条
m0_72289878的博客
02-28 122
写MES的时候，要求管理系统和可视化大屏结合，但是可视化大屏不需要滚动条，管理系统需要滚动条，因此就需要把滚动条在该隐藏的地方隐藏，该显示的地方显示。火狐： scrollbar-width: none;
HTML和CSS隐藏元素的四种方法
qq_48109675的博客
08-23 1007
第一种：display：none 特点：不占据屏幕空间 显示：display：block
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4730
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
基于jQuery+CSS3+HTML5实现的炫酷全屏垂直滚动切换幻灯片特效源码.zip
11-21
该资源是一个基于jQuery、CSS3和HTML5技术实现的全屏垂直滚动切换的幻灯片特效源码。这种特效在现代网页设计中被广泛应用，能够为网站增添动态和交互性，提升用户体验。以下是对这个源码实现的关键知识点的详细解释...
html鼠标滚轮隐藏导航,纯css，div隐藏滚动条，保留鼠标滚动效果。[转载]
weixin_34684706的博客
06-04 338
前记当我们的内容超出了我们的div，往往会出现滚动条，影响美观。尤其是当我们在做一些导航菜单的时候。滚动条一出现就破坏了UI效果。我们不希望出现滚动条，也不希望超出去的内容被放逐，就要保留鼠标滚动的效果。方法这里介绍一个简单的方法。大体思路是在div外面再套一个div。这个div设置overflow:hidden。而内容div设置 overflow-y: scroll;overflow-x: hi...
html怎么隐藏y方向内容,如何隐藏scroll-Y纵向滚动条，并不影响内容滚动的方法...
weixin_36221948的博客
06-09 797
网上搜了需的请本现等现近求项求人这行的近求项求人很多关于隐藏滚动条的文章，发现很多都是只说了如何隐藏scroll-X横向滚动条,对scroll-Y纵向滚动条并没有明确的述说。本文章将介绍3种隐藏滚动条的方法，大家可以结合实际情况，参浏刚学互久维数曾总屏果以。公实式带近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我最司现幻的近览开会。后护一相结蔽为我...
css样式中的滚轮事件和隐藏滚动条
这是我的博客
09-11 4227
css样式中的滚轮事件和隐藏滚动条
HTML实现隐藏滚动条，具有滚动效果（兼容各个浏览器）
weixin_43144490的博客
01-05 3277
HTML实现隐藏滚动条，具有滚动效果（兼容各个浏览器）根据个人在开发项目时，发现火狐浏览器是无法实现滚动条样式美化的，想要美化除非用插件，本篇文章主要是利用css隐藏滚动但还具有滚动效果的方案，如果有大佬知道美化火狐滚动条的办法也可以在下面分享下（本人菜鸟一个）。思路： 根据个人在开发项目时，发现火狐浏览器是无法实现滚动条样式美化的，想要美化除非用插件，本篇文章主要是利用css隐藏滚动但还具有滚动效果的方案，如果有大佬知道美化火狐滚动条的办法也可以在下面分享下（本人菜鸟一个）。 思路： 在包裹的ul上隐藏滚
关于 移动端隐藏scroll滚动条::-webkit-scrollbar
Rainbow_sbb的博客
07-22 1206
::-webkit-scrollbar {/隐藏滚轮/ display: none; } 一般搜到的方法是这样，给各位演示一下： 这样会挡住一些小图片很难受，加入隐藏滚轮后效果如下： 就很舒适，这其中也有一些小坑，比如说写法上是 此时这个.song_list与::-webkit-scrollbar直接是不能空格的，空格就效果显示不出来，但如果是ul上面的div标签的话来加这个隐藏滚动条属性的话中间就可以空格，这一点让我实在纳闷。 但这只是一个小坑，我遇到的问题呢是火狐浏览器没法正确使用这个方法来隐藏滚动条
CSS 修改滚动条样式 隐藏浏览器滚动条
海胆的博客
06-20 573
body::-webkit-scrollbar { width: 0 !important; display: none; } body { -ms-overflow-style: none; } body { overflow: -moz-scrollbars-none; }
杂记（隐藏滚动条及鼠标滚轮事件）
banmao8461的博客
11-05 205
本次目的：要实现一个全屏网页，隐藏滚动条，当滚动 鼠标滚轮 时，屏幕像按帧数一样切屏而不是默认的滚动 1 隐藏滚动条 想要全屏演示隐藏滚动条，这里想到的方法是把 <body> 元素设置 overflow:hidden，然后再设置包裹元素定义 width:102%;，overflow-y:hidden; 以及 overflow-x:auto;，并且...
手机端html去掉滚轮,移动端隐藏滚动条，css方法(示例代码)
weixin_35117981的博客
06-26 1310
小白第一次发文记录自己遇到的问题。关于隐藏移动端滚动条方法很多，这里只说本人用到的。在PC端隐藏html右侧默认滚动条html {/*隐藏滚动条，当IE下溢出，仍然可以滚动*/-ms-overflow-style:none;/*火狐下隐藏滚动条*/scrollbar-width: none;}/*Chrome下隐藏滚动条，溢出可以透明滚动*/html::-webkit-scrollbar{widt...
css隐藏html标签的滚动条
最新发布
06-08
要隐藏 HTML 标签的滚动条，可以使用 CSS 的 overflow 属性。将 overflow 属性设置为 hidden，可以隐藏标签的滚动条，并且不会占据任何空间。例如，可以将一个 div 标签的 overflow 属性设置为 hidden，将其内容包裹...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值