加载中…
各式各样的滚动条 /转
(2008-02-27 15:12:59)
标签：
学习杂谈 |
分类： 装饰博客及空间题材 |
<DIV align=left><FONT color=#009900></FONT>
<DIV></DIV>
代码：
<DIV style="BORDER-RIGHT:
black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR:
#000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: auto;
BORDER-LEFT: black 2px solid; WIDTH: 372px; SCROLLBAR-SHADOW-COLOR:
#ffffff; COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000;
BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR:
#000000; HEIGHT: 319px; BACKGROUND-COLOR: #000000">
<P><FONT
color=#ff9900>文字</FONT></P></DIV></TD></TR>
代码：
<DIV align=center>
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px
solid; SCROLLBAR-FACE-COLOR: #889b9f; SCROLLBAR-HIGHLIGHT-COLOR:
#c3d6da; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH:
277px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff;
SCROLLBAR-3DLIGHT-COLOR: #3d5054; SCROLLBAR-ARROW-COLOR: #ffd6da;
BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR:
#85989c; HEIGHT: 200px; BACKGROUND-COLOR: #000000"
align=center>
<P align=left>文字</P></DIV></DIV>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff6699>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff00ff>
代码：
<DIV
align=center>
<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>
<DIV align=left><FONT color=#009900></FONT><FONT color=#ff3300>
代码：
<DIV style="BORDER-RIGHT: #c399d0 2pt dashed; BORDER-TOP: #c399d0 2pt dashed; SCROLLBAR-FACE-COLOR: #ddcae0; SCROLLBAR-HIGHLIGHT-COLOR: #c399d0; OVERFLOW: scroll; BORDER-LEFT: #c399d0 2pt dashed; WIDTH: 386px; SCROLLBAR-SHADOW-COLOR: #3d5054; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #ddcae0; SCROLLBAR-ARROW-COLOR: #c399d0; BORDER-BOTTOM: #c399d0 2pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ddcae0; HEIGHT: 92px; BACKGROUND-COLOR: #ddcae0" align=left><FONT color=#ff6633>文字</FONT></DIV>
奔跑素材
您永远忠实的朋友
奔跑素材
您永远忠实的朋友
|
奔跑素材 您永远忠实的朋友 |
奔跑素材
您永远忠实的朋友
奔跑素材
您永远忠实的朋友
奔跑素材
您永远忠实的朋友
使用方法：
奔跑|
锦瑟 |
|
|
有时候表单太长页面会有放不下或者排版不美观的情况出现。想想，要是友情链接了加了百十多个好友，那页面该有多长多难看啊。
因此滚动条的制作是必要的啦。所以找了这个代码并配了自己喜欢的图片和诗，下了一番工夫进行了参数的解读和修改，去粗取精最后做成了上面这个样子。
先把代码写出来：（以我上面做的“锦瑟”为例）
<TABLE style="WIDTH: 180px; HEIGHT: 200px" cellSpacing=1
border=1>
<TBODY>
<TR>
<TD style="FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM:
2px" vAlign=center width=180 background=http://blog.sina.com.cn/pic/583d286e37ea6257c2d14
height=30>
<P align=center><FONT
color=#ff0000>锦瑟</FONT></P></TD></TR>
<TR>
<TD vAlign=top align=left width=180
height=100>
<DIV style="BORDER-RIGHT: black 1px
solid; BORDER-TOP: black 1px solid; SCROLLBAR-FACE-COLOR: #ff6699; OVERFLOW: auto;
BORDER-LEFT: black 1px solid; WIDTH:
180px; BORDER-BOTTOM: black 1px solid; HEIGHT: 200px" align=center <div>
<TABLE height="100%" cellSpacing=0 cellPadding=0 width="100%"
border=0>
<TBODY>
<TR>
<TD style="PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE:
14px; PADDING-BOTTOM: 0px; COLOR: #000000" vAlign=bottom width=180
background=http://blog.sina.com.cn/pic/583d286e37ea6257c2d14
<IMG>
<P align=center><B>锦瑟无端五十弦</B>
<P align=center><B>一弦一柱思华年</B>
<P align=center><B>庄生晓梦迷蝴蝶</B>
<P align=center><B>望帝春心托杜鹃</B>
<P align=center><B>沧海月明珠有泪</B>
<P align=center><B>蓝田日暖玉生烟</B>
<P align=center><B>此情可待成追忆</B>
<P align=center><B>只是当时已惘然</B>
</P></TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>
这个代码参数比较多，一个个解释麻烦的很（我是很懒的。。而且有的也几乎没太大影响）。因此挑几个最重要的决定性参数来说：
1.上下两个http://blog.sina.com.cn/pic/583d286e37ea6257c2d14 分别是标题栏背景图和主表单背景图地址。
2.WIDTH:
180px HEIGHT: 200px 是滚动条的宽度和高度。WIDTH:
180px;
3.SCROLLBAR-FACE-COLOR: #ff6699 是滚动条的颜色。
4.BORDER-RIGHT: black 1px solid 是内框架右边部分的颜色和样式。它表示内边框是黑色，宽度1象素，是单线框。同理，BORDER-LEFT表示左边，BORDER-TOP表示上边的，BORDER-BOTTOM表示下边
喜欢
0
赠金笔