社会专题
靓丽女人 黑白社会 硬件网络 天下军事 教育咨询 星新一代 汽车电子 幽默笑话 农村特色 有书有道 软件技术 玄幻奇幻 办公达人 便民服务 免费资源 代码效果 美文园地 寻医问药 健康保健 时尚酷玩 天文地理 科技科幻 美食天下 游山玩水 历史天空 制作教程
FLASH频道
女生游戏 益智游戏 有声艺术 有声故事 电脑运用 休闲游戏 MTV类 运动游戏
聚划算
商旅游玩 装潢装饰 家电家具 服装服饰 健康保健 二手特色 生活必备 数码产品
映讯频道
喜剧片 国内片 情感片 动作片 战争片 纪录之窗 欧美剧集 明星云集 动漫片 港澳台剧 大陆剧 科幻片 恐怖片 浓缩电影 教育教学 艺术无界 一技之长 邻国热剧
下载中心
音体美合 信息社政 英语外语 科学自然 常用软件 语文数学 手机软件 红绿软件
图片中心
制作美图 生活图片 美女欣赏 实物图片 艺术欣赏 风景欣赏
领券购
热销女装 热血男装 生活必须 电子电器 手机电脑 旅游出行 学习艺术 吃货优选
新闻中心
一语惊人 奇闻趣事 热点专栏 曝光台 消费警示 今日观察 IT业界 消费主张 动态备忘 专利之窗
关闭
当前位置:首页社会专题代码效果
CSS网页滚动条与无滚动条代码

在这篇文章中我要讲的不仅仅是对滚动条的美化,还有添加滚动条和去掉滚动条的方法

这里先说一下滚动条的属性代码:

overflow-y : visible | auto | hidden | scroll 

visible :  不剪切内容也不添加滚动条。

auto :  在需要时剪切内容并添加滚动条 

hidden :  不显示超过对象高度的内容,这里不对这个属性作介绍,大家喜欢的话可以自己尝试

scroll :  总是显示纵向滚动条

首先我现说一下去掉滚动条的方法:

如果用百度风格模版的话,滚动条只可能有一个,那就是整个空间右边最大的浏览器窗口滚动条,也就是我美化过的那个滚动条,现在告诉大家,我们可以把这个滚动条去掉,但是却不影响浏览的方法:

body{}中加入overflow-y : visible就可以了,这样滚动条就不会显示出来了。大家可能会问,这样怎么往下拉?呵呵,既然我说了不影响浏览,那当然是有方法的,浏览的方法就是用鼠标的滚轮,虽然滚动条没了,可是鼠标滚轮还是能够让网页上下滚动的。我相信大家一般浏览网页的时候用滚轮下拉网页的次数应该比直接用鼠标拖动滚动条的次数多吧?提示下,如果碰到没有滚动条而鼠标又没有滚轮的朋友,该怎么浏览网页呢?呵呵,大家可以用键盘上面的方向键上方的PageUp和PageDown来上下翻页,也可以用空格往下拉网页和Shift+空格往上拉网页,还有一个方法就是用上下方向键来拉动,另外还有按Home键回到网页顶部,End键到达网页底部,呵呵,是不是方法很多呢?不过这样总会有那么一些些的不方便,所以大家可以根据自己的空间和喜好来考虑要不要取消这个滚动条。

哈哈,想不到啰哩叭嗦地,一下说了这么多话

下面我们说添加滚动条的方法:

overflow-y : auto;heiight:多少px 

auto就是自动判断要不要加入滚动条,当设定的对象内容超过了heiight设定的高度时,就自动添加滚动条,不然则不显示,body{}中的默认值就是overflow-y : auto;heiight:浏览器高度,所以当网页内容超过浏览器高度的时候,浏览器右边就会自动显现出滚动条来

大家如果需要设置这个的话,本人建议设置在最新评论#m_comment{}、文章列表#m_blog{}等内容和高度都不固定的模版中,有的朋友找不到这些模版的ID,可能只有例如#m_comment div.item{}或者#m_pro a{}等的ID,那么可以自己加上没有的ID,这样就可以设置了

这里还有另一个添加滚动条的方法:

overflow-y :scroll

这个参数的作用上面解释过了,不过如果只加这个参数的话,虽然滚动栏会显示,但是不会显示滚动条,所以必须还要加上一个

heiight:多少px

高度属性,跟上面的那个方法差不多,但是有根本的区别,这个无论对象内容的高度是否超过了heiight设定的高度,滚动栏永远都会显示在边上的

下面我们说一下关于滚动条的美化,这个我朋友给我看了网上的一个说明,我觉得上面的图很不错,但是很小,所以我放大了一倍,看起来就清楚多了,我们先说一下美化的各个属性:

SCROLLBAR-FACE-COLOR: 颜色代码

SCROLLBAR-HIGHLIGHT-COLOR:颜色代码

SCROLLBAR-SHADOW-COLOR: 颜色代码

SCROLLBAR-3DLIGHT-COLOR: 颜色代码

SCROLLBAR-ARROW-COLOR: 颜色代码

SCROLLBAR-TRACK-COLOR: 颜色代码

SCROLLBAR-DARKSHADOW-COLOR: 颜色代码

大家是不是看到这么多属性有点点头大了?哈哈,放心,看一下我刚才提及的被我放大了一倍的图解你们就会感觉好多了:

这里的图片上还有一个scrollbar-base-color的属性,其实这个属性是个上面7个属性的总合,怎么说呢?就是当你设定了这个属性的颜色后,前面的7个属性都可以不用设置了,滚动条会自动帮你设定的,只是这个设定都会基于你设定的scrollbar-base-color的颜色而自动设定

这个属性的优点就是不用大家费尽心思的去研究各个地方的颜色,但是缺点就是不能够融和五颜六色于一体。。

注:设定了scrollbar-base-color就不要设定其他七个属性了,设定了其他七个属性就不要设定scrollbar-base-color,不然之间可能会有冲突,会有一些效果不起作用的

最后,美化代码:

SCROLLBAR-FACE-COLOR: #CCFFFF; 

SCROLLBAR-HIGHLIGHT-COLOR: white; 

SCROLLBAR-SHADOW-COLOR: #813533; 

SCROLLBAR-3DLIGHT-COLOR: #813533; 

SCROLLBAR-ARROW-COLOR: #813533; 

SCROLLBAR-TRACK-COLOR: white; 

SCROLLBAR-DARKSHADOW-COLOR: #813533;   

以上代码本人是加在body{}中的

CSS网页滚动条与无滚动条代码

提示:输入修改代码都可运行!
2
酒精度
97
顶一下
相关阅读
内容加载中……