首页 > 其他分享 >滚动条的设置

滚动条的设置

时间:2023-02-15 11:56:23浏览次数:38  
标签:Color 滚动条 Scrollbar 设置 div overflow

https://www.likecs.com/show-203834384.html#sc=1181.818115234375

开发工具与关键技术:DW、VS CSS
作者:木林森
撰写时间:2019年5月25日
在浏览网页的时候,很多细心的网友就会发现我们网页有时候会出现滚动条,大部分是垂直滚动条,而很少会出现水平滚动条。为什么会这样呢?
其实这是为了美观,标准的网页中是不会有水平滚动条的。除非你浏览器页面的缩放比例小于100%的时候不会出现滚动条,当它大于100%的时候就会出现滚动条了。调节页面缩放比例的方法:1.点击页面右上的三点,它会弹出或下拉一个框,里面有它的缩放比例;当然还可以使用快捷:2、点击Ctrl键的同时转动鼠标滚轮,这样也可以实现页面比例的放大缩小;还有一个比较少用的就是:3、菜单栏—查看—页面缩放——选择需要的比例。
为什么会有滚动条出现呢?在任何情况下,如果网页内容超出网页的显示范围,滚动条就会自行出现。我们在很多编程软件中编写代码时,经常会用到滚动条,特别是在编写单个文件代码量很大的时候,滚动条会帮助我们提高编码效率。那么在不同的编写软件中,它是如何设置滚动条的呢?下面将会用Adobe Dreamweaver CC 2017 (下面简称DW)和Visual Studio 2015(下面简称VS)这两个编程软件举例。
在DW中设置滚动条:
首先需要了解一下CSS中的属性,请看下表:
代码 代表的意义
overflow 表示在水平和垂直方向上的滚动条
overflow-x 表示在水平方向上的滚动条
overflow-y 表示在垂直方向上的滚动条
auto 表示网页内容超出网页的显示范围出现滚动条
scroll 表示不管网页内容是否超出网页的显示范围都会出现滚动条
Crollbar-Face-color: 滚动条页面颜色设定
Scrollbar-Highlight-Color :滚动条斜面和左面颜色设定
Scrollbar-Shadow-Color 滚动条下斜面和右面颜色设定
Scrollbar-3Dlight-Color 滚动条上边和左边的边沿颜色设定
Scrollbar-Arrow-Color 滚动条两端箭头颜色设定
Scrollbar-Track-Color 滚动条底版颜色设定
Scrollbar-Darkshadow-Color 滚动条下边和右边的边沿颜色设定
在HTML中,先用一个div设置好宽度和高度,然后再把div的样式设置成overflow-y:auto,当div里面的文字超出那个高度的时候,滚动条就会自动出现。例如;
<//div style=“width:100px; height:100px; overflow-y:auto; border:1px solid #bc5269;”>
除了在div里面设置滚动条,也可以在body里面设置,设置的方法是一样的,body代表的滚动范围就是一整个页面,而div里面设置代表的范围就是一个div而已。

当然有滚动条的显示就会有它的隐藏,隐藏时将样式设置成overflow:hidden就行,也可以将滚动条设置成透明,其实就是讲样式颜色设置为#ffffff,它就可以根据网页的基色来改变,这样就达到透明的效果。
以上就是在DW中设置滚动条,其实在VS中设置滚动条也是一样的,只不过在VS中还能有一些更酷炫的效果,就是它还可以将默认的条状模式变成缩略图模式,这就是上面说的滚动条会帮助我们提高编码效率。

标签:Color,滚动条,Scrollbar,设置,div,overflow
From: https://www.cnblogs.com/Dongmy/p/17122308.html

相关文章

  • win10_Dock安装设置
    1.安装:(在win10上安装)桌面版:https://www.docker.com/products/docker-desktop,安装后重启电脑 2.配置打开DockerDesktop,(可能会出现如下报错) 点击弹窗中的蓝色来连......
  • CentOS7中使用PM2设置Node-RED开机自启动
    场景CentOS7中后台运行Node-RED(关闭窗口也能访问服务):​​CentOS7中后台运行Node-RED(关闭窗口也能访问服务)_BADAO_LIUMANG_QIZHI的博客在上面设置Node-RED后台启动后怎样......
  • vs code怎么设置python解释器
    首先打开一个python文件,如下图所示 右键单击选择命令面板,如下图所示 接着输入python:select选择第一个 然后点击盘符,如下图所示......
  • echarts legend设置多组形状
    当echarts中既有条形图又有折线图时,legend也有两种:想实现以下效果改如何配置呢  其实前面两个并没有对legend进行设置,是给series添加了type:'line'的事件办结率数......
  • vmware 设置开机启动
    配置VMwareWorkstation虚拟机自启动-AlenIves-博客园(cnblogs.com)......
  • Ubuntu20.04开启VNC远程服务设置教程
    对于使用过PVE的大佬来说,在自己电脑安装虚拟机打开的画面惨不忍睹,其实它只是用错了地方。 今天给大家介绍一款控制工具,它叫VNC,是用来进行远程连接的非常好用的工具可......
  • leaflet 设置图层优先级
    Leaflet在添加了区域、点位等图层之后,需要设置图层的优先级,可以通过pane来设置。 this.map.createPane('tlop')this.map.getPane('tlop').style.zIndex=500cons......
  • Win11右键默认显示更多选项的设置
    怎么让Win11右键默认显示更多选项?有很多朋友不喜欢win11系统的右键菜单显示,经常需要多点一次“显示更多选项”才能看到想要的内容,大家想知道如何让win11右键菜单默认显示......
  • C语言获取X的第Y位的二进制值,或者设置值
    如:#defineGetBit(x,y)((x)>>(y)&1) //获取将x的第y位(0或1)#defineSetBit(x,y)x|=(1<<y) //将X的第Y位置1#defineClrBit(x,y)x&=~(1<<y) //将X的第Y位清0设......
  • 设置打包方式为war 创建web项目 maven 230214
    笔记实操设置打包模式为war模式......