<style type="text/css">
.div1
{
height:100px;
width:100px;
border:1px solid #ccc;
overflow-y:scroll;
float:left;
overflow-x:hidden;
position:relative;
}
/**
* @brief 淡蓝色
*/
.ScrollLightBlue
{
scrollbar-face-color:#B0DCF8;
scrollbar-shadow-color:#CAEBFF;
scrollbar-highlight-color:#95D4FB;
scrollbar-3dlight-color:#95D4FB;
scrollbar-darkshadow-color:#95D4FB;
scrollbar-track-color:#EFF8FF;
scrollbar-arrow-color:#FFFFFF;
}
.ScrollRed
{
scrollbar-face-color: #FFB2B5;
scrollbar-arrow-color: #EF696B;
scrollbar-shadow-color: #F79694;
scrollbar-3dlight-color: #F7A6A5;
scrollbar-track-color: #FFDFE7;
scrollbar-highlight-color: #FFD3D6;
scrollbar-darkshadow-color: #FFD7DE;
}
.ScrollGreen
{
scrollbar-face-color: #C6E78C;
scrollbar-arrow-color: #52AE29;
scrollbar-3dlight-color: #9CDF5A;
scrollbar-track-color: #DEF3BD;
scrollbar-shadow-color: #8CCB63;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color: #BDE39C;
}
.ScrollOrange{
scrollbar-face-color: #FFD58D;
scrollbar-arrow-color: #FA9B19;
scrollbar-3dlight-color: #ff8000;
scrollbar-track-color: #FEF8D8;
scrollbar-shadow-color: #ff8000;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color:brown;
}
.ScrollGray
{
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
.ScrollBlack
{
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollLightRed
{
scrollbar-face-color: #682222;/*#CEEF94;*/
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollBlue
{
scrollbar-face-color: #4786C4;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
</style>
通过CSS 能实现的网页中的滚动条效果还是丰富多彩的，先来看下面的一些效果图。对应的源代码帖在后面。
scrollbar-face-color:#B0DCF8; scrollbar-shadow-color:#CAEBFF; scrollbar-highlight-color:#95D4FB; scrollbar-3dlight-color:#95D4FB; scrollbar-darkshadow-color:#95D4FB; scrollbar-track-color:#EFF8FF; scrollbar-arrow-color:#FFFFFF;
scrollbar-face-color: #FFB2B5; scrollbar-arrow-color: #EF696B; scrollbar-shadow-color: #F79694; scrollbar-3dlight-color: #F7A6A5; scrollbar-track-color: #FFDFE7; scrollbar-highlight-color: #FFD3D6; scrollbar-darkshadow-color: #FFD7DE;
scrollbar-face-color: #C6E78C; scrollbar-arrow-color: #52AE29; scrollbar-3dlight-color: #9CDF5A; scrollbar-track-color: #DEF3BD; scrollbar-shadow-color: #8CCB63; scrollbar-highlight-color: #CEF38C; scrollbar-darkshadow-color: #BDE39C;
scrollbar-face-color: #FFD58D; scrollbar-arrow-color: #FA9B19; scrollbar-3dlight-color: #ff8000; scrollbar-track-color: #FEF8D8; scrollbar-shadow-color: #ff8000; scrollbar-highlight-color: #CEF38C; scrollbar-darkshadow-color:brown;
scrollbar-face-color: #DEE3E7; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #DEE3E7; scrollbar-3dlight-color: #D1D7DC; scrollbar-arrow-color: #006699; scrollbar-track-color: #EFEFEF; scrollbar-darkshadow-color: #98AAB1;
scrollbar-face-color:#999; scrollbar-3dlight-color:#ccc; scrollbar-arrow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF;
scrollbar-face-color:#999; scrollbar-3dlight-color:#ccc; scrollbar-arrow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF;
scrollbar-face-color: #4786C4; scrollbar-3dlight-color:#fff; scrollbar-arrow-color:#B7CBE4; scrollbar-highlight-color:#FFFFFF;
说明如下图：
源代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.div1
{
height:100px;
width:100px;
border:1px solid #ccc;
overflow-y:scroll;
float:left;
overflow-x:hidden;
position:relative;
}
/**
* @brief 淡蓝色
*/
.ScrollLightBlue
{
scrollbar-face-color:#B0DCF8;
scrollbar-shadow-color:#CAEBFF;
scrollbar-highlight-color:#95D4FB;
scrollbar-3dlight-color:#95D4FB;
scrollbar-darkshadow-color:#95D4FB;
scrollbar-track-color:#EFF8FF;
scrollbar-arrow-color:#FFFFFF;
}
.ScrollRed
{
scrollbar-face-color: #FFB2B5;
scrollbar-arrow-color: #EF696B;
scrollbar-shadow-color: #F79694;
scrollbar-3dlight-color: #F7A6A5;
scrollbar-track-color: #FFDFE7;
scrollbar-highlight-color: #FFD3D6;
scrollbar-darkshadow-color: #FFD7DE;
}
.ScrollGreen
{
scrollbar-face-color: #C6E78C;
scrollbar-arrow-color: #52AE29;
scrollbar-3dlight-color: #9CDF5A;
scrollbar-track-color: #DEF3BD;
scrollbar-shadow-color: #8CCB63;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color: #BDE39C;
}
.ScrollOrange{
scrollbar-face-color: #FFD58D;
scrollbar-arrow-color: #FA9B19;
scrollbar-3dlight-color: #ff8000;
scrollbar-track-color: #FEF8D8;
scrollbar-shadow-color: #ff8000;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color:brown;
}
.ScrollGray
{
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}
.ScrollBlack
{
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollLightRed
{
scrollbar-face-color: #682222;/*#CEEF94;*/
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
.ScrollBlue
{
scrollbar-face-color: #4786C4;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
}
</style>
</head>
<body>
<div class="div1 ScrollLightBlue">
scrollbar-face-color:#B0DCF8;
scrollbar-shadow-color:#CAEBFF;
scrollbar-highlight-color:#95D4FB;
scrollbar-3dlight-color:#95D4FB;
scrollbar-darkshadow-color:#95D4FB;
scrollbar-track-color:#EFF8FF;
scrollbar-arrow-color:#FFFFFF;
</div>
<div class="div1 ScrollRed">
scrollbar-face-color: #FFB2B5;
scrollbar-arrow-color: #EF696B;
scrollbar-shadow-color: #F79694;
scrollbar-3dlight-color: #F7A6A5;
scrollbar-track-color: #FFDFE7;
scrollbar-highlight-color: #FFD3D6;
scrollbar-darkshadow-color: #FFD7DE;
</div>
<div class="div1 ScrollGreen">
scrollbar-face-color: #C6E78C;
scrollbar-arrow-color: #52AE29;
scrollbar-3dlight-color: #9CDF5A;
scrollbar-track-color: #DEF3BD;
scrollbar-shadow-color: #8CCB63;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color: #BDE39C;
</div>
<div class="div1 ScrollOrange">
scrollbar-face-color: #FFD58D;
scrollbar-arrow-color: #FA9B19;
scrollbar-3dlight-color: #ff8000;
scrollbar-track-color: #FEF8D8;
scrollbar-shadow-color: #ff8000;
scrollbar-highlight-color: #CEF38C;
scrollbar-darkshadow-color:brown;
</div>
<div class="div1 ScrollGray">
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
</div>
<div class="div1 ScrollBlack">
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
</div>
<div class="div1 ScrollLightRed">
scrollbar-face-color:#999;
scrollbar-3dlight-color:#ccc;
scrollbar-arrow-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
</div>
<div class="div1 ScrollBlue">
scrollbar-face-color: #4786C4;
scrollbar-3dlight-color:#fff;
scrollbar-arrow-color:#B7CBE4;
scrollbar-highlight-color:#FFFFFF;
</div>
说明如下图：
<img src="4551178_0500.gif"/>
</body>
</html>
分享到：
相关推荐
在网页开发过程中，我们经常会遇到滚动条不显示的情况。这可能是由于CSS样式设置不当、HTML结构问题或者JavaScript代码干扰导致的。本篇文章将根据给定的信息来探讨如何解决“滚动条不显示”的问题。 #### CSS样式...
但对于一些人来说要加入这些代码还不是那么容易，或者当您要将您网站的网页全部换一个滚动条的风格的话，可就不那么容易了，而使用"网页美化之滚动条"您可以轻松添加/更改一个网页或网站的滚动条颜色！
在HTML中，滚动条是网页元素超出其容器时出现的机制，允许用户查看或浏览超出视窗的内容。虽然默认的滚动条样式在各个浏览器中基本一致，但通过CSS（层叠样式表）我们可以自定义滚动条的外观，使其与网站的整体设计...
#### 一、理解网页滚动条的基本概念 在开始解决实际问题前，我们先来了解一下滚动条的基本原理。滚动条是网页中用于帮助用户浏览内容的一种交互元素。当网页内容超出浏览器窗口大小时，浏览器会自动添加滚动条以便...
在Qt编程中，滚动条（ScrollBar）是一种常见的控件，用于在内容超出视窗范围时提供导航。在“Qt悬浮滚动条-滚动条样式”这个主题中，我们主要探讨如何创建一个不占用控件实际宽高的滚动条，同时增强其视觉效果和交互...
在网页设计中，滚动条是不可或缺的元素，它允许用户浏览超出屏幕范围的内容。而“图形滚动条 个性滚动条”则提供了一种创新的方法，通过使用div+css技术来定制滚动条，使其不仅具备基本功能，还能成为网页设计的一...
在网页设计中，滚动条是不可或缺的一部分，尤其是在内容超过屏幕显示范围时。传统的滚动条样式通常是浏览器默认的，但随着Web开发技术的发展，开发者现在可以通过JavaScript实现自定义滚动条，以提升网页的用户体验...
在网页设计中，当页面内容超出了可视区域的宽度时，浏览器会自动添加水平滚动条以允许用户水平滚动查看隐藏的内容。然而，滚动条本身会占用一定的空间，这可能会导致页面宽度缩小，从而影响布局的整体美观性。为了不...
在网页设计中，滚动条是不可或缺的一部分，尤其是在内容丰富的页面上。系统默认的滚动条样式通常比较单调，可能与整体设计风格不协调。因此，利用CSS（层叠样式表）来美化滚动条，使之与网站的视觉效果统一，是提升...
制作网页中的滚动条 制作网页中的滚动条 制作网页中的滚动条
网页滚动条是网页界面设计中的一个重要元素，它允许用户在内容超出可视区域时浏览页面的其余部分。在现代网页设计中，为了提升用户体验和个性化设计，JavaScript（简称JS）被广泛用于自定义滚动条，使其不仅具有基本...
网页滚动条是用户界面中一个看似微不足道但至关重要的元素。它允许用户在内容超出视口时浏览页面。在现代网页设计中，为了提升用户体验和视觉吸引力，设计师们经常寻求创新方法来定制滚动条，使其与网站的整体风格...
在IT行业中，网页设计是至关...总之，"华丽滚动条滚动条Jquery"是一个关于如何利用Jquery增强网页滚动条视觉效果的主题。通过深入学习和实践，开发者不仅可以提升网页的美观度，还能优化用户在浏览网页时的交互体验。
在网页设计和开发中，有时候为了提升页面的美观度或者特定设计需求，我们需要对Web浏览器的滚动条进行隐藏。这个主题“webbrowser滚动条隐藏”主要涉及到CSS样式控制和技术实现，我们将深入探讨如何通过CSS来隐藏...
网页滚动条样式是网页设计中一个常常被忽略但至关重要的细节。CSS（层叠样式表）为开发者提供了定制滚动条外观的可能性，使得滚动条能够更好地融入网页的整体设计风格，提升用户体验。本文将深入探讨如何使用CSS来...
今天用pop的弹出窗口里，出现一个问题，当网页出现滚动条里，不能遮挡住，解决Pop遮罩层无法遮挡滚动条下问题。 pop滚动条遮挡
### 网页滚动条控制方法详解 #### 一、去除网页滚动条 网页滚动条是用户在浏览页面时常见的导航元素，有时为了特定的设计需求或优化用户体验，我们需要去除不必要的滚动条。 **去除水平滚动条** 可以通过设置`...
在网页设计中，滚动条是不可或缺的元素，尤其是在内容超过容器显示范围时。然而，浏览器默认的滚动条样式通常较为简单，与现代网页设计追求的美观和个性化需求有所出入。CSS（层叠样式表）提供了一种方法，允许...
HTML网页滚动条滚动插件（匀速滚动，支持向上向下滚动）