logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

HTML学习笔记☆滚动条制作

 吉祥如意988 2014-05-26

HTML学习笔记☆滚动条制作

滚动条文字详解
滚动条代码
语法解释
<DIV align=center>
滚动条框居中
<DIV style="
基本属性
WIDTH: 300px;
宽度300像素
HEIGHT: 150px;
高度150像素
OVERFLOW: scroll;
超出范围时使用滚动条（auto可用scroll代替。用auto会自动适应，即文本的宽或高超出预设的的值，才会出现横或竖滚动条；而用scroll则无论如何都会出现横竖滚动条。一般用auto会比较美观）
COLOR: #006600;
框内文字颜色（当然这是默认值，如果文本设置了其他颜色则会显示相应的颜色）
BACKGROUND-COLOR: #ccffcc;
背景色,如果要用透明背景就不写这一句
SCROLLBAR-FACE-COLOR: #006600;
滚动条中间可以拉的部分和箭头旁边部分的颜色
SCROLLBAR-TRACK-COLOR: #00FFFF;
滚动条中间可以拉的部分以外的颜色
SCROLLBAR-ARROW-COLOR: #33cc33;
箭头部分的颜色
SCROLLBAR-HIGHLIGHT-COLOR: #33cc33;
竖滚动条左侧边框和横滚动条上侧的颜色（用于显示立体之用）
SCROLLBAR-3DLIGHT-COLOR: #33cc33;
竖滚动条左侧边框和横滚动条上侧的颜色（用于显示立体之用）
SCROLLBAR-SHADOW-COLOR: #33cc33;
竖滚动条右侧边框和横滚动条下侧的颜色（用于显示阴影之用）
SCROLLBAR-DARKSHADOW-COLOR: #33cc33;
竖滚动条右侧边框和横滚动条下侧的颜色（用于显示阴影之用）
BORDER-TOP: black 2px solid;
表示文本框的上边框的颜色，（可用16进制数值表示）、粗细和状态（solid表示实线，可选的值有dashed表示虚线，double表示双线（如 black double;），outset表示外凸）。还有可以直接使用 border: red solid 2px 来整体定义边框。
BORDER-BOTTOM: black 2px solid;
表示文本框的下边框的颜色，其它同上
BORDER-LEFT: black 2px solid;
表示文本框的左边框的颜色，其它同上
BORDER-RIGHT: black 2px solid"
表示文本框的右边框的颜色，其它同上
align=center>
文本框中文字的对齐方式，可用center/left/right分别对应中/左/右
<DIV><FONT color=#000000>文字内容
特定框中文字颜色与文字内容
DIRECTION: rtl;
SCROLLBAR-3DLIGHT前加入时轴居左
DIRECTION: ltr;
轴居左的同时加入此代码，文字内容方向ltr（默认，从左向右）、rtl（从右向左）。如：<DIV style="DIRECTION: ltr; FONT-SIZE: 12px">文字
OVERFLOW-X: Hidden;
强制隐藏X轴滚动条
OVERFLOW-Y: Hidden;
强制隐藏Y轴滚动条


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

滚动条代码-吉祥如意988-
 

 基本代码:

<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> 文字</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> 文字</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> 文字</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> 文字</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> </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> 文字</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> 这里为文字输入区

<BR> 这里为文字输入区

<BR> 这里为文字输入区

<BR> 这里为文字输入区

<BR> 这里为文字输入区

<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>
更多滚动条样式点击：滚动条样式大全 配色辞典

 欢迎语素材 - 吉祥如意988 -

http://jxry988.360doc.com 吉祥如意988-360doc个人图书馆

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 吉祥如意988 > 《学习笔记》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多