JavaScript初学——制作一个简单的网页窗口并实现其功能（二）：内容栏

最新推荐文章于 2024-04-05 01:04:01 发布

小小帕金森

最新推荐文章于 2024-04-05 01:04:01 发布

阅读量1.7k

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_40615146/article/details/86592535

版权

本文介绍了使用CSS3制作网页内容区的过程，特别关注如何隐藏滚动条，提供了相应的CSS和HTML代码示例，展示了最终的视觉效果，其中左侧区域为可滚动内容。

摘要由CSDN通过智能技术生成

今天只是简单的制作了其两个内容区，主要使用的方式为CSS3中的“隐藏滚动条”：

::-webkit-scrollbar {
            display: none;
        }

其中，具体的代码如下：
CSS：

/*内容版块*/
        div#con {
            width: 1300px;
            height: 600px;
            background-color: white;
        }
        
        #con1 {
            height: 600px;
            width: 300px;
            background-color: darkgray;
            /*设置一旦页面内容超过页面原有长度即可翻页*/
            overflow: auto;
            float: left;
        }
        #con2 {
            width: 1000px;
            overflow: auto;
            float: left;
        }
        /*css3中隐藏滚动条的方式*/
        div#con1::-webkit-scrollbar {
            display: none;
        }
        #scon1 {
            width: 300px;
            height: 100px;
            position: fixed;
        }
        #scon2 {
            width: 300px;
            height: 90px;
            border-style: solid;