登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

人无癖不可与交,以其无深情也。

人无疵不可与交,以其无真情也。

 
 
 

日志

 
 

滚动条框制作方法与代码诠释  

2011-06-19 06:19:42|  分类: 滚动条 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

2011年04月27日 - 紫郁 - 紫郁的博客

滚动条框样式示例 左侧滚动条框代码
<div style="WIDTH: 225; HEIGHT: 300; 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" align=left>输入你的内容</DIV>
以上代码看起来比较复杂,实际应用往往不需要搞这么多东西,用下面这个代码便是一个很简单的滚动文本框。要做修饰的话就适当加入其他的代码。
<DIV align=center style="WIDTH: 300px; HEIGHT: 150px; OVERFLOW: auto; ">输入你的内容</DIV>

滚动条框代码注释详解:

align=center 文本框中文字的对齐方式,可用center/left/right分别对应中/左/右
WIDTH: 300px; 宽度300像素
HEIGHT: 150px; 高度150像素
OVERFLOW: auto; 超出范围时使用滚动条(auto可用scroll代替。用auto会自动适应,即文本的宽或高超出预设的的值,才会出现横或竖 滚动条;而用scroll则无论如何都会出现横竖滚动条。一般用auto会比较美观)
COLOR: #000000; 框内文本颜色(当然这是默认值,如果文本设置了其他颜色则会显示相应的颜色)
BACKGROUND-COLOR: #CCCCCC; 背景色,如果要用透明背景就不写这一句
SCROLLBAR-FACE-COLOR: #00FF00; 滚动条中间可以拉的部分和箭头旁边部分的颜色
SCROLLBAR-TRACK-COLOR: #00FFFF; 滚动条中间可以拉的部分以外的颜色
SCROLLBAR-ARROW-COLOR: #FFFF00; //箭头部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: #0000FF; 竖滚动条左侧边框和横滚动条上侧的颜色(用于显示立体之用)
SCROLLBAR-3DLIGHT-COLOR: #0000FF; 竖滚动条左侧边框和横滚动条上侧的颜色(用于显示立体之用)
SCROLLBAR-SHADOW-COLOR: #0000FF; 竖滚动条右侧边框和横滚动条下侧的颜色(用于显示阴影之用)
SCROLLBAR-DARKSHADOW-COLOR: #0000FF; 竖滚动条右侧边框和横滚动条下侧的颜色(用于显示阴影之用)
BORDER-TOP: red 2px solid;
BORDER-BOTTOM: red 2px solid;
BORDER-LEFT: red 2px solid;
BORDER-RIGHT: red 2px solid;
分别表示文本框的上、下、左、右边框的颜色(可用16进制数值表示)、粗细和状态(solid表示实线,可选的值有dashed表示虚线,double表示双线,outset表示外凸)。还有可以直接使用 border: red solid 2px 来整体定义边框。
OVERFLOW-X: Hidden; 强制隐藏X轴滚动条
OVERFLOW-Y: Hidden; 强制隐藏Y轴滚动条

滚动条框制作方法与代码 - 寒情 - 8-com.blog.163.com 滚动条框样式与代码(一) 滚动条框制作方法与代码 - 寒情 - 8-com.blog.163.com 滚动条框样式与代码(二)
滚动条框制作方法与代码 - 寒情 - 8-com.blog.163.com 滚动条框样式与代码(三) 滚动条框制作方法与代码 - 寒情 - 8-com.blog.163.com 滚动条框样式与代码(四)
滚动条框制作方法与代码 - 寒情 - 8-com.blog.163.com 滚动条框样式与代码(五) 滚动条框制作方法与代码 - 寒情 - 8-com.blog.163.com 滚动条框制作方法与代码
       

幽谷星尘家园欢迎你

页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。

您欣赏幽谷星尘的博文0 页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 秒啦!

谢谢您的光临,并请留下宝贵意见!

博客技巧 电脑技能 博客素材 页脚模块荟萃 - 幽谷星尘 - 人无癖不可与交,以其无深情也。 视频教程 养生保健 日志边框
音画图文

FL系列

U5制作 美文转载 音画赏析1 PS课件2
音画赏析2 视频欣赏
欢迎您的光临,让心灵共同让微笑竞相绽放!感谢朋友的关爱与支持。
 
PS课件1 社会万象

欢迎光临幽谷星尘家园
欢迎光临幽谷星尘家园

 
  评论这张
 
阅读(520)| 评论(2)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018