用CSS代码轻松Diy你的网页滚动条

2016-02-19 20:27 12 1 收藏

给自己一点时间接受自己,爱自己，趁着下午茶的时间来学习图老师推荐的用CSS代码轻松Diy你的网页滚动条，过去的都会过去，迎接崭新的开始，释放更美好的自己。

【 tulaoshi.com - Web开发】

在浏览网页的时候我们有时可以看到有的网页滚动条颜色不是系统默认的，而是漂亮的红色或其它颜色，其实这就是在网页代码之间加入代码来实现的，具体是哪些代码呢？　

网页滚动条代码及其解释如下：（复制时请将大写尖括号改为小写）

以下是引用片段：
＜Style type="text/css"＞
＜!--　
Body {
scrollbar-face-color:#C0C0C0; （表面）
scrollbar-highlight-color:#FFFFFF;（亮边）
scrollbar-3dlight-color:#C0C0C0;（3D亮边）
scrollbar-darkshadow-color:#000000; （3D暗边）
scrollbar-Shadow-color:#808080;（阴影）
scrollbar-arrow-color:#000000; （箭头）
scrollbar-track-color:#E0E0E0;（滚动区）
}
--＞
＜/Style＞

以上的代码，从Body以下的，凡是#号后面的，都是颜色代码，颜色代码为16进制。而括号内的文字是对左边代码的注释，在加入网页代码时不要输入。这样一来，你就可以DIY自己的网页滚动条了。

来源:http://www.tulaoshi.com/n/20160219/1623736.html

上一篇： Windows 8系统一键挂载VHD虚拟磁盘的方法
下一篇： CSS条状图表形式的实现方法

看过《用CSS代码轻松Diy你的网页滚动条》的人还看了以下文章更多>>

FLASH实现滚动条+网页书签效果

标签： flash教程

第一步：场景中的元素因为这一步主要是在场景中加入文字和图片，大家可以下载源文件后用FLASH打开自己研究，这里就不详细介绍各元素的画法了。点击下载FLA源文件关于场景中的元素，这里要说清楚的是各个MovieClip(影片剪辑，以下简称mc）的命名，如下图所示(注：这里说的命名，是指把mc放到场景中后在Properties<属性面板中的命名，而不是...

层滚动条

标签： Web开发

html headtitle层滚动条DIY - Powered by yexj00/title style !-- *{ font-size: 12px} -- /style script language="Javascript" !-- function $(obj){ return document.all[obj]; } function setbarHeight(){ $("scroll_bar").style.height=($("scroll_content").clientHeight)/($("scroll_content&q...

隐藏滚动条

标签： Web开发

具体步骤：方法一：设置CSS属性overflow为hidden。 body 方法二：设置body元素的scroll属性为no。 body scroll="no" 注意：建议用方法一隐藏滚动条，用方法二的话在IE5.0中无法再用脚本对页面进行滚动进行操作。因为方法只是隐藏滚动条不显示，而方法二是直接设置为没有滚动条。这一点可以在本部分第六章的《问题6》中分别用本例的两种方...

Cool Web Scrollbars - 定制网页的滚动条

标签： Html CSS布局 Div+CSS XHTML

之前笔者曾经介绍过用Dreamweaver插件改变IE浏览器滚动条，现在已经有人写出了快速制作此种代码的小软件，让不懂CSS（层叠样式表）的网友轻松上手，让熟悉CSS的网友解除繁琐的代码敲打。 Cool Web Scrollbars拥有简单的明了的操作界面，让人看了一目了然：下载网址：http://www8.pconline.com.cn/download/swdetail.phtml?id=5081 ...

调整CSS的方式给滚动条换色

标签： Web开发

PSD转html，设计稿上，有一处内嵌的介绍信息，当文字过长时，要求使用一个经过处理的滚动条来展示。如果要求兼容firefox，可以使用JQ来进行制作。如果仅要求IE浏览器，可以通过调整CSS的方式，来给滚动条换色。代码如下： .uicss-cn { height:580px;overflow-y: scroll; scrollbar-face-color:#EAEAEA; scrollbar-shadow-color:...

查看更多精彩>>