当前位置: 首页 > 网络学院 > 网页制作基础教程 > WEB设计综合 > 定义滚动条样式

WEB设计综合
合理使用HTML标签进行CSS布局
IE中伪类:hover的使用及BUG
CSS floats创建三列式网页布局
display:inline-block的深入理解
由浅入深漫谈margin属性
PDF、ZIP、DOC链接的标注
纯CSS代码实现翻页
CSS在表格边框上的美学应用
CSS的超级技巧大放送
创造收藏夹中的个性化图
让网页里的提交按钮变得更靓
让弹出窗口变得“体贴”
在html文件中引入其它html文件
用好超级链接标记—A
HTML语言的语法基础及规则
像表格table一样轻松布局div层
XHTML+CSS布局之XHTML应用小结
Html 书签的使用
有关HTML代码的另类应用技巧
避免表格(table)被撑开变形的CSS代码

WEB设计综合 中的 定义滚动条样式


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-03-01   浏览: 2361 ::
收藏到网摘: n/a

Please have a look at the example here. Well it does not look that good, but that is just for the differentiation of the areas of the scrollbar. Once you know which area is defined with which code you can modify it as you like. Actually the code is quite self explanatory. Anyway let"s have a look.

请看下面的案例。这组代码可能并不具有观赏性,但是它改变了传统滚动条的样式。你可以通过改变其中的代码来创建你所喜欢的滚动条样式。事实上,这些代码都极具自我描述性。不管怎样,还是让我们好好看看吧!

<STYLE TYPE="text/css">
BODY
{
scrollbar-face-color: green;
scrollbar-shadow-color: blue;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: red;
scrollbar-darkshadow-color: brown;
scrollbar-track-color: yellow;
scrollbar-arrow-color: white;
}
</STYLE>

To change the style of the page scrollbar you need to insert the above code between your <head></head> tages in the page. Color names such as green, blue...etc can be replaced with the hexa decimal codes such as #000000.

你必须将上述代码插入页面的<head></head>标签纸内来改变滚动条的样式。颜色名称如:green[绿]blue[]等等,这些名称可以直接用于替代诸如:#000000这样的六位颜色代码。

The following image shows which codes define which part of the scrollbar. I guess it does not need further explanation, since everything is clear already. Go ahead and make your page look nicer.

下面这张图片展示了用于定义滚动条的样式代码。我想不需要再过多地说明了,因为每个语句的解释都已经很清楚了。那么,赶快试试它们,让你的页面看上去更加美观吧!


scrollbar

面滚动条定义

This is what I have used for my pages, feel free to use it if you want.

下面这段代码是我在自己的页面中所使用的。如果你喜欢也可以自由地使用它。

<STYLE TYPE="text/css">
BODY
{
scrollbar-face-color: #EAEAEA;
scrollbar-shadow-color: #EAEAEA;
scrollbar-highlight-color: #EAEAEA;
scrollbar-3dlight-color: #EAEAEA;
scrollbar-darkshadow-color: #697074;
scrollbar-track-color: #F7F7F7;
scrollbar-arrow-color: #666666;
}

评论 (1) 1 All

登陆 | 还没注册?