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

pcxxyx2909的博客

幸运秀家园——朋友是雨中的伞,有你不凄惨,朋友是雪中的碳,有你胜严寒

 
 
 

日志

 
 

【转载】滚动条代码  

2014-06-29 23:45:26|  分类: 博客素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自闲散人也《滚动条代码》

 

滚动条代码



     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片
     插入文字或者图片

滚动条代码 - 闲散人也 -
 

 基本代码:

<DIV align= >

<DIV style='color: red; background-color: 000000; border:000000 solid 1px; width: 290px;    height: 325px;  overflow: scroll;  scrollbar-face-color:red;  scrollbar-highlight-color:000000;  scrollbar-3dlight-color:000000;  scrollbar-darkshadow-color:000000;  scrollbar-shadow-color:000000;  scrollbar-arrow-color:000000;  scrollbar-track-color:000000;'>

插入文字或者图片<br>

插入文字或者图片<br>

插入文字或者图片<br>

插入文字或者图片<br>

</DIV></DIV>

 代码说明:

scrollbar-arrow-color:上下按钮上三角箭头的颜色

scrollbar-base-color:滚动条的基本颜色

scrollbar-darkshadow-color:滚动条强阴影的颜色

scrollbar-3dlight-color: 滚动条凸出部分的颜色

scrollbar-highlight-color:滚动条空白部分的颜色

scrollbar-shadow-color:立体滚动条阴影的颜色

scrollbar-track-color: 滚


没有其他“杂碎”的滚动条

输入你的内容

输入你的内容

输入你的内容

输入你的内容

输入你的内容

输入你的内容

代码:

 <DIV style="OVERFLOW: auto; WIDTH: 200px; HEIGHT: 150px" align=center>
<P>输入你的内容</P>
<P>输入你的内容</P>
<P>输入你的内容</P>
<P>输入你的内容</P>
<P>输入你的内容</P>
<P>输入你的内容</P></DIV>


以下是多款滚动条代码:


博客文章内容

代码1:

<DIV align=center>

<DIV style='color: blue; background-color: white; border: green solid 1px; width: 420px; height: 100px;

overflow: scroll; scrollbar-face-color: #ABCDEF; scrollbar-shadow-color: #6666FF; scrollbar-highlight-color: #CCCCCC; scrollbar-3dlight-color: #6666FF;  scrollbar-darkshadow-color: #6699CC; scrollbar-track-color: #99CCFF; scrollbar-arrow-color: #99CCFF;'>

博客文章内容

</DIV></DIV>


文字

代码2:

<DIV align=center>

<P align=center><FONT color=#cc9999 size=3><STRONG></STRONG></FONT></P>

<DIV align=center>

<DIV style="BORDER-RIGHT: 6px ridge; BORDER-TOP: 6px ridge; SCROLLBAR-FACE-COLOR: #ccccff; SCROLLBAR-HIGHLIGHT-COLOR: #ffff99; OVERFLOW: scroll; BORDER-LEFT: 6px ridge; WIDTH: 329px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ffccff; SCROLLBAR-ARROW-COLOR: #ffccff; BORDER-BOTTOM: 6px ridge; SCROLLBAR-DARKSHADOW-COLOR: #ffcccc; HEIGHT: 114px; BACKGROUND-COLOR: #ffe4c4" align=center>

<P align=left><FONT color=#8000ff>文字</FONT></P></DIV></DIV></DIV>


日志文字

代码3:

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffa500; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 236px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e; SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 113px; BACKGROUND-COLOR: #fffacd" align=center>日志文字</DIV>


日志文字

代码4:

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffc0cb; SCROLLBAR-HIGHLIGHT-COLOR: #98fb98; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 470px; SCROLLBAR-SHADOW-COLOR: #ffb6c1; COLOR: #990099; SCROLLBAR-3DLIGHT-COLOR: #ffb6c1; SCROLLBAR-ARROW-COLOR: #f5deb3; SCROLLBAR-TRACK-COLOR: #ffdead; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #90ee90; HEIGHT: 180px; BACKGROUND-COLOR: #ffffe0" align=center>日志文字</DIV>


 文字

代码5:

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #ffffe0; SCROLLBAR-HIGHLIGHT-COLOR: #ffffe0; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 312px; SCROLLBAR-SHADOW-COLOR: #ccccff; COLOR: #009900; SCROLLBAR-3DLIGHT-COLOR: #ccccff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffcc; HEIGHT: 76px; BACKGROUND-COLOR: #ffffcc" align=center>

<DIV align=left><SPAN></SPAN>&nbsp;文字</DIV></DIV>


 文字

代码6:

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center>

<DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV></DIV>


 文字

代码7:

<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffccff; SCROLLBAR-HIGHLIGHT-COLOR: #ff99cc; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff99cc; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ff99cc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffccff; HEIGHT: 111px; BACKGROUND-COLOR: #ffccff" align=center>

<DIV align=left><FONT color=#009900></FONT><FONT color=#ff00ff>&nbsp;文字</FONT></DIV></DIV>


 文字

代码8:

<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcccc; SCROLLBAR-HIGHLIGHT-COLOR: #ff9999; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 355px; SCROLLBAR-SHADOW-COLOR: #ff9999; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcccc; SCROLLBAR-ARROW-COLOR: #ffcccc; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 88px; BACKGROUND-COLOR: #ffcccc" align=center>

<DIV align=left><FONT color=#009900></FONT><FONT color=#ff6699>&nbsp;文字</FONT></DIV></DIV>


粉色透明效果滚动框

 

代码9:

<DIV style="BORDER-RIGHT: #f0b4b4 solid; BORDER-TOP: #f0b4b4 solid; SCROLLBAR-FACE-COLOR: #f0b4b4; SCROLLBAR-HIGHLIGHT-COLOR: #999999; OVERFLOW: scroll; BORDER-LEFT: #f0b4b4 solid; WIDTH: 316px; SCROLLBAR-SHADOW-COLOR: #ffccff; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #ffffcc; BORDER-BOTTOM: #f0b4b4 solid; SCROLLBAR-DARKSHADOW-COLOR: #f0b4b4; HEIGHT: 143px; BACKGROUND-COLOR: #ffe1f0" align=center>

<P align=left><FONT color=#9900cc>粉色透明效果滚动框</FONT></P>

<P align=left>&nbsp;</P></DIV></DIV>


 文字

 代码10:

<DIV style="BORDER-RIGHT: #ff9999 2px solid; BORDER-TOP: #ff9999 2px solid; SCROLLBAR-FACE-COLOR: #ffcc99; SCROLLBAR-HIGHLIGHT-COLOR: #ff9966; OVERFLOW: scroll; BORDER-LEFT: #ff9999 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #ff9966; COLOR: #ffcccc; SCROLLBAR-3DLIGHT-COLOR: #ffcc99; SCROLLBAR-ARROW-COLOR: #ff9966; BORDER-BOTTOM: #ff9999 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffcc99; HEIGHT: 111px; BACKGROUND-COLOR: #ffcc99" align=center>

<DIV align=left><FONT color=#009900></FONT><FONT color=#ff3300>&nbsp;文字</FONT></DIV></DIV>



 这里为文字输入区
 这里为文字输入区
 这里为文字输入区
 这里为文字输入区
 这里为文字输入区


代码11:

<DIV align=center>
<DIV style="BORDER-RIGHT: #ffccff 1px dotted; BORDER-TOP: #ffccff 1px dotted; SCROLLBAR-HIGHLIGHT-COLOR: #f5d8f5; OVERFLOW: auto; BORDER-LEFT: #ffccff 1px dotted; WIDTH: 28.26%; SCROLLBAR-SHADOW-COLOR: #e5c8e5; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 15px; SCROLLBAR-TRACK-COLOR: #ffefff; BORDER-BOTTOM: #ffccff 1px dotted; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ff66ff; HEIGHT: 100px">

<BR><DIV>&nbsp;这里为文字输入区

<BR>&nbsp;这里为文字输入区

<BR>&nbsp;这里为文字输入区

<BR>&nbsp;这里为文字输入区

<BR>&nbsp;这里为文字输入区

<BR><BR><BR></DIV></DIV></DIV>


左侧滚动条:

  这是一个左侧滚动条。

  这是一个左侧滚动条。

  这是一个左侧滚动条。

  这是一个左侧滚动条。

  这是一个左侧滚动条。

  这是一个左侧滚动条。

  这是一个左侧滚动条。

  这是一个左侧滚动条。

  这是一个左侧滚动条。

代码:

<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 377px; DIRECTION: rtl; BORDER-BOTTOM: 1px solid; HEIGHT: 100px">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px" align=left>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
<P>  这是一个左侧滚动条。</P>
</DIV></DIV>


2011年07月06日 - 闲散人也 - .

★7
  评论这张
 
阅读(0)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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