滚动条的设置
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中还能有一些更酷炫的效果,就是它还可以将默认的条状模式变成缩略图模式,这就是上面说的滚动条会帮助我们提高编码效率。