2006/08/13 | 5Dblog中滚动条的设置
类别(俺家后院) | 评论(1) | 阅读(207) | 发表于 18:00

是不是对你页面旁边的滚动条的不和谐而感到恼火?想想也是,一个深暗调的页面旁边却有一个白乎乎的柱子,真是大煞风景。Bolg就是我的地盘,自然是要尽最大可能,个性化到牙齿的,如果可以,我都想给显示器加个样式----妄想。

如果你对与改变滚动条不感兴趣,那么看到这里就可以关闭此页面了。

好,下面言归正传,就讲一讲Bolg中滚动条的设置。(以下所有内容都基于IE5.5+ ,其他不基于IE内核的浏览器无效)

先看一个最普通设置滚动条的样式:

BODY {
           SCROLLBAR-FACE-COLOR: #480000;
           SCROLLBAR-HIGHLIGHT-COLOR: #480000;
           SCROLLBAR-SHADOW-COLOR: #000024;
           SCROLLBAR-3DLIGHT-COLOR: #480000;
           SCROLLBAR-ARROW-COLOR: #b40000;
           SCROLLBAR-TRACK-COLOR: #b40000;
           SCROLLBAR-DARKSHADOW-COLOR: #240048;
           SCROLLBAR-BASE-COLOR: #480000}

(这个样式中的颜色就是我的blog中现在的设置,不见得很好,只是一个例子的作用,如果您搭配出好的方案,也请告诉我)

scrollbar-3d-light-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 亮边框颜色

scrollbar-highlight-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 3D界面的亮边(ThreedHighlight)颜色

scrollbar-face-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 3D表面(ThreedFace)的颜色

scrollbar-arrow-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 方向箭头的颜色

scrollbar-shadow-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 3D界面的暗边(ThreedShadow)颜色

scrollbar-dark-shadow-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 暗边框(ThreedDarkShadow)颜色

scrollbar-base-color IE专有属性 IE5.5+ 有 设置或检索 滚动条 基准颜色。其它界面颜色将据此自动调整.一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

以上就是设置滚动条最基本需要知道的东西,太多了记不住?没关系,说实话我也记不住,以上的东西都是我ctrl+v上去的。很多东西并不是要你去背的,只需要理解,知道这是什么东西,应该放在什么地方就足够了。

方便大家给滚动条配色,给一个链接:IE滚动条颜色生成器

是不是理解了上面这些就能设置5Dblog中的滚动条了呢?当然不可以,上面这些东西网上一搜一把一把的,如果这么简单我也就不写这个了。下面继续讲:

再来看几种常见的html页面文档声明

可以显示效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

不能显示效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5Dblog的页面文档声明类型是最后红色的这种,不支持在<body>中使用上面讲的这些属性,但是对于<body>以外的元素嵌入滚动效果是支持的。所以,我的思路就是隐藏<body>的滚动条,然后嵌入一个包含所有页面框架的<div>来调用一个设置了滚动条的样式。

下面首先要做的就是先隐藏起<body>的滚动条,常用的有两种方法,一种直接在body标签中隐藏,<body scroll="no">;另一种,在样式表中设置,body{overflow : hidden;}。5D这里的规矩是在你的页面框架中是不允许出现<body>标签的,因为<body>标签是生成页面时由系统自动添加的,所以这里可用的只有第二种方法了。

这里问题又来了,嵌入了定义了滚动条的<div>之后,body的滚动条区域还是白乎乎的存在,虽然不可用。OMG,恼火。又在网上仔细搜了一下,终于找到了解决办法,就是改变<html>的样式。就是么,一个html页面<html>标签才是老大,它是管着<body>的,哈哈哈。

下面给出最终解决方案:

定义样式

html{
        overflow : hidden;

body{
       margin: 0px;
       height: 100%;
       width: 100%;
}
#mybody{
       SCROLLBAR-FACE-COLOR: #480000;
       SCROLLBAR-HIGHLIGHT-COLOR: #480000;
       SCROLLBAR-SHADOW-COLOR: #000024;
       SCROLLBAR-3DLIGHT-COLOR: #480000;
       SCROLLBAR-ARROW-COLOR: #b40000;
       SCROLLBAR-TRACK-COLOR: #b40000;
       SCROLLBAR-DARKSHADOW-COLOR: #240048;
       SCROLLBAR-BASE-COLOR: #480000
       overflow-x: hidden;/*隐藏横向滚动条*/
       overflow-y: scroll;/*显示纵向滚动条*/
       height: 100%;
       width: 100%;
}

框架部分

<div id="mybody">
你的框架
</div>

0

评论Comments

日志分类
首页[14]
经典文摘[5]
身前身后[6]
俺家后院[3]