.

定格成①道美丽的风景綫在彼此间......

日志

关于我

衡阳博客

文章分类

实用表格滚动条导航制作

2010-12-21 18:09:40| 分类：边框表格 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

本文转载自学海《☆实用表格滚动条导航制作》

：☆实用表格滚动条导航制作原文作者：学海

实用表格滚动条导航制作

日志链接与导航

博友日志链接

01. 名称
02. 名称
03. 名称
04. 名称
05. 名称
06. 名称
07. 名称
08. 名称
09. 名称

博客素材导航

01. 名称
02. 名称
03. 名称
04. 名称
05. 名称
06. 名称
07. 名称
08. 名称
09. 名称

音画视屏欣赏

01. 名称
02. 名称
03. 名称
04. 名称
05. 名称
06. 名称
07. 名称
08. 名称
09. 名称

代码如下
<CENTER><TABLE style="CURSOR: url('http://www.ik68.cn/cursor/mouse038.ani'); BACKGROUND-IMAGE: url(http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0092.gif)" borderColor=#0000ff cellSpacing=2 cellPadding=3 width=570 bgColor=#dddddd border=1 heihgt="90%">
<TBODY>
<TR>
<TD align=middle bgColor=#0066ff colSpan=3 height=33>
<DIV style="FONT-SIZE: 18pt; FILTER: dropshadow(color=#ffffaa,offX=5,offY=3,Positive=1); WIDTH: 100%; COLOR: #ff0000; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷">日志链接与导航 </DIV></TD>
<TR>
<TD>
<TABLE width=185 align=center border=0>
<TBODY>
<TR>
<TD align=middle bgColor=#889b95 height=30>博友日志链接</TD>
<TR>
<TD align=LEFT bgColor=#5f9f9f>
<DIV style="SCROLLBAR-FACE-COLOR: #6495eb; OVERFLOW: auto; WIDTH: 185px; HEIGHT: 120px">
 01. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 02. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 03. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 04. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 05. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 06. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 07. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 08. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 09. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> </DIV></TD></TR></TR></TBODY></TABLE></TD>
<TD>
<TABLE width=185 align=center border=0>
<TBODY>
<TR>
<TD align=middle bgColor=#889b95 height=30>博客素材导航</TD>
<TR>
<TD align=LEFT bgColor=#5f9f9f>
<DIV style="SCROLLBAR-FACE-COLOR: #00ff00; OVERFLOW: auto; WIDTH: 185px; HEIGHT: 120px">
 01. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 02. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 03. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 04. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 05. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 06. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 07. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 08. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 09. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> </DIV></TD></TR></TR></TBODY></TABLE></TD>
<TD>
<TABLE width=185 align=center border=0>
<TBODY>
<TR>
<TD align=middle bgColor=#889b95 height=30>音画视屏欣赏</TD>
<TR>
<TD align=LEFT bgColor=#5f9f9f>
<DIV style="SCROLLBAR-FACE-COLOR: #00ff00; OVERFLOW: auto; WIDTH: 190px; HEIGHT: 120px">
 01. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 02. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 03. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 04. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 05. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 06. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 07. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 08. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> 
 09. <A href="http://lv.jingxiang.blog.163.com/地址" target=_blank>名称</A> </DIV></TD></TR></TR> </TBODY></TABLE></TD></TR></TR></TBODY></TABLE></CENTER>
说明∶这是表格与滚动条的组合代码。这里的蓝色、粉色、浅蓝色的代码分别为单独的三组滚动条代码、只是把其分别加到了橙颜色的这组一行三列表格代码中的三个表中了生成的效果。照此可作二列四列或更多式样。这里的黄色代码为背景图片地址、红色代码为滚动拉条颜色、其他的颜色、宽、高均可自行尝试调整。

评论这张

转发至微博

阅读(86)| 评论(0)

历史上的今天

this.p={ m:2,
 b:2,
 loftPermalink:'',
 id:'fks_094065092080085064084095080095085085086071084086081064086',
 blogTitle:'实用表格滚动条导航制作',
 blogAbstract:'：<A title=\"☆实用表格滚动条导航制作 \" target=\"_blank\" href=\"http://lv.jingxiang.blog.163.com/blog/static/59033034200932582126961\" \>☆实用表格滚动条导航制作 </A\>    原文作者：<A title=\"学 海\" target=\"_blank\" href=\"http://lv.jingxiang.blog.163.com/\" \>学 海</A\><BR\><SPAN\> <TABLE style=\"WIDTH: 740px; HEIGHT: 94px;\" border=\"0\" cellSpacing=\"15\" cellPadding=\"0\" width=\"720\" background=\"http://img.bimg.126.net/photo/xeHwYJT_BcQQLSVmO6CNiQ==/1986931860601940805.jpg\" \> <TBODY\> <TR\> <TD width=\"740\" \> <BLOCKQUOTE style=\"MARGIN-RIGHT: 0px;\" dir=\"ltr\" \> <BLOCKQUOTE style=\"MARGIN-RIGHT: 0px;\" dir=\"ltr\" \>  </P\> <A target=\"_blank\" href=\"http://lv.jingxiang.blog.163.com/\" \></A\></P\></BLOCKQUOTE\></BLOCKQUOTE\></TD\></TR\></TABLE\></SPAN\>',
 blogTag:'',
 blogUrl:'blog/static/137400732201011216940366',
 isPublished:1,
 istop:false,
 type:2,
 modifyTime:1317166824701,
 publishTime:1292926180366,
 permalink:'blog/static/137400732201011216940366',
 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"> </a>
 {elseif x.moveFrom=='iphone'}
 <a class="noul pnt" target="_blank"> </a>
 {elseif x.moveFrom=='android'}
 <a class="noul pnt" target="_blank"> </a>
 {elseif x.moveFrom=='mobile'}
 <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"> </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}

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

推荐过这篇日志的人：
 <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}
 他们还推荐了：
 <ul>
 {list b as y}
 {if !!y}
 <li class="rrb">·<a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/137400732201011216940366">${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 - 订阅此博客

.

导航

日志

实用表格滚动条导航制作

历史上的今天

最近读者

热度

评论

页脚