DIV Scroll属性

DIV Scroll属性详解,为DIV层打造不同的滚动条。

一、scrollbar属性、样式详解 
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.设定多行文本框的滚动条

  没有水平滚动条
   <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>

2.让浏览器窗口永远都不出现滚动条
    没有水平滚动条
    <body style="overflow-x:hidden">
    没有垂直滚动条
    <body style="overflow-y:hidden">
    没有滚动条
    <body style="overflow-x:hidden;overflow-y:hidden">或<body  
    style="overflow:hidden">

3.在样式表文件中定义好一个类,调用样式表。

<style>
.coolscrollbar{scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon;}
</style>
这样调用:
<textarea class="coolscrollbar"></textarea>

Scrollbar-Face-Color为滚动条表面颜色设定;
Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定;
Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定;
Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定;
Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。
Scrollbar-Track-Color为滚动条底板颜色设定;
Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

实例:

body { 
background-color: #ffffff; 
color: #336699; 
SCROLLBAR-FACE-COLOR: #BED8EB; 
SCROLLBAR-SHADOW-COLOR: #DDF8FF; 
SCROLLBAR-HIGHLIGHT-COLOR: #92C0D1; 
SCROLLBAR-3DLIGHT-COLOR: #DDF8FF; 
SCROLLBAR-DARKSHADOW-COLOR: #92C0D1; 
SCROLLBAR-TRACK-COLOR:#BED8EB; 
SCROLLBAR-ARROW-COLOR: #92C0D1 
}

4.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色<body style="scrollbar-base-color:red">
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。
加上一点特别的效果:
<body style="scrollbar-arrow-color:yellow;scrollbar-base-color:lightsalmon">

转载于:https://www.cnblogs.com/top5/archive/2011/06/20/2084967.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/475591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

神经网络 - BP神经网络与RBF神经网络模型解决实际问题 - (Matlab建模)

目录 神经网络模型简述 实例&#xff1a;交通运输能力预测设计 MATLAB程序及仿真结果 由于货物运输、地方经济及企业发展的紧密联系&#xff0c;因此作为反映货物运输需求的一项重要指标, 货运量预测研究和分析具有较强的实际意义。 常用的货运量预测方法包括时间序列方法、…

LeetCode 135. 分发糖果(DP)

1. 题目 老师想给孩子们分发糖果&#xff0c;有 N 个孩子站成了一条直线&#xff0c;老师会根据每个孩子的表现&#xff0c;预先给他们评分。 你需要按照以下要求&#xff0c;帮助老师给这些孩子分发糖果&#xff1a; 每个孩子至少分配到 1 个糖果。相邻的孩子中&#xff0c…

神经网络 - RBF神经网络与BP网络优缺点比较 - 机器学习基础知识

RBF神经网络与BP神经网络优缺点比较 1. RBF 的泛化能力在多个方面都优于BP 网络, 但是在解决具有相同精度要求的问题时, BP 网络的结构要比RBF 网络简单。 2. RBF 网络的逼近精度要明显高于BP 网络,它几乎能实现完全逼近, 而且设计起来极其方便, 网络可以自动增加神经…

网络数据的背后-网络日志的分析指标【转】

通常网站分析的技术包括页面标签分析技术&#xff08;JS技术&#xff09;和日志文件分析技术两种&#xff0c;两种网站分析技术各有优缺点&#xff0c;譬如下文中介绍的基于回话的统计和点击流分析日志文件分析法就要优于页面标签分析法&#xff0c;通常&#xff0c;两种技术具…

词云图 - WorldCloud - Python代码实现

目录 第一步&#xff1a;安装必要的包WorldCloud&#xff08;安装好并且没有出错的可跳过这一步&#xff09; 第二步&#xff1a;准备文件&#xff0c;词云图的图片和文章&#xff0c;按照自己喜好准备吧 第三步&#xff1a;Python实现-源码 第一步&#xff1a;安装必要的包…

运行命令

cmd--------CMD命令提示符ipconfig-------检查IPtsshutdn-------60秒倒计时关机命令cleanmgr-------垃圾整理calc-----------启动计算器notepad--------打开记事本logoff---------注销命令winver---------检查Windows版本mstsc----------远程桌面连接转载于:https://www.cnblog…

[Hands On ML] 2. 一个完整的机器学习项目(加州房价预测)

文章目录1. 项目介绍2. 性能指标3. 确定任务类型4. 查看数据5. 创建测试集6. 数据可视化7. 查找数据关联8. 特征组合9. 为算法准备数据9.1 数据清洗9.2 处理文本特征10. 自定义转换器11. 特征缩放12. 转换流水线Pipeline13. 训练模型14. 交叉验证15. 微调模型15.1 网格搜索15.2…

线性回归 - 机器学习多元线性回归 - 一步一步详解 - Python代码实现

目录 数据导入 单变量线性回归 绘制散点图 相关系数R 拆分训练集和测试集 多变量线性回归 数据检验&#xff08;判断是否可以做线性回归&#xff09; 训练线性回归模型 先甩几个典型的线性回归的模型&#xff0c;帮助大家捡起那些年被忘记的数学。 ● 单变量线性回归&…

Checking battery state… ubuntu

Checking battery state… 当ubuntu启动的时候遇到 “Checking battery state….”时&#xff0c; 按下ctrl alt F1,进入终端&#xff0c;使用管理员权限执行下列代码 sudo rm /etc/X11/xorg.confsudo reboot 转载于:https://www.cnblogs.com/hjslovewcl/archive/2011/06/30/…

层次分析法AHP - 代码注释多 - ( 数据建模 Python代码)

实际生活中&#xff0c;往往有一些很复杂的系统&#xff0c;我们没办法直观草率的确定权重&#xff0c;比如甲、乙、丙三人竞选总统&#xff0c;严谨的说&#xff0c;需要从三人的社交能力、管理能力、经济能力等方面来考虑&#xff0c;在每个方面&#xff0c;三位候选人的得分…

LeetCode 1155. 掷骰子的N种方法(DP)

1. 题目 这里有 d 个一样的骰子&#xff0c;每个骰子上都有 f 个面&#xff0c;分别标号为 1, 2, …, f。 我们约定&#xff1a;掷骰子的得到总点数为各骰子面朝上的数字的总和。 如果需要掷出的总点数为 target&#xff0c;请你计算出有多少种不同的组合情况&#xff08;所…

Android 之自定义组件

1、如何在一个按钮上放上一张图片&#xff1f;把按钮和图片套在一个FrameLayout中 <!-- 必须将button和ImageView分别嵌套在两个LinearLayout中才能 实现将图片放在按钮上 --> <FrameLayout android:orientation"horizontal" android:layout_width&…

职业规划之后,还需要什么?职业规划与职业选择 - 续集

一时的想法写下&#xff0c;竟没想到会有很多的朋友的共鸣&#xff0c;几天前写下了一则文章&#xff1a;职业规划与职业选择 &#xff0c;写的目的只是自己的心得所绘。很多朋友朋友给我的写作提供了宝贵意见&#xff0c;自己以后也会注意的写作的。但是不免有时候是个人的及时…

LeetCode 1223. 掷骰子模拟(DP)

1. 题目 有一个骰子模拟器会每次投掷的时候生成一个 1 到 6 的随机数。 不过我们在使用它时有个约束&#xff0c;就是使得投掷骰子时&#xff0c;连续 掷出数字 i 的次数不能超过 rollMax[i]&#xff08;i 从 1 开始编号&#xff09;。 现在&#xff0c;给你一个整数数组 ro…

聚类分析 - K-means - Python代码实现

算法简介 K-means算法是很典型的基于距离的聚类算法&#xff0c;采用距离作为相似性的评价指标&#xff0c;即认为两个对象的距离越近&#xff0c;其相似度就越大。该算法认为簇是由距离靠近的对象组成的&#xff0c;因此把得到紧凑且独立的簇作为最终目标。 算法过程如下&…

安装“消息队列 (MSMQ)”

在 Windows Server 2008 or Windows Server 2008 R2 上安装消息队列 4 在服务器管理器中&#xff0c;单击“功能”。 在“功能摘要”下的右窗格中&#xff0c;单击“添加功能”。 在生成的窗口中&#xff0c;展开“消息队列”。 展开“消息队列服务”。 单击“目录服务集成…

数据归一化 - MinMaxScaler()/MaxAbsScaler() - Python代码

目录 归一化 数据归一化的背景介绍 MinMaxScaler&#xff1a;归一到 [ 0&#xff0c;1 ] MaxAbsScaler&#xff1a;归一到 [ -1&#xff0c;1 ] 标准化 去均值&#xff0c;方差规模化 归一化 数据归一化的背景介绍 在之前做聚类分析的时候我们发现&#xff0c;聚类的…

LeetCode 673. 最长递增子序列的个数(DP)

1. 题目 给定一个未排序的整数数组&#xff0c;找到最长递增子序列的个数。 示例 1: 输入: [1,3,5,4,7] 输出: 2 解释: 有两个最长递增子序列&#xff0c;分别是 [1, 3, 4, 7] 和[1, 3, 5, 7]。示例 2: 输入: [2,2,2,2,2] 输出: 5 解释: 最长递增子序列的长度是1&#xff0c;…

loadrunner 配置远程监控windows服务器系统资源

今天决定监控远程windows xp上的系统资源&#xff0c;本来以为应该很好连接&#xff0c;在同一个局域网内&#xff0c;结果出了一堆问题&#xff0c;可能是第一次就让我遇到了一个棘手的操作系统&#xff0c;郁闷&#xff01; &#xff08;1&#xff09;保证装有loadrunner的测…

Python数据清洗 - 洗什么?怎么洗?看完就明白了

目录 缺失值处理 删除缺失值 插补缺失值 不处理缺失值 重复值处理 异常值处理 遍历查找异常值&#xff0c;并根据规则调整大小 删除异常值 视为缺失值后进行插补 数据挖掘过程中&#xff0c;采集的原始数据里存在着各种不利于分析与建模工作的因素&#xff0c;比如数…