`
zzc1684
  • 浏览: 1214009 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

Html 滚动条样式大全

    博客分类:
  • Html
阅读更多

属性设置: WIDTH: 148;HEIGHT: 146; 根据使用的位置,可调整宽度和高度.

OVERFLOW: scroll; 显示纵横滚动条.上部的演示均属设置为scroll的界面. 但一般都设置为:auto(需要时才显示)

BACKGROUND-COLOR: transparent;

滚动框内部背景颜色.transparent为透明色.其他可使用颜色代码.

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#FF0033; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFF33; scrollbar-darkshadow-color:#FFFF33; scrollbar-face-color:#FF0033; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FF0033">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; SCROLLBAR-FACE-COLOR: EAECEC; SCROLLBAR-HIGHLIGHT-COLOR: EAECEC; SCROLLBAR-SHADOW-COLOR: BLACK; SCROLLBAR-3DLIGHT-COLOR: EAECEC; SCROLLBAR-ARROW-COLOR: EAECEC; SCROLLBAR-TRACK-COLOR: FFFFFF; SCROLLBAR-DARKSHADOW-COLOR: EAECEC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#595959">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #D2E5F4; scrollbar-highlight-color: #D2E5F4; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #D2E5F4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #59ADBB; scrollbar-track-color: #FFFFFF; scrollbar-3dlight-color: #59ADBB; scrollbar-darkshadow-color: #59ADBB">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FFC300; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #FFC300; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFC300">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:5A5227; scrollbar-arrow-color:FFF8C5; scrollbar-base-color:DDD38D; scrollbar-darkshadow-color:FFF8C5; scrollbar-face-color:DDD38D; scrollbar-highlight-color:FFF8C5; scrollbar-shadow-color:5A5227">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #9EBFE8; scrollbar-shadow-color: #FFFFFF; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DB52BC; scrollbar-shadow-color: #E994D6; scrollbar-highlight-color: #E994D6; scrollbar-3dlight-color: #DB52BC; scrollbar-darkshadow-color: #DB52BC; scrollbar-track-color: #E994D6; scrollbar-arrow-color: #FFFFFF">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #CCCCCC">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color:#FFC4E1; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FF95CA; scrollbar-darkshadow-color:#FFB5DA; scrollbar-shadow-color:#FF6AB5; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFDDEE">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #DBEBFE; scrollbar-shadow-color: #B8D6FA; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #DBEBFE; scrollbar-darkshadow-color:#458CE4; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #458CE4">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #885C10; scrollbar-highlight-color: #F8ECD8; scrollbar-3dlight-color: #885C10; scrollbar-darkshadow-color: #F8ECD8; scrollbar-track-color: #F8ECD8; scrollbar-arrow-color: #885C10">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #FFFFFF; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #FFFFFF; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-face-color: #FDDEE8; scrollbar-shadow-color: #FDDEE8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #FDCFDD; scrollbar-darkshadow-color: #FDCFDD; scrollbar-track-color: FFF6F9; scrollbar-arrow-color: #FEA6C0">
这里输入内容
</div>

<div style="WIDTH: 148; HEIGHT: 146; BACKGROUND-COLOR: transparent; OVERFLOW: scroll; scrollbar-3dlight-color:#CCFF00; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-darkshadow-color:#CCFF00; scrollbar-face-color:#CCFF00; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF">
这里输入内容
</div>

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

①DIV:未设置宽度、高度、溢出;溢出默认为可见,宽度和高度自动调整
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

②DIV:设置宽度、高度,未设置溢出;溢出默认为可见,高度设置无效并自动调整
③DIV:设置宽度、高度,溢出为滚动;始终显示滚动条
④DIV:设置宽度、高度,溢出为自动;根据内容多少决定是否显示滚动条
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑤DIV:设置宽度、高度,溢出为自动,假透明滚动条样式1;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果1,适用于文字
⑥Table/DIV:设置宽度、高度,溢出为自动,背景图片、假透明滚动条样式1;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果1,不适用于背景图片
⑦Table/DIV:设置宽度、高度,溢出为自动,背景图片、真透明滚动条样式1;根据内容多少决定是否显示滚动条,利用滤镜实现真透明效果1,适用于文字和背景图片
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑧DIV:设置宽度、高度,溢出为自动,假透明滚动条样式2;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果2,适用于文字
⑨Table/DIV:设置宽度、高度,溢出为自动,背景图片、假透明滚动条样式2;根据内容多少决定是否显示滚动条,利用颜色实现假透明效果2,不适用于背景图片
⑩Table/DIV:设置宽度、高度,溢出为自动,背景图片、真透明滚动条样式2;根据内容多少决定是否显示滚动条,利用滤镜实现真透明效果2,适用于文字和背景图片
 
这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

⑾DIV:增加“word-break:keep-all;”属性,即可实现横向滚动条。
⑿DIV/DIV:嵌入另外一个DIV,并且对他们设置“DIRECTION”属性,即可实现左侧滚动条。
分享到:
评论

相关推荐

    HTML中滚动条各种样式示例

    下面将详细介绍如何使用CSS来控制HTML中的滚动条样式。 1. **滚动条的基本样式** 默认情况下,滚动条由一个水平的滚动条(用于左右滚动)和一个垂直的滚动条(用于上下滚动)组成,包含一个滑块、轨道以及可能的...

    html滚动条样式

    HTML5页面滚动条样式的实现通常涉及到CSS3的伪元素选择器和JavaScript库,如jQuery,来增强浏览器默认滚动条的视觉效果。在本例中,我们关注的是如何使用jQuery和自定义CSS来定制HTML5页面中的滚动条,使得它们更...

    好看的滚动条样式

    在压缩包中的`css.html`文件中,很可能包含了上述知识点的详细解释和实例代码,你可以打开这个文件查看具体的内容,学习如何应用这些CSS属性来定制你自己的滚动条样式。通过自定义滚动条,不仅可以增强网页的美观性...

    滚动条样式 html css

    本篇文章将深入探讨如何利用 HTML5 和 CSS3 的特性来实现自定义滚动条样式。 一、CSS3 自定义滚动条样式 在 CSS3 中,可以使用伪元素 `::-webkit-scrollbar`、`::-webkit-scrollbar-thumb`、`::-webkit-scrollbar-...

    修改火狐滚动条样式(纯css).html

    修改火狐滚动条样式demo,纯css修改火狐默认的滚动条样式

    jquery修改滚动条样式

    在网页设计中,滚动条作为一个默认的用户交互元素,其样式通常由浏览器默认定义,但随着网页设计的个性化和用户体验的提升,自定义滚动条样式成为了一种趋势。`jQuery`,作为一款广泛使用的JavaScript库,提供了丰富...

    jquery滚动条样式

    `jQuery`作为一个广泛使用的JavaScript库,提供了丰富的功能,包括自定义滚动条样式,使得开发者能够根据网站的整体设计风格进行个性化设置。本篇文章将详细探讨如何使用jQuery实现滚动条样式的定制。 首先,我们要...

    HTML+CSS实现最简单的滚动条显示隐藏和更改滚动条样式

    在实际项目中,确保滚动条样式与整体设计保持一致非常重要,这不仅可以提升用户体验,还能增强网页的专业感。通过熟练运用HTML和CSS的这些特性,你可以创造出符合品牌风格且功能完善的滚动条。 总结,HTML和CSS提供...

    好的的滚动条样式

    在这个例子中,`index.html`可能包含了自定义滚动条样式的HTML结构和对相关样式及脚本文件的链接。 `logo.gif`文件可能是网站的logo图像,用于展示品牌形象,通常位于页面的头部。而在`images`目录下,可能包含了...

    div滚动条 带滚动条的div div滚动条样式

    DIV 滚动条样式详解 在 HTML 中,我们经常需要在 DIV 元素中添加滚动条,以便在内容超出 DIV 区域时,能够滚动查看内容。这篇文章将详细介绍如何使用 CSS 样式表来实现 DIV 滚动条的样式设置。 什么是 DIV 滚动条...

    多种风格的浏览器滚动条样式

    本篇文章将深入探讨“多种风格的浏览器滚动条样式”,并以“malihu-custom-scrollbar-plugin-master”这个压缩包文件中的内容为例,讲解如何自定义滚动条样式,让滚动条成为网站设计的一部分,提升用户体验。...

    div滚动条样式一览-div+css设计网

    在本文中,我们将深入探讨如何使用CSS来定制`div`元素的滚动条样式,以提升网页的视觉效果和用户体验。 一、滚动条的基本样式 在默认情况下,浏览器提供了一套统一的滚动条样式。然而,通过CSS3,我们可以自定义...

    滚动条css精美样式

    4. "jquery_custom_scrollbar_vertical.html" 和 "index.html" 是HTML文件,其中包含了应用自定义滚动条样式的代码示例。 5. "mcsDraggerHover.png" 可能是滑块在鼠标悬停时的图像,展示了一个交互状态的变化。 6. ...

    滚动条样式设置

    本主题将深入探讨“滚动条样式设置”,讲解如何使用JavaScript来实现自定义滚动条样式,并确保其在多浏览器环境下,包括IE,具有良好的兼容性。 一、滚动条的基本样式 默认情况下,滚动条具有操作系统特定的样式,...

    伸缩菜单和自定义滚动条样式

    在网页设计中,创建动态和交互性的用户体验是至关重要的,这正是伸缩菜单和自定义滚动条样式的目的所在。这两个特性都是通过CSS3和HTML5实现的,它们为网站提供了更高级别的用户界面和视觉吸引力。 首先,让我们...

    自定义滚动条的样式

    `malihu-custom-scrollbar-plugin-master` 是一个专门用于自定义滚动条样式的插件,它提供了丰富的定制选项,使得滚动条可以更好地融入到网站的设计风格中。 首先,让我们了解滚动条的基本构成。滚动条通常由两个...

    用js自定义滚动条样式(可使用图片哦)

    标题“用js自定义滚动条样式(可使用图片哦)”正是指向这样一个技术主题,即如何利用JavaScript和CSS来定制具有个性化外观的滚动条,特别是通过使用图片来增强其视觉效果。 滚动条是网页中非常常见的一种元素,它...

    滚动条样式修改

    本文将围绕“滚动条样式修改”这一主题,深入探讨如何通过编程技术对滚动条进行定制,提升界面的美观性和一致性。 滚动条在默认情况下,系统会提供统一的样式,但这可能并不符合设计师对于界面视觉效果的要求。特别...

    华丽滚动条滚动条Jquery

    4. **自定义滚动条样式**:浏览器默认的滚动条样式往往较为单一,但通过CSS和Jquery,我们可以定制滚动条的颜色、大小、形状,甚至鼠标滚动的速度和流畅度,使其更符合网页的整体风格。 5. **Jquery插件**:对于更...

    asp.net 垂直滚动条Css样式,Js实现源码

    在ASP.NET开发中,我们经常会遇到需要自定义滚动条样式以提升用户界面体验的情况。本资源提供了一种方法,通过CSS样式和JavaScript实现ASP.NET页面中的垂直滚动条美化。下面将详细阐述这个主题。 首先,CSS(层叠...

Global site tag (gtag.js) - Google Analytics