`

HTML标签的overflow处理

    博客分类:
  • css
阅读更多
使用CSS来修饰滚动条  
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立体滚动条阴影的颜色  

以上七个属性设置的值都是颜色值,可以使用样式表定义的各种表达方式。  

使用以上的样式定义内容,我们可以指定浏览器窗口、多行文本框的滚动条的显示与否和颜色样式,第一组样式属性用于设定被设定对象是否显示滚动条,第二组样式属性则用于设置滚动条的颜色,要注意的本文涉及的样式属性都是ie才能支持的,第二组的样式属性只有ie5.5版本才能支持,所以请大家在调试的时候注意。  

我们通过几个实例来讲解上述的样式属性:  

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.设定其他元素时,基本上一样,你最好是在样式表文件中定义好一个类,这样你就可以重复使用了。  

.coolscrollbar  

{  

scrollbar-arrow-color:yellow;  

scrollbar-base-color:lightsalmon;  

}  

将以上语句加入到样式表文件中或html头部的 <style> </style> 当中,然后使用  

<textarea   class= "coolscrollbar "> </textarea>
分享到:
评论

相关推荐

    HTML标签的overflow处理用应

    使用CSS来修饰滚动条 1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-...

    IE, firefox竖向横向滚动条处理

    Firefox在高度还不够一窗口的时候,本也没有...答案是给html标签加上overflow-y:scroll;因此兼容Firefox和IE8的写法是:html { overflow:-moz-scrollbars-vertical;overflow-y:scroll; } forward.molly.宝儿 独自行走

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    html的body内标签之fieldset标签和label标签 上述内容总结 css选择器 css的存在形式及优先级 css边框以及其他常用样式 css之float样式 css之float实现作业实例 css之display样式 css之内外边距 本周作业以及思路 第...

    sql-formatter:用于格式化sql语句的轻量级php类。 处理自动缩进和语法突出显示

    用法SqlFormatter类具有一个采用SQL字符串的静态方法'format' 作为输入,并在pre标签内返回格式化HTML块。 用法示例: &lt;?phprequire_once ( 'SqlFormatter.php' );$ query = "SELECT count(*),`Column1`,`...

    css-record:记录css一些使用技巧

    iOS和部分Android在使用 button 标签时,如果设置等高的 line-height ,会出现文字下偏移的情况 iOS使用默认字体(不设置字体)时,奇数字号会出现上偏移1px的情况 Android在 字号 % 4 !== 0 时(如11px,14px),会...

    IE6-bugs:IE6 bugs汇总(如果你有新的问题,请补充) 最近发现项目方向越来越不对了,干脆用来放置浏览器的兼容性内容吧!

    在IE6,7下元素要通过浮动并在同一行,就给这行元素都加浮动4.P标签中不要嵌套块元素5.IE6下最小高度问题在IE6下元素的高度的小于19px的时候,会被当做19px来处理解决办法:overflow:hidden;6.1px dotted 在IE6下不...

    CSS 网页内容换行控制

    一、white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。 复制代码代码如下:语法: white-space : normal | pre | nowrap 取值: normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器...

    CSS 教程之内容设置的一些语法

     可以实现HTML中PRE标签的效果,以及单元格的noWrap效果。  语法: white-space : normal | pre | nowrap  取值: normal: 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre:...

    文章管理系统

    采集过程中,加入 采集标题 去HTML化处理 3.改进保存远程图片和采集图片逻辑 4.几个小细节纠正 2011年11月24日 V2.3升级包 1.MSXML2.XMLHTTP更换成MSXML2.ServerXMLHTTP,防止采集或生成首页静态页会卡死问题 2....

    出现问题a is defined高手帮忙

    DragZoomUtil.style([zoomDiv], {position: 'absolute', display: 'none', overflow: 'hidden', cursor: 'crosshair', zIndex: 101}); mapDiv.appendChild(zoomDiv); // add event listeners GEvent....

    ExtAspNet_v2.3.2_dll

    -参考http://www.cnblogs.com/sanshi/archive/2009/09/04/1560146.html#1635830 +添加对extjs3.0中所有语言的支持。 -ExtAspNet扩展的多语言包在js\languages\extaspnet目录下,目前只有en,zh_CN,zh_TW三种实现...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

Global site tag (gtag.js) - Google Analytics