1,Overflow内容溢出时的设置

overflow 水平及垂直方向内容溢出时的设置 
overflow-x 水平方向内容溢出时的设置 
overflow-y 垂直方向内容溢出时的设置

以上三个属性设置的值为visible、scroll、hidden、auto

visible 默认值。使用该值时，无论设置的"width"和"height"

的值是多少，其中的内容无论是否超出范围都将被强制显示。 
hidden 效果与visible相反。任何超出"width"和"height"的内

容都会不可见。 
scroll 无论内容是否超越范围，都将显示滚动条。 
auto 当内容超出范围时，显示滚动条，否则不显示。

应用:

没有水平滚动条:
<div style="overflow-x:hidden">test</div>

没有垂直滚动条 
<div style="overflow-y:hidden">test</div>

没有滚动条 
<div style="overflow-x:hidden;overflow-y:hidden" 或

style="overflow:hidden">test</div>

自动显示滚动条
<div

style="height:100px;width:100px;overflow:auto;">test</di

v>

2,自己定义滚动条的颜色

我们一般默认的滚动条样式如下左图,右图是放大了1600倍的样

子,我们可以看到滚动条有几种言责组合的,我给他们标了7个号,

分别注释在下面的css代码的后面了,注意css的注释代码是放在

两个斜杠内的两个星号之间,如:/*这里放注释的代码*/

Body {
scrollbar-arrow-color: #f4ae21; /*图6,三角箭头的颜色*/
scrollbar-face-color: #333; /*图5,立体滚动条的颜色*/
scrollbar-3dlight-color: #666; /*图1,立体滚动条亮边的颜

色*/
scrollbar-highlight-color: #666; /*图2,滚动条空白部分的

颜色*/
scrollbar-shadow-color: #999; /*图3,立体滚动条阴影的颜

色*/
scrollbar-darkshadow-color: #666; /*图4,立体滚动条强阴

影的颜色*/
scrollbar-track-color: #666; /*图7,立体滚动条背景颜色*/

scrollbar-base-color:#f8f8f8; /*滚动条的基本颜色*/
Cursor:url(mouse.cur); /*自定义个性鼠标*/
}

以上2项适用与<body>、<div>、<textarea>、<iframe>

在css中定义滚动条样式的更多相关文章

  1. 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序

    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...

  2. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  3. css中的列表样式

    在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...

  4. css中的字体样式及元素样式

    css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...

  5. css中定义变量

    css中定义变量 定义变量可分多种情况: 1.定义全局变量 :root { --borderColor: #ccc;} 2.定义某元素下的变量 .look{ --borderColor: #ccc;} ...

  6. css中的段落样式及背景

    一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...

  7. 在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://blog.snsgou.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现 ...

  8. ArcGIS中定义图框样式

    ArcGIS系统中的样式可能不能满足实际生产需要,为了实现快速制图,可自定义一些样式,以便重复利用. 安装字符 因为样式中定义了自定义的符号,这些符号都打包到字体中,所以在使用样式之前,必须安装字体文 ...

  9. 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序

    摘自:http://www.qianyunlai.com/post-2.html     以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料 ...

随机推荐

  1. BZOJ4347 : [POI2016]Nim z utrudnieniem

    将石子从小到大排序,然后DP. 设$f[i][j][k]$表示考虑了前$i$堆的石子,当前扔掉的堆数模$d$为$j$,没有扔掉的石子的异或和为$k$的方案数. 因为石子排过序,所以转移的复杂度为$O( ...

  2. CodeForces 450B （矩阵快速幂模板题+负数取模）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=51919 题目大意:斐波那契数列推导.给定前f1,f2,推出指定第N ...

  3. [iOS] UIImage和CGImageRef

    CGImageRef并不是面向对象的API,也不是类,只是一个指针类型,Quartz 2D对CGImageRef的定义为: typedef struct CGImage *CGImageRef; 由此 ...

  4. JavaScript基础知识总结

    正则表达式: 是一种专门用于操作字符串规则. 正则表达式: 通过一些符号来表达,简化对字符串的复杂操作. 弊端:阅读性较差 常见操作: 1.匹配 String matches(regex) 2.获取( ...

  5. 【BZOJ】3673: 可持久化并查集 by zky & 3674: 可持久化并查集加强版（可持久化线段树）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3674 http://www.lydsy.com/JudgeOnline/problem.php?id ...

  6. CSS3选择器（二）之属性选择器

    CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...

  7. 不要使用SBJSON(json-framework)

    不要使用SBJSON(json-framework) 文章目录 不知道为什么,在iOS开发中,有很多人使用 SBJSON (又被称作json-framework)来做JSON解析库.我想这是因为SBJ ...

  8. 诅咒JavaScript之----ArcGIS JavaScript 点聚合 ClusterLayer

    对一个之前一直做winForm的 菜鸟来说,突然接触这么神奇的语言,基本上每天都会诅咒一下这门神奇的语言. 最近做了一个小网站,底图用的是天地图的服务,用ArcGIS JavaScript提供的一些G ...

  9. MSF命令 收集

    一.msfconsole ?   帮助菜单 back 从当前环境返回 banner   显示一个MSF banner cd   切换目录 color   颜色转换 connect   连接一个主机 e ...

  10. [kuangbin带你飞]专题六 最小生成树

    学习最小生成树已经有一段时间了 做一些比较简单的题还算得心应手..花了三天的时间做完了kuangbin的专题 写一个题解出来记录一下(虽然几乎都是模板题) 做完的感想:有很多地方都要注意 n == 1 ...