运用CSS为层(div)元素添加滚动条

最新推荐文章于 2021-05-30 19:15:37 发布
最新推荐文章于 2021-05-30 19:15:37 发布
阅读量257 收藏 1
点赞数
分类专栏： HTML 文章标签： CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012111199/article/details/83944766
版权

<html>  
    <head>  
    <title>Div Scroll</title>  
       
    <style type="text/css">  
     .scroll {   
         width: 50%;                                      /*宽度*/   
         height: 200px;                                   /*高度*/   
         color: ;                                         /*颜色*/   
         font-family: ;                                   /*字体*/   
         padding-left: 10px;                              /*层内左边距*/   
         padding-right: 10px;                             /*层内右边距*/   
         padding-top: 10px;                               /*层内上边距*/   
         padding-bottom: 10px;                            /*层内下边距*/   
         overflow-x: scroll;                              /*横向滚动条(scroll:始终出现;auto:必要时出现;具体参考CSS文档)*/   
         overflow-y: scroll;                              /*竖向滚动条*/   
           
         scrollbar-face-color: #D4D4D4;                   /*滚动条滑块颜色*/   
         scrollbar-hightlight-color: #ffffff;                 /*滚动条3D界面的亮边颜色*/   
         scrollbar-shadow-color: #919192;                     /*滚动条3D界面的暗边颜色*/   
         scrollbar-3dlight-color: #ffffff;                /*滚动条亮边框颜色*/   
         scrollbar-arrow-color: #919192;                  /*箭头颜色*/   
         scrollbar-track-color: #ffffff;                  /*滚动条底色*/   
         scrollbar-darkshadow-color: #ffffff;                 /*滚动条暗边框颜色*/   
     }   
    </style>  
       
    </head>  
       
    <body>  
    <div align="center">  
        <div class="scroll">  
            <!--在此添加想要显示的内容 -->  
        </div>  
    </div>  
       
    </body>  
</html>

songshude2010
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 给div添加滚动并隐藏滚动条
12-28
css 给div添加滚动并隐藏滚动条 ，具体代码如下所示:  在html中 <div class=box> <div>下面内容会单独滚动</div> <div class=scroll> <div class=content> <p>1111111111111111 <p>222222222222222 <p>...
css为div添加滚动条
zunguitiancheng的专栏
06-02 1890
给DIV限定宽度或高度,并指定overflow样式为auto,这样当内空超出后就会自动出现滚动条了.如
html页面中运用CSS为层(div)元素添加滚动条
baby_cheerup的专栏
02-19 681
<!-- --> 一：                         二：html> head>title>Div Scrolltitle>styletype="text/css">.scroll { width: 50%; /*宽度*/ height: 200px; /*高度*/ color: ; /*颜色*/ font-family:
运用CSS为层(div)元素添加滚动条简单而实用的方法
炼术成金的专栏
08-09 524
<br /> <br /> <br /><div style="width: 97%; height: 350px; overflow: auto; border: 1px solid rgb(238, 238, 238);"><br /> <br /> <!--在此添加想要显示的内容 -->  <br /> <br /></div><br /> <br /> <br />这个方法简单而且很实用
css实现div自动添加滚动条(图片或文字等超出时显示)
01-21
原来用过，没有太在意，最近又用到。... 参数： 1.visible :不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 2.auto :此为b
css将div层固定显示在页面底部不随滚动条滚动
12-13
复制代码代码如下:#totop{position:fixed;right:10px;bottom:10px;width:100px;height:100px;}
CSS样式设置div滚动条示例代码
12-13
/*自动出现滚动条，如果要出现竖直滚动条则改成：overflow-y:auto，如果横向出现滚动条则改成：overflow-x:auto*/ scrollbar-face-color:#F00; /*滚动条凸出部分的颜色(前景色),包括两端的方形按钮、水平或竖直滑动...
在html中加入滚动条,css3如何添加滚动条
weixin_29410959的博客
05-30 965
css3如何 设置一个div出现滚动条，并设置 样式？就是一个小DIV在里面，它有自己的垂直，或者是水平滚动条？如何设置？HTML5如何隐藏和显示页面滚动条 CSS3和HTML5版本用CSS可以实现效果。代码如下： html{height:100%;}body{height:100%;overflow:hidden;}//overflow:hidden为隐藏滚动条body{overflow:scr...
滚动条 伪元素
u011861781的专栏
04-13 379
[quote] ::-webkit-scrollbar { width: 0 !important } .id { margin: 0 auto; overflow: auto; } /quote]
node-v18.18.2-headers.tar.xz
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v7.7.3-headers.tar.xz
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
使用C#,生成特定格式Word文档
05-20
Word文档的自动化生成，可以根据数据自动形成文档
JavaScript_简单的动画为您的顺风项目.zip
05-20
JavaScript
node-v10.10.0-headers.tar.gz
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
UE 剔除透视材质-材质函数（可编辑）
05-20
在虚幻引擎中，当我们向透过外壳看到内部的材质，或者透过布料/盔甲等看到人体，即可通过将该材质函数连接到相应的材质节点图中，达到这样的效果。
node-v16.17.1-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v17.3.0-headers.tar.xz
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
DIV滚动条设置添加 CSS滚动条显示与滚动条隐藏
06-09
要在DIV中添加滚动条，可以使用CSS中的overflow属性。将其设置为auto或scroll，当内容超出DIV的高度或宽度时，就会出现滚动条。示例代码如下： ```css div { height: 200px; width: 300px; overflow: auto; /* ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值