滚动条大全（二）
2016-06-02 12:54
288 查看
另类滚动条：
【演示】
【HTML代码】
①
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px
solid; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px
solid">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
②
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px
solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
③
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll;
BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px;
BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
④
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto;
BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px;
BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑤
<DIV style="BORDER-RIGHT:
#216dad 1px solid; BORDER-TOP: #216dad 1px solid;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px;
SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑥
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW:
auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px;
SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad;
SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px;
SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff;
BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR:
#216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT:
80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑦
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff);
SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑧
<DIV style="BORDER-RIGHT:
#216dad 1px solid; BORDER-TOP: #216dad 1px solid;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑨
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW:
auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px;
SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad;
SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px;
SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff;
BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR:
#ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT:
80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑩
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff);
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑾
<DIV
style="word-break:keep-all;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px
solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid;
WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT:
80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑿
<DIV style="DIRECTION:
rtl;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE:
12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px;
LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT:
80px">
<DIV style="DIRECTION: ltr;">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV>
⒀
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="DIRECTION: rtl;BORDER-RIGHT: #216dad 1px
solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR:
#ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff);
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; BORDER-BOTTOM: #216dad 1px
solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR:
#ffffff; HEIGHT: 80px">
<DIV style="DIRECTION:
ltr"><P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV></TD></TR></TBODY></TABLE>
【说明】
v 必须在html编辑状态下编辑代码。
v
简单的文本框是通过DIV实现的，包含背景图片的文本框是通过将DIV嵌入到Table中实现的。
v
主要通过对DIV的Style属性来控制样式，主要设置如下：
overflow（溢出控制）：visible（默认，可见）、auto（自动）、scroll（显示滚动条）；
width（宽度）：数值；
height（高度）：数值；
color（字体颜色）：色彩代码；
font-size（字体大小）：数值；
line-height（行高）：数值；
border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
font-weight（字体粗细）：normal、bold、bolder、lighter；
font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆；
background（背景颜色）：色彩代码；
scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar-3dlight-color,scrollbar-arrow-color（滚动条各部分的颜色）：色彩代码；
filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果；
word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；
direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）。
v 辅助工具
在线滚动条配色器：通过本工具可以方便地在线设置滚动条样式。地址1 地址2
颜色采集器：通过本工具可以方便地获取屏幕显示的任何颜色。下载颜色采集器1.05
【演示】
| 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | ||||
| ①DIV：未设置宽度、高度、溢出；溢出默认为可见，宽度和高度自动调整 | ||||
| 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | ||
| ②DIV：设置宽度、高度，未设置溢出；溢出默认为可见，高度设置无效并自动调整 | ③DIV：设置宽度、高度，溢出为滚动；始终显示滚动条 | ④DIV：设置宽度、高度，溢出为自动；根据内容多少决定是否显示滚动条 | ||
| 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
|
| ||
| ⑤DIV：设置宽度、高度，溢出为自动，假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，适用于文字 | ⑥Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式1；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果1，不适用于背景图片 | ⑦Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式1；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果1，适用于文字和背景图片 | ||
| 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
|
| ||
| ⑧DIV：设置宽度、高度，溢出为自动，假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，适用于文字 | ⑨Table/DIV：设置宽度、高度，溢出为自动，背景图片、假透明滚动条样式2；根据内容多少决定是否显示滚动条，利用颜色实现假透明效果2，不适用于背景图片 | ⑩Table/DIV：设置宽度、高度，溢出为自动，背景图片、真透明滚动条样式2；根据内容多少决定是否显示滚动条，利用滤镜实现真透明效果2，适用于文字和背景图片 | ||
| 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 | 这是测试文字 这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字 |
| ||
| ⑾DIV：增加“word-break:keep-all;”属性，即可实现横向滚动条。 | ⑿DIV/DIV：嵌入另外一个DIV，并且对他们设置“DIRECTION”属性，即可实现左侧滚动条。 | ⒀Table/DIV/DIV：左侧真透明滚动条和背景图片的综合运用。 |
【HTML代码】
①
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px
solid; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px
solid">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
②
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BORDER-LEFT: 1px
solid; WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
③
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: scroll;
BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px;
BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
④
<DIV style="BORDER-RIGHT: 1px
solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; OVERFLOW: auto;
BORDER-LEFT: 1px solid; WIDTH: 120px; LINE-HEIGHT: 20px;
BORDER-BOTTOM: 1px solid; HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑤
<DIV style="BORDER-RIGHT:
#216dad 1px solid; BORDER-TOP: #216dad 1px solid;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px;
SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑥
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW:
auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px;
SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad;
SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px;
SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff;
BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR:
#216dad; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT:
80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑦
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff);
SCROLLBAR-HIGHLIGHT-COLOR: #216dad; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #216dad; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑧
<DIV style="BORDER-RIGHT:
#216dad 1px solid; BORDER-TOP: #216dad 1px solid;
SCROLLBAR-FACE-COLOR: #ffffff; FONT-SIZE: 12px;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑨
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW:
auto; BORDER-LEFT: #216dad 1px solid; WIDTH: 120px;
SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #216dad;
SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT: 20px;
SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR: #ffffff;
BORDER-BOTTOM: #216dad 1px solid; SCROLLBAR-DARKSHADOW-COLOR:
#ffffff; SCROLLBAR-BASE-COLOR: #ffffff; HEIGHT:
80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑩
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="BORDER-RIGHT: #216dad 1px solid;
BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR: #ffffff;
FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff);
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; SCROLLBAR-TRACK-COLOR:
#ffffff; BORDER-BOTTOM: #216dad 1px solid;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #ffffff;
HEIGHT: 80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></TD></TR></TBODY></TABLE>
⑾
<DIV
style="word-break:keep-all;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px
solid; FONT-SIZE: 12px; OVERFLOW: auto; BORDER-LEFT: 1px solid;
WIDTH: 120px; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT:
80px">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV>
⑿
<DIV style="DIRECTION:
rtl;BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE:
12px; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 120px;
LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; HEIGHT:
80px">
<DIV style="DIRECTION: ltr;">
<P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV>
⒀
<TABLE cellSpacing=0
cellPadding=0
background=http://storage.msn.com/x1pGHpas_o48lnoYv3Wtf0YLnI2ex9RBQtxh2MOTtTh2nuMdevyRaYEh4W6DWc6a5gNE08dA0_Iicc7D5DGW6iKNDAmaTd6EGYaFukJX0FY6WinrM4ufGK6nEPhKsjdKYxVcAtPF6PQvHcFg8vtHOficw
border=0>
<TBODY>
<TR>
<TD>
<DIV style="DIRECTION: rtl;BORDER-RIGHT: #216dad 1px
solid; BORDER-TOP: #216dad 1px solid; SCROLLBAR-FACE-COLOR:
#ffffff; FONT-SIZE: 12px; FILTER: chroma(COLOR=#ffffff);
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT:
#216dad 1px solid; WIDTH: 120px; SCROLLBAR-SHADOW-COLOR: #ffffff;
COLOR: #216dad; SCROLLBAR-3DLIGHT-COLOR: #ffffff; LINE-HEIGHT:
20px; SCROLLBAR-ARROW-COLOR: #216dad; BORDER-BOTTOM: #216dad 1px
solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR:
#ffffff; HEIGHT: 80px">
<DIV style="DIRECTION:
ltr"><P>这是测试文字</P>
<P>这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</P></DIV></DIV></TD></TR></TBODY></TABLE>
【说明】
v 必须在html编辑状态下编辑代码。
v
简单的文本框是通过DIV实现的，包含背景图片的文本框是通过将DIV嵌入到Table中实现的。
v
主要通过对DIV的Style属性来控制样式，主要设置如下：
overflow（溢出控制）：visible（默认，可见）、auto（自动）、scroll（显示滚动条）；
width（宽度）：数值；
height（高度）：数值；
color（字体颜色）：色彩代码；
font-size（字体大小）：数值；
line-height（行高）：数值；
border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
font-weight（字体粗细）：normal、bold、bolder、lighter；
font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆；
background（背景颜色）：色彩代码；
scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar-darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar-3dlight-color,scrollbar-arrow-color（滚动条各部分的颜色）：色彩代码；
filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果；
word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；
direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）。
v 辅助工具
在线滚动条配色器：通过本工具可以方便地在线设置滚动条样式。地址1 地址2
颜色采集器：通过本工具可以方便地获取屏幕显示的任何颜色。下载颜色采集器1.05
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 滚动条大全（一）
- jmeter 建立一个网络服务的测试计划
- Dreamweaver中轻松插入Java特效
- Dreamweaver自适应客户端分辨率的…
- 改变IE的字体大小设置时，页面字体…
- 背景音乐因为页面的切换而无法连续…
- 表格内的文字不会自动换行
- vmware克隆Centos6.4虚拟机网卡无法启动问题
- PNG透明图片在IE浏览器中正确显示
- ASP双引号的使用
- 引图像分割技术!轻松换背景2.0体验
- 在ASP页面中显示上一条、下一条记…
- 令层永远保持停留在屏幕的正中间部…
- 字幕滚动效果---非常酷哦
- 三组文字间隙、间歇滚动代码
- 提交按钮(带连接网址)
- this 指针
- 24款较经典的Page翻页分页css代码
- 仿3721首页模块拖曳移动效果[拖曳…
- 把网站改成黑白色,纪念这次地震中…