`
laozhou
  • 浏览: 37604 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

自定义<body>滚动条

浏览器 
阅读更多
body,    div     
   {     
       SCROLLBAR-HIGHLIGHT-COLOR:    #FFFFFF;    /*滚动条及箭头的亮边色*/     
       SCROLLBAR-SHADOW-COLOR:    #E1E1E1;          /*滚动条及箭头的暗边色*/     
       SCROLLBAR-3DLIGHT-COLOR:    #E1E1E1;        /*滚动条及箭头的3D亮边色*/     
       SCROLLBAR-TRACK-COLOR:    #E1EDFD;            /*滚动条底色*/     
       SCROLLBAR-DARKSHADOW-COLOR:#FFFFFF;    /*滚动条及箭头的暗边阴影色*/     
       SCROLLBAR-BASE-COLOR:    #9BBBF4;              /*滚动条的基本颜色*/     
       SCROLLBAR-ARROW-COLOR:    #35507A;            /*箭头的颜色*/     
       SCROLLBAR-FACE-COLOR:    #9BBBF4;              /*滚动条及箭头的颜色*/     
   } 
2)（某些样式需ie5.5+才能支持）：   
   1．overflow内容溢出时的设置（设定被设定对象是否显示滚动条）   
   overflow-x水平方向内容溢出时的设置   
   overflow-y垂直方向内容溢出时的设置   
   以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。     
   2．scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）   
   scrollbar-arrow-color上下按钮上三角箭头的颜色   
   scrollbar-base-color滚动条的基本颜色   
   scrollbar-dark-shadow-color立体滚动条强阴影的颜色   
   scrollbar-face-color立体滚动条凸出部分的颜色   
   scrollbar-highlight-color滚动条空白部分的颜色   
   scrollbar-shadow-color立体滚动条阴影的颜色     
   我们通过几个实例来讲解上述的样式属性：   
   1.让浏览器窗口永远都不出现滚动条   
   没有水平滚动条   
   <body    style="overflow-x:hidden">   
   没有垂直滚动条   
   <body    style="overflow-y:hidden">   
   没有滚动条   
   <body    style="overflow-x:hidden;overflow-y:hidden">或<body     
   style="overflow:hidden">     
   2.设定多行文本框的滚动条    
   没有水平滚动条   
   <textarea    style="overflow-x:hidden"></textarea>   
    
   没有垂直滚动条   
   <textarea    style="overflow-y:hidden"></textarea>   
    
   没有滚动条   
   <textarea    style="overflow-x:hidden;overflow-y:hidden"></textarea>   
   或<textarea    style="overflow:hidden"></textarea>   
    
   3.设定窗口滚动条的颜色   
   设置窗口滚动条的颜色为红色<body    style="scrollbar-base-color:red">   
   scrollbar-base-color设定的是基本色，一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。   
   加上一点特别的效果：   
以下是引用片段：
   <body    style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">  
4.在样式表文件中定义好一个类，调用样式表。   
以下是引用片段：
以下是引用片段：
   <style>     
   .coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}     
   </style>
 
   这样调用：   
   <textarea    class="coolscrollbar"></textarea>   
分享到：
| java生成UUID
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery自定义滚动条插件

    &lt;title&gt;jQuery自定义滚动条示例&lt;/title&gt; &lt;link rel="stylesheet" href="path/to/custom-scrollbar.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="scrollbar1"&gt; &lt;!-- 内容区域 --&gt; &lt;/div&gt; &lt;div class="scrollbar2"&gt; &lt;!-- ...

    jquery.mCustomScrollbar自定义滚动条插件

    &lt;title&gt;自定义滚动条示例&lt;/title&gt; &lt;link rel="stylesheet" href="path/to/jquery.mCustomScrollbar.css"&gt; &lt;style&gt; .content { width: 300px; height: 200px; overflow: auto; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; ...

    html笔记大全

    `&lt;hr&gt;`标签创建一条水平线，可以自定义其宽度、长度、对齐方式和颜色。例如： ```html &lt;hr size="5" width="50%" align="center" color="red"&gt; ``` HTML还提供了多种列表类型，如无序列表`&lt;ul&gt;`、有序列表`&lt;ol&gt;`和...

    html常用代码大全[借鉴].pdf

    滚动条样式可以通过CSS（Cascading Style Sheets）进行自定义，例如在`&lt;HEAD&gt;`标签内添加样式规则，改变滚动条的颜色和样式。`&lt;MARQUEE&gt;`标签则用于创建滚动文本效果，`behavior`属性可设置滚动方式，`direction`...

    ml代码大全

    - `&lt;BODY&gt;`：包含网页的主体内容。 2. **文本格式化**： - `&lt;H1&gt;` 至 `&lt;H6&gt;`：定义不同级别的标题，H1最大，H6最小。 - `&lt;P&gt;`：定义段落。 - `&lt;B&gt;` 和 `&lt;I&gt;`：分别用于加粗和斜体文本。 - `&lt;U&gt;`、`&lt;S&gt;` 和 `...

    售卡网站系统

    &lt;br&gt;2、滚动新闻，可由后台增加。&lt;br&gt;3、预留在线支付接口。&lt;br&gt;4、拥有产品管理系统。&lt;br&gt;5、在线留言系统，用户可以审核留言。&lt;br&gt;6、用户可以对新闻大类进行自定义； &lt;br&gt;7、 用户可以对新闻小类进行自定义； &lt;br...

    html代码大全参考.pdf

    - 使用CSS可以自定义滚动条的样式，例如颜色、边框等。 8. **动画效果**： - `&lt;MARQUEE&gt;`：创建滚动文本，有多种行为和方向可设置，如滑动、来回滚动、上下左右滚动，以及循环次数和宽度高度的设定。 以上只是...

    js自定义滚动条

    JavaScript 自定义滚动条是一种常见的网页美化技术，它允许开发者通过 CSS3 和 JavaScript 为网页的滚动条赋予独特的样式和交互效果，以提升用户体验并增强页面的整体设计感。在这个主题下，我们将深入探讨如何使用...

    网页设计html代码标签大全宣贯.pdf

    29. 滚动条样式：通过CSS可以自定义滚动条的外观，包括颜色、边框等。 30. `&lt;MARQUEE&gt;`：创建滚动文本效果，有多种行为和方向可设置，但不推荐在现代网页设计中使用，因为它会影响页面的可访问性和可读性。 HTML...

    自己总结的 HTML基本语法

    - **自定义列表**：`&lt;dl&gt;`、`&lt;dt&gt;`和`&lt;dd&gt;`构建定义列表。 ```html &lt;ul type="disc"&gt; &lt;li&gt;项目一&lt;/li&gt; &lt;li&gt;项目二&lt;/li&gt; &lt;/ul&gt; &lt;ol start="5"&gt; &lt;li&gt;项目一&lt;/li&gt; &lt;li&gt;项目二&lt;/li&gt; &lt;/ol&gt; &lt;dl&gt; &lt;dt&gt;术语&lt;/dt&gt; &lt;dd...

    html标签大全

    48. `&lt;span&gt;`：自定义标签，用于对文档中的小部分进行样式控制。 以上就是HTML标签大全中的主要标签及其作用，它们共同构成了HTML文档的基础结构，为网页设计提供了强大的功能。在实际开发中，应当遵循W3C标准，...

    html主体标签大全

    6. **插入水平线标签&lt;hr&gt;:** `&lt;hr&gt;`标签插入一条水平线，可以设置`size`（线条粗细）、`width`（宽度）、`align`（对齐方式）、`color`（颜色）和`noshade`（取消3D阴影）属性。 7. **署名标签&lt;address&gt;:** `...

    仿mac风格滚动条

    &lt;title&gt;仿Mac风格滚动条&lt;/title&gt; &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/jquery.jscrollpane.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="css/jscrollpane.css"&gt;...

    自定义滚动条兼容IE（含滚动时的回调函数）

    &lt;title&gt;自定义滚动条兼容IE&lt;/title&gt; &lt;style&gt; .scrollbar-container { width: 100%; height: 200px; overflow: auto; /* 对于非IE浏览器 */ scrollbar-width: thin; scrollbar-color: #888 #f1f1f1; } ....

    经常使用的html标签!

    25. `&lt;frame&gt;`: 用于创建框架集中的子窗口，`margin*`属性调整边距，`noresize`阻止用户调整大小，`scrolling`控制滚动条，`src`设置子窗口的内容。 26. `&lt;frameset&gt;`: 定义框架集，`cols`和`rows`用于划分窗口。 ...

    自定义滚动条

    &lt;title&gt;自定义滚动条&lt;/title&gt; &lt;link rel="stylesheet" href="jquery.mCustomScrollbar.css"&gt; &lt;script src="https://code.jquery.com/jquery-3.x-git.min.js"&gt;&lt;/script&gt; &lt;script src="jquery.mCustomScrollbar....

    html培训教程

    1. **基本语法**：`&lt;hr&gt;`用于插入一条水平线。 2. **设置高度**：通过`size`属性可以设置线条的高度。 ```html &lt;hr size="2"&gt; ``` 3. **设置宽度**：通过`width`属性可以设置线条的宽度。 ```html &lt;hr width=...

    兄弟连学员珍藏笔记

    9. **文本与布局**：使用`&lt;p&gt;`、`&lt;br&gt;`、`&lt;center&gt;`、`&lt;pre&gt;`、`&lt;li&gt;`、`&lt;ul&gt;`、`&lt;ol&gt;`、`&lt;hr&gt;`等标签进行文本格式化和布局，`&lt;h1&gt;`至`&lt;h6&gt;`表示不同级别的标题，`&lt;b&gt;`、`&lt;i&gt;`、`&lt;u&gt;`、`&lt;sub&gt;`、`&lt;sup&gt;`等标签用于...

Magicbox
Global site tag (gtag.js) - Google Analytics