最新消息:我来了,你来了吗

收藏 带滚动条的HTML表格代码 带下拉条的HTML表格代码

心得摘录 百味人生 3039浏览 0评论

 有时候写篇文章,内容如果包含大量代码,会显得篇幅太长,而且对于读者来说不友善。还是用此类表格把代码框起来吧,这样显得美观许多。

1.带背景颜色的实线边框滚动条

<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid;SCROLLBAR-FACE-COLOR: #006600; SCROLLBAR-HIGHLIGHT-COLOR: #33cc33; OVERFLOW: auto; BORDER-LEFT: black 2px solid; WIDTH: 200px;
SCROLLBAR-SHADOW-COLOR: #33cc33; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:
#33cc33; SCROLLBAR-ARROW-COLOR: #33cc33; BORDER-BOTTOM: black 2px solid;

SCROLLBAR-DARKSHADOW-COLOR: #33cc33; HEIGHT: 150px; BACKGROUND-COLOR: #ccffcc" align=center>
<DIV align=left><FONT color=#009900>文字</FONT></DIV>
 

 

2.无背景颜色的虚线边框滚动条

<DIV style="BORDER-RIGHT: #006c90  1pt dashed; BORDER-TOP: #006c90  1pt dashed;
SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW:
 auto; BORDER-LEFT:#006c90  1pt dashed; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR:
 COLOR:#000000 ; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR:
 #006c90; BORDER-BOTTOM: #006c90  1pt dashed; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px" align=left><FONT color=#0060c0 >文字</FONT></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: 200px; SCROLLBAR-SHADOW-COLOR: #ffd700; COLOR: #d2691e;
SCROLLBAR-3DLIGHT-COLOR: #ff7f50; SCROLLBAR-ARROW-COLOR: #ff0000;
BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 150px" align=center>文字</DIV>

 

4.无背景颜色的双线边框滚动条

<DIV style="BORDER-RIGHT: #fc48b4 double; BORDER-TOP: #fc48b4 double; SCROLLBAR-FACE-COLOR: #fcd8fc; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: auto; BORDER-LEFT: #fc48b4 double; WIDTH: 200px; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #d800b4; SCROLLBAR-TRACK-COLOR: #ffffff; BORDER-BOTTOM: #fc48b4 double; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 150px" align=left><FONT color=#000000>文字</FONT></DIV>

 

5.无背景颜色的圆点边框滚动条

<DIV style="BORDER-RIGHT: #00b490  thick  dotted; BORDER-TOP: #00b490  thick  dotted;
 SCROLLBAR-FACE-COLOR: #fcfcfc; SCROLLBAR-HIGHLIGHT-COLOR: #fcfcfc; OVERFLOW: auto;
BORDER-LEFT: #00b490   thick  dotted; WIDTH: 200px; SCROLLBAR-3DLIGHT-COLOR: #fcfcfc;
SCROLLBAR-ARROW-COLOR: #00b490; SCROLLBAR-TRACK-COLOR: #fcfcfc; BORDER-BOTTOM:
 #00b490  thick  dotted; SCROLLBAR-DARKSHADOW-COLOR: #fcfcfc; HEIGHT: 150px" align=left>
<FONT color=#000000>文字</FONT></DIV>

 

6.无背景颜色的外凸边框滚动条

<DIV style="BORDER-RIGHT: #b46cfc  outset; BORDER-TOP: #b46cfc  outset;
 SCROLLBAR-FACE-COLOR:#d8b4fc; SCROLLBAR-HIGHLIGHT-COLOR: #d8b4fc;
 OVERFLOW: auto; BORDER-LEFT: #b46cfc  outset; WIDTH: 200px;
SCROLLBAR-SHADOW-COLOR: #d8b4fc; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR:
#d8b4fc; SCROLLBAR-ARROW-COLOR: #b424b4; BORDER-BOTTOM: #b46cfc  outset;
 SCROLLBAR-DARKSHADOW-COLOR: #d8b4fc; HEIGHT: 150px" align=center>
<FONT color=#000000>文字</FONT></DIV>

 

7.有背景颜色的浮出立体线框滚动条

<DIV style="BORDER-RIGHT:#fcb4d8  ridge; BORDER-TOP:
#fcb4d8  ridge; SCROLLBAR-FACE-COLOR: #fcb4d8;
SCROLLBAR-HIGHLIGHT-COLOR: #fcb4d8; OVERFLOW: auto;
BORDER-LEFT: #fcb4d8  ridge; WIDTH: 200px; SCROLLBAR-SHADOW-COLOR:
 #fcb4d8; COLOR: #fcb4d8; SCROLLBAR-3DLIGHT-COLOR: #fcb4d8;
SCROLLBAR-ARROW-COLOR: #d82448; BORDER-BOTTOM: #fcb4d8  ridge;
 SCROLLBAR-DARKSHADOW-COLOR: #fcb4d8; HEIGHT: 150px; BACKGROUND-COLOR:
#fcb4d8" align=center><P align=left><FONT color=#8000ff>文字</FONT></P></DIV>

</DIV></DIV>

 
 

 

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 带颜色的才是健康的 最后一个好看 用的时候可以改成绿色 环保 健康
    心淡若水 China Unknow Browser Unknow Os 7年前 (2011-08-27)回复