滚动文本框代码

女巫二号님의 프로필女巫的实验基地블로그리스트

도구

도움말

< 이전 다음 >

7월 22일

这是女巫测试后的颜色搭配，后附有详细的教程说明：

把代码拷贝后可直接双击文本框就可以在里面输入文字和粘贴图片，而且文本框的大小可以随意调整。

具体效果看以下链接：查看效果

代码实现的文本框是浅黄色的背景，粗略效果如文本框内所示。

（注释：附语法语句的解释：

//层开始标记，对中对齐
: <DIV align=center
//样式如下：
: style='
//前景色为#ffffff
: color: #ffffff;
//背景色为#000000
: background-color: #000000;
//边框为2像素，黑色
: border: solid 2px black;
//宽度120像素
: width: 120px;
//高度200像素
: height: 200px;
//超出范围时使用滚动条
: overflow: scroll;
//滚动条的各个颜色如下
: scrollbar-face-color: #889B9F;
: scrollbar-shadow-color: #3D5054;
: scrollbar-highlight-color: #C3D6DA;
: scrollbar-3dlight-color: #3D5054;
: scrollbar-darkshadow-color: #85989C;
: scrollbar-track-color: #95A6AA;
: scrollbar-arrow-color: #FFD6DA;
//在这个层中显示文字“日志文字”，层结束标志
: '>日志文字</DIV>

PS：特别感谢百忙中提供我帮助帮我解惑的偶的朋友TOLLY！）

另附各句的语法解释：

align=center 表示框内内容居中对齐，缺省情况下为左对齐。

background-color: transprant; 表示框内背景色为透明，需要改颜色的话，把transprant改成16进制颜色值即可。

border: solid 2px black表示文本框的边线状态，solid表示实线，可选的值有dashed(虚线)，double(双线)，outset等。 2px black分别表示边线粗细和颜色，可自行调整（注：black和#000000效果一样）将文本滚动框的边框值设置为0，即border: solid 0px

width: 355px; height: 200px; 分别表示滚动文本框的宽和高。

overflow: auto;auto表示"自动"，即框内内容不需要占据height: 200px这么高的高度时，就不会出现滚动条，一旦超过了，滚动条就会出现，多出的部分通过下拉滚动条来显示，overflow也设置的值还有scroll，即强制出现滚动条，因为这样也会强制出现横向的滚动条，很难看。

后面那部分代码，就是设置滚动条的颜色状态，根据自己的需要和喜好来调整，比较有用的是scrollbar-face-color: #889B9F;这句，其他部分不改也问题不大。将有关文本滚动框的各个组成部分的色彩均设为与日志背景相同，即修改各参数的色彩值。但滚动条箭头色彩，即scrollbar-arrow-color: 应不同的色彩值。

附八度的教学如下：

文本滾動框的源代碼：

<DIV align=center>
--------------------------------------置中;
<FONT style="
--------------------------------------文字格式;
OVERFLOW: auto;
--------------------------------------超過範圍就自動生成滾動條;
OVERFLOW-X: Hidden;
--------------------------------------需要時才用，用來隱藏X軸滾動條的;
border: solid 2px black
;-------------------------------------邊框的格式，厚度和顏色;
background-color: #ffffee;
--------------------------------------背景色,如果要透明背景就去掉整句;
SCROLLBAR-FACE-COLOR: #0000ff;
---------------滾動條中間可以拉的部分和箭頭旁邊部分的顏色;
SCROLLBAR-TRACK-COLOR: #eeffff;
---------------滾動條中間可以拉的部分以外的顏色;
SCROLLBAR-HIGHLIGHT-COLOR: #6cb424;
---------------滾動條左側邊框的顏色（用於顯示立體之用）;
SCROLLBAR-3DLIGHT-COLOR: #fcfc48;
---------------滾動條左側邊框的顏色（用於顯示立體之用）;
SCROLLBAR-SHADOW-COLOR: #90fcfc;
---------------滾動條右側邊框的顏色（用於顯示陰影之用）;
SCROLLBAR-DARKSHADOW-COLOR: #401687;
---------------滾動條右側邊框的顏色（用於顯示陰影之用）;
SCROLLBAR-ARROW-COLOR: #FFFF00;
---------------箭頭部分的顏色;
ZOOM: 100%;
---------------放大比率;
HEIGHT: 105px" face="Courier New, Courier, Monospace" color=#9933cc>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
<P>test日誌內容test</P>
</FONT></DIV>

最後介紹八度經常用的「簡化版文本滾動框」，去掉了上面的那些複雜語句，就可以簡簡單單的一個框框免除過多的花巧：

<DIV align=center><FONT style="FONT-SIZE: 11pt; OVERFLOW: auto; WIDTH: 90.62%; FONT-FAMILY: times new roman; HEIGHT: 87px" face="Courier New, Courier, Monospace" color=#9933cc>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P>
<P align=left>test日誌內容test</P></FONT>
</DIV>

最後特別注意兩點：
1. 語句中的OVERFLOW: auto;可以用OVERFLOW: scroll;代替，但效果會差一截，大家吃飽飯沒事做可以試試看！
然而其他教程中的文本滾動框都是用OVERFLOW: scroll;的，八度推介還是用OVERFLOW: auto;比較好...

2. 還有OVERFLOW-X: Hidden;是強制隱藏X軸滾動條的，如果要隱藏Y怎麼辦呢？就用OVERFLOW-Y: Hidden咯！

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

<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> </P></DIV></DIV>

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

代码：

简单透明滚动框代码：

语法为一句代码：

透明滚动框代码：

全透明滚动框代码：

白底滚动框代码：

<DIV style="BORDER-RIGHT: white 2px solid; BORDER-TOP: white 2px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; OVERFLOW: scroll; BORDER-LEFT: white 2px solid; WIDTH: 305px; SCROLLBAR-SHADOW-COLOR: #ffffff; COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #1e90ff; BORDER-BOTTOM: white 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; HEIGHT: 252px; BACKGROUND-COLOR: #ffffff" align=left><FONT color=#6699ff>
<P align=left> 白底滚动框</P></DIV>
<DIV align=left><FONT color=#6699ff></FONT> </DIV></FONT>

滚动框加背景代码：

左侧滚动文本框代码如下：

代码如下：

——取自爬山虎，女巫润色

介绍几个滚动条配色网站：地址1 ；地址2 ；地址3 ；

代码：

오전 4:15 | 트랙백 보기(총 4개) | 스크랩 | 代码

댓글 (46개)

댓글을 추가하려면 Windows Live ID로 로그인하세요. 핫메일, 메신저 또는 Xbox LIVE를 사용하는 경우 해당 계정을 Windows Live ID로 사용할 수 있습니다.로그인

Windows Live ID가 없으신가요? 등록

	ZhangShinChven님이 남긴 글: 营养价值极高！收走~ 谢~ 6월 11일
	diandian님이 남긴 글: 很赞的东西啊，我抱走了，谢谢你了！ 2월 6일
	孙amy님이 남긴 글: 没想到你的女巫的实验基地那么多人留言了阿！不错，我也来凑一脚！！呵呵~~ 10월 27일
	向一笑님이 남긴 글: 你的滚动条漂亮又好用。借了两个，太谢谢了！！ 8월 31일
	uミξFoR ﹗님이 남긴 글: 呵呵好漂亮链接以后会经常借用的哈哈~~~~~~~~~ 7월 24일
	Joyce 님이 남긴 글: 都很好看，也很有用，收了，谢谢啦！ 6월 29일
	.李子님이 남긴 글: 谢啦！李子欢迎您光临 5월 6일
	汽水님이 남긴 글: 3Q3Q 我也弄了一篇呵呵 5월 6일
	vivian님이 남긴 글: 找了好久,终于找到了,太好了..忍不住想谢谢你呢 4월 17일
	偽裝的安静님이 남긴 글: 好棒..好喜欢.. 3월 11일
	❤ca❤ 님이 남긴 글: 我想问怎么换行啊? 我打出来的字就堆在一堆的...为什么呢?? 谢谢 3월 3일
	童姥ET님이 남긴 글: 吖，，太爱你了，，好心的女巫，，MUA一个 2월 8일
	海兰님이 남긴 글: 非常感谢!!! 2월 6일
	Ann님이 남긴 글: 怎么改字体颜色? 拜托到我blog上或email给我！谢谢! 2월 2일
	西元羽蛇 님이 남긴 글: 太感动了,我一直在网上搜索,没想到在你这里找到了.感谢上帝.爱死你了!!!借用了.谢谢!!! 1월 25일
	Cathy_love_ben 님이 남긴 글: 拿走拿走，太棒了。谢谢。 1월 22일
	τáο゛痞芓鮭鮭の幻綵ぜ琾 ..︶ 님이 남긴 글: 哇哇。。。女巫，妮好棒！！！找暸好久！！ 1월 18일
	枫叶正红 님이 남긴 글: 谢谢你提供这么多素材，太好了，不客气了，会经常看你的。 1월 16일
	貓仔YAN 님이 남긴 글: 太太太好了呢 1월 4일
	╰☆╮猫囧じ老鼠canゞい丫 님이 남긴 글: thank you! 连我这么笨的猫也懂!^_^ 12월 30일

다음 > 마지막 >>

트랙백(4)

이 블로그의 트랙백 URL은 다음과 같습니다.

http://cicivi.spaces.live.com/blog/cns!A6D2CE706D0BC2FC!165.trak

이 블로그를 참조하는 웹 로그