注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一帆风顺

行有不得,反求诸己。

 
 
 

日志

 
 

上下拉动文本框  

2013-09-17 21:11:59|  分类: 首页装饰 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自淡淡的薄雾《上下拉动文本框》

 


 这里为文字输入区
 这里为文字输入区
 这里为文字输入区
 这里为文字输入区
 这里为文字输入区


<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: 67%; 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>&nbsp;这里为文字输入区<BR>&nbsp;这里为文字输入区<BR>&nbsp;这里为文字输入区<BR>&nbsp;这里为文字输入区<BR>&nbsp;这里为文字输入区<BR><BR><BR></DIV></DIV></DIV>

这里为文字输入区

这里为文字输入区

这里为文字输入区

<DIV align=center>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; OVERFLOW: auto; BORDER-LEFT: 1px solid; WIDTH: 480px; DIRECTION: rtl; BORDER-BOTTOM: 1px solid; HEIGHT: 100px">
<DIV style="FONT-SIZE: 12px; DIRECTION: ltr; LINE-HEIGHT: 16px">
<P>这里为文字输入区</P>
<P>这里为文字输入区</P>
<P>这里为文字输入区</P></DIV></DIV></DIV>
 

 

<DIV style="BORDER-RIGHT: 1px solid; FONT-SIZE: 12px; BORDER-BOTTOM: 1px solid">

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

<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: #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>

这是测试文字

这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字

<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>

 

 
 

               长篇大论的日志,看着头晕,给自己的日志加一个滚动条吧。

 

使用方法:

1、在日志编辑状态下,点<>按钮,拷贝以上代码后,再点<>按钮,回到原日志编辑状态下输入文字即可!

2、鼠标移到滚动条的四角,可拉伸滚动条,使其适合你的日志。

3、发表即可


代码:
<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>

 

 

代码:

<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>

 

 

代码:
<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>

  

代码:
<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>&nbsp;文字</DIV></DIV>

 

代码:
<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>&nbsp;文字</DIV></DIV></DIV>

 

代码:
<DIV style="BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; SCROLLBAR-FACE-COLOR: #66ff66; SCROLLBAR-HIGHLIGHT-COLOR: #66ff99; OVERFLOW: scroll; BORDER-LEFT: black 2px solid; WIDTH: 378px; SCROLLBAR-SHADOW-COLOR: #00ff00; COLOR: #006600; SCROLLBAR-3DLIGHT-COLOR: #66ff99; SCROLLBAR-ARROW-COLOR: #009900; BORDER-BOTTOM: black 2px solid; SCROLLBAR-DARKSHADOW-COLOR: #00ff00; HEIGHT: 111px; BACKGROUND-COLOR: #ccffcc" align=center>
<DIV align=left><FONT color=#009900></FONT>&nbsp;文字</DIV></DIV>
<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 style="SCROLLBAR-FACE-COLOR: #ff6600; SCROLLBAR-HIGHLIGHT-COLOR: #c3d6da; OVERFLOW: scroll; WIDTH: 463px; SCROLLBAR-SHADOW-COLOR: #663333; COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #663333; HEIGHT: 119px; BACKGROUND-COLOR: #000000; SCROLLBAR-3DLIGHT-: #663333" align=left></DIV>

 

代码:
<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>&nbsp;文字</FONT></DIV></DIV>
  
代码:
<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>&nbsp;文字</FONT></DIV></DIV>
 
 

代码:
<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>&nbsp;</P></DIV></DIV>

 

 

代码:
<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>&nbsp;文字</FONT></DIV></DIV>

 

代码:
<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>

说明:

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(从右向左)。

-----------------------------------------------
 
 

RonanHardiman-Anthem圣歌

靠近东方Near Eastern Lounge

托尼奥康诺--《Rainforest Magic》(雨林魔法)

印第安之旅Brule -- We the People

世界顶级模特走秀指定音乐

阿拉伯音乐之旅太阳之子

酒店休闲音乐The-DesertLounge

Armik -《海洋之梦》(Sea Of Dreams)

俄罗斯作曲家Angelight——Intimland 系列之四

Enigmatic Obsession - Secrets Of Seducti

恢弘震撼-《Unearthed 出土》

Armik -《雨舞人》(Rain Dancer )

纯音乐 -《东方神秘园》(The East Secret Garden)DSD

Armik -《宝物》(Treasures )

乔维怡《小乔流水》

雨林群星 -《HI-FI雨林 II》

阿米克(Armik)《浪漫之梦》(Romantic Dreams)

Armik -《Desires》

Himekami 姬神: 風の縄文

新疆民歌 器乐《天山神韵》《兰Orchid1》邵容

群星-《吉他中国一》[FLAC] VeryCD

发烧古典珍藏:世界著名华尔兹》

汪峰[爱是一颗幸福的子弹]

汽车专用极品大碟8CD之6伤感情歌

汽车专用极品大碟8CD之8新歌

李玲玉新专辑-[美人呤]

王力宏07年[改变自己]

啊杜07年全新专辑差一点

清水一滴朋友珍藏音乐合辑

蔡琴爵色(K2发烧系列)

季艾莉 -《大城小爱》

悲情男人:张振宇《我是你的谁 》

爱过的人/郑源

群星-[炫音.发烧天碟]

常安《非比寻常》

张毅 -《情弦》

群星 -《发烧情书》

天籁纯音精选十首

水晶音乐【双电子琴-II】

  评论这张
 
阅读(45)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017