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

启野的博客

淡淡的雾,淡淡的雨,淡淡的云彩悠悠的游。

 
 
 

日志

 
 

HTML日志边框代码制作5:亮边框与暗边框的运用  

2011-07-10 18:37:11|  分类: HTML专区 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

亮边框与暗边框的运用

博文介绍

 

利用亮边框Bordercolorlight与暗边框Bordercolordark制作日志表格,具有凸显效果。

相关链接:

HTML表格标记详解4:TD参数中设定跨列跨行属性

HTML日志边框代码制作4:亮边框与暗边框的基本语法

颜色代码表(一)

颜色代码表(二)

 

HTML基本代码:

 

 

代码1:(跨列横排)

 

<P align=center>
<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=40 width="90%" align=center background=http://img.ph.126.net/h-exhXNdQ64LzjjCI7TdQg==/3342233873462958090.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 borderColorDark=#808080 cellPadding=5 width="100%" borderColorLight=#000000 border=2>
<TBODY>
<TR>
<TD borderColorLight=#000000 width="100%" borderColorDark=#808080 colSpan=5 height=27><FONT color=#ffffff size=5>启野博客主要内容索引</FONT></TD></TR>
<TR>
<TD  width="20%"  height=27><FONT color=#ffffff size=2>博客代码</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>博客技巧</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>博客素材</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="20%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>音画制作</FONT></TD></TR>
<TR>
<TD  width="20%"  height=27><FONT color=#ffffff size=2>我的音画</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>教研论文</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>我的相册</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>我的杂谈</FONT></TD>
<TD  width="20%" ><FONT color=#ffffff size=2>我的回忆</FONT></TD></TR>
</TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</P>

 

 

代码1(跨列横排)说明:

 

 

1、对整个表格居中<P align=center>......</P>
2、总表格设置控制表格的实际宽度width="90%" 、所有表格的背景图片background。
<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=40 width="80%" align=center
background=http://img.ph.126.net/h-exhXNdQ64LzjjCI7TdQg==/3342233873462958090.jpg border=0>......</TD></TR></TBODY></TABLE>

3、嵌套表格,做单元格

设置表格的亮边框与暗边框borderColorLight=#000000borderColorDark=#808080

设置宽度width="100%",以便单元格的宽度比例(嵌套表格,则百分比相对的是嵌套表格所在的单元格宽度)

设置单元格:

跨列属性colSpan=5

按照百分比设置单元格的宽度width="20%"

字体设置<FONT color=#ffffff size=5>

<TABLE cellSpacing=10 borderColorDark=#808080 cellPadding=5 width="100%" borderColorLight=#000000 border=2>
<TBODY>
<TR>
<TD borderColorLight=#000000 width="100%" borderColorDark=#808080 colSpan=5 height=27><FONT color=#ffffff size=5>启野博客主要
内容索引</FONT></TD></TR>
<TR>
<TD width="20%"  height=27><FONT color=#ffffff size=2>博客代码</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>博客技巧</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>博客素材</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD width="20%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>音画制作</FONT></TD></TR>
<TR>
<TD width="20%"  height=27><FONT color=#ffffff size=2>我的音画</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>教研论文</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>我的相册</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>我的杂谈</FONT></TD>
<TD width="20%" ><FONT color=#ffffff size=2>我的回忆</FONT></TD></TR>
</TBODY></TABLE>

 

 

 

效果如下:

  

启野博客主要内容索引
博客代码 博客技巧 博客素材 音画制作 音画相册
导航复制 精品音画 音乐视频 音乐动画 音画制作
我的音画 教研论文 我的相册 我的杂谈 我的回忆

 

HTML基本代码:

 

代码2:(跨行竖排)

 

<P align=center>
<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=40 width="90%" align=center background=http://img.ph.126.net/h-exhXNdQ64LzjjCI7TdQg==/3342233873462958090.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=10 borderColorDark=#808080 cellPadding=5 width="100%" borderColorLight=#000000 border=2>
<TBODY>
<TR>
<TD  borderColorLight=#000000 width="10%" borderColorDark=#808080 ROWSPAN=9 height=27> <FONT style=font:15pt style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl" color=#ffffff>启野博客主要内容索引</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>博客代码</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>博客技巧</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>博客素材</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>导航复制</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>精品音画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐视频</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音乐动画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画制作</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR>
<TR>
<TD  width="15%"  height=27><FONT color=#ffffff size=2>我的音画</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>教研论文</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>我的相册</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>我的杂谈</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>我的回忆</FONT></TD>
<TD  width="15%" ><FONT color=#ffffff size=2>音画相册</FONT></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</P>

 

代码2(跨行竖排)说明:

 

 

其他说明参照代码1(跨列横排)说明。

跨列设置ROWSPAN=9

文字设置样式 <FONT style=font:15pt style="LINE-HEIGHT: 120%;WRITING-MODE: tb-rl" color=#ffffff>

字体大小:style=font:15pt

字体竖排:style="LINE-HEIGHT: 120%; WRITING-MODE: tb-rl"

字体颜色:color=#ffffff

 

效果如下:

   

启野博客主要内容索引
博客代码 博客技巧 博客素材 音画制作 音画相册 音画相册
导航复制 精品音画 音乐视频 音乐动画 音画制作 音画相册
导航复制 精品音画 音乐视频 音乐动画 音画制作 音画相册
导航复制 精品音画 音乐视频 音乐动画 音画制作 音画相册
导航复制 精品音画 音乐视频 音乐动画 音画制作 音画相册
导航复制 精品音画 音乐视频 音乐动画 音画制作 音画相册
导航复制 精品音画 音乐视频 音乐动画 音画制作 音画相册
我的音画 教研论文 我的相册 我的杂谈 我的回忆 音画相册

 

 

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

历史上的今天

评论

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

页脚

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