.

日志

关于我

琴棋书画

.

文章分类

日志滚动条代码的（应用）

2013-11-25 22:36:09| 分类：【代码应用】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

素材篇 - 沧海 - 请分享更多精彩

文字1

代码：

日志文字

代码：

日志文字

代码：
<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> 文字</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> 文字</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> 文字</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>

文字1

代码：
<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> 文字</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> 文字</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> </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> 文字</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（从右向左）。

使用方法：

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

琴棋书画家园欢迎您

评论这张

转发至微博

阅读(89)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_087064082080089064092080080074072087082064092095083069',
              blogTitle:'日志滚动条代码的（应用）',
              blogAbstract:'\r\n<DIV\></DIV\>\r\n<DIV\></DIV\>\r\n<DIV\>\r\n<DIV\></DIV\>\r\n<P align=\"center\"  \>\r\n<TABLE style=\"WIDTH: 650px; HEIGHT: 6328px;\"   border=\"1\"  cellSpacing=\"50\"  borderColor=\"#000000\"  borderColorDark=\"#470154\"  cellPadding=\"0\"  width=\"650\"  background=\"http://img0.ph.126.net/9JU5z-YgVp2_wcUCikfPrA==/648236871381655820.jpg\"  align=\"center\"  \>\r\n<TBODY\>\r\n<TR\>\r\n<TD\>\r\n<TABLE style=\"WIDTH: 639px; HEIGHT: 4417px;\"   border=\"1\"  cellSpacing=\"20\"  borderColor=\"#470154\"  cellPadding=\"0\"  width=\"639\"  background=\"http://img837.ph.126.net/-OcU6Y-x6Pn9eDkRFLP9yg==/1776951527976202136.gif\"  align=\"center\"  \>\r\n<TBODY\>\r\n<TR\>\r\n<TD\>\r\n</TD\></TR\></TABLE\></TD\></TR\></TABLE\></P\></DIV\>',
              blogTag:'素材基地',
              blogUrl:'blog/static/1338956201310541510808',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1385390169246,
              publishTime:1385390169118,
              permalink:'blog/static/1338956201310541510808',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'.',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/1338956201310541510808">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

.

导航

日志

日志滚动条代码的（应用）

历史上的今天

最近读者

热度

评论

页脚