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

夜雨的博客小屋

学习别人,展示自己,交流分享

 
 
 

日志

 
 

博客首页横向并列使用的滑动块【夜雨制作】  

2009-07-24 09:22:34|  分类: 博客应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

横向并列使用的滑动块

美博技巧~夜雨制作

四列加背景图片的效果1:
 
添加内容
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
添加内容
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
添加内容
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
添加内容
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

四列代码

<TABLE style="WIDTH: 460px; HEIGHT: 200px" borderColor=#008b8b cellSpacing=1 cellPadding=1 width=460 align=center bgColor=#008b8b background=http://img.blog.163.com/photo/lNe7X9sZjEXRIWV0fqFjKg==/4020588567336196878.jpg border=5>
<TBODY>
<TR>
<TD>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #800000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 107px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #800000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 255px; scroll: 000000">
<CENTER><STRONG><FONT color=#0000ff size=2>添加内容</FONT></STRONG></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></TD>
<TD>
<DIV></MARQUEE><FONT face=ariel color=#ff0000 size=4></FONT></A></MARQUEE>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #800000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 107px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #800000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 255px; scroll: 000000">
<CENTER><STRONG><FONT color=#0000ff size=2>添加内容</FONT></STRONG></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></DIV></TD>
<TD>
<DIV></MARQUEE><FONT face=ariel color=#ff0000 size=4></FONT></A></MARQUEE>
<CENTER></CENTER></STRONG></FONT><A></A>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #800000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 107px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #800000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 255px; scroll: 000000">
<CENTER><STRONG><FONT color=#0000ff size=2>添加内容</FONT></STRONG></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></DIV></TD>
<DIV align=left>&nbsp;</DIV></TD>
<TD>
<DIV></MARQUEE><FONT face=ariel color=#ff0000 size=4></FONT></A></MARQUEE>
<CENTER></CENTER></STRONG></FONT></DIV><A></A>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #800000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 107px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #800000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 255px; scroll: 000000">
<CENTER><STRONG><FONT color=#0000ff size=2>添加内容</FONT></STRONG></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></TD></TR></TBODY></TABLE>

三列效果2:

添加内容
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
添加内容
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
添加内容
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 三列代码:
<TABLE style="WIDTH: 460px; HEIGHT: 200px" borderColor=#008b8b cellSpacing=1 cellPadding=1 width=460 align=center bgColor=#008b8b background=http://img.blog.163.com/photo/g3Be9DfCssRIF-QpXgEL1Q==/2840645464964589429.jpg border=5>
<TBODY>
<TR>
<TD>
<DIV></MARQUEE><FONT face=ariel color=#ff0000 size=4></FONT></A></MARQUEE>
<CENTER></CENTER></STRONG></FONT><A></A>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #800000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 144px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #800000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 210px; BACKGROUND-COLOR: #000000; scroll: 000000">
<CENTER><FONT color=#ffff00><STRONG>添加内容</STRONG></FONT></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></DIV></TD>
<TD>
<DIV></MARQUEE><FONT face=ariel color=#ff0000 size=4></FONT></A></MARQUEE>
<CENTER></CENTER></STRONG></FONT><A></A>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #800000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 144px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #800000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 210px; BACKGROUND-COLOR: #000000; scroll: 000000">
<CENTER><FONT color=#ffff00><STRONG>添加内容</STRONG></FONT></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></DIV></TD>
<TD>
<DIV></MARQUEE><FONT face=ariel color=#ff0000 size=4></FONT></A></MARQUEE>
<CENTER></CENTER></STRONG></FONT></DIV><A></A>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #800000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 144px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #800000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 210px; BACKGROUND-COLOR: #000000; scroll: 000000">
<CENTER><FONT color=#ffff00><STRONG>添加内容</STRONG></FONT></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></DIV></TD></TR></TBODY></TABLE>

二列效果3:

添加内容
文字/图表/链接等
夜雨的博客小屋
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
添加内容
文字/图表/链接等
夜雨的博客小屋 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 二列代码:
<TABLE style="WIDTH: 460px; HEIGHT: 200px" borderColor=#008b8b cellSpacing=1 cellPadding=1 width=276 align=center bgColor=#008b8b background=http://img.blog.163.com/photo/g3Be9DfCssRIF-QpXgEL1Q==/2840645464964589429.jpg border=5>
<TBODY>
<TR>
<TD></MARQUEE><FONT color=#ff0000 size=4></FONT></A></MARQUEE>
<CENTER></CENTER></STRONG></FONT><A></A>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #008b8b; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 220px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #008b8b; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 370px; BACKGROUND-COLOR: #000000; scroll: 000000">
<CENTER><FONT color=#ffff00>添加内容</FONT></CENTER>
<CENTER><FONT color=#ffff00>文字/图表/链接等</FONT></CENTER>
<CENTER><FONT face=楷体_GB2312 color=#ff99cc><A href="链接地址">链接标题</A></FONT></CENTER>
<CENTER></FONT>&nbsp;
<P></P></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></TD>
<TD>
<DIV>
<DIV></MARQUEE><FONT color=#008b8b size=4></FONT></A></MARQUEE>
<CENTER></CENTER></STRONG></FONT></DIV><A></A>
<DIV>
<DIV style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; SCROLLBAR-FACE-COLOR: #008b8b; SCROLLBAR-HIGHLIGHT-COLOR: #000000; OVERFLOW: scroll; BORDER-LEFT: 1px solid; WIDTH: 220px; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #008b8b; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000; BORDER-BOTTOM: 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #000000; HEIGHT: 370px; BACKGROUND-COLOR: #000000; scroll: 000000">
<CENTER><FONT color=#ffff00>添加内容</FONT></CENTER>
<CENTER><FONT color=#ffff00>文字/图表/链接等</FONT></CENTER>
<CENTER><FONT face=楷体_GB2312 color=#ff00ff><A href="链接地址/">链接标题</A></FONT></CENTER>
<CENTER></FONT>&nbsp;
<P></P></CENTER>
<CENTER>&nbsp;</CENTER>
<CENTER>&nbsp;</CENTER></DIV></DIV></DIV></TD></TR></TBODY></TABLE>

换个颜色图片链接的效果:

博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋 博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋 博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋 博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋 博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋 博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋 博客二分栏风格模块使用的并联滑动块【夜雨制作】 - 夜雨 - 夜雨的博客小屋

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


滑动块内的黑色背景可加入自己喜欢的背景

  评论这张
 
阅读(3010)| 评论(2)
推荐 转载

历史上的今天

评论

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

页脚

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