启野的博客

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

日志

关于我

启野

B型天秤座

文章分类

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=#000000、borderColorDark=#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

效果如下：

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

评论这张

转发至微博

阅读(1047)| 评论(0)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_095070092095084066092094087095083084084067083083082065',
              blogTitle:'HTML日志边框代码制作5：亮边框与暗边框的运用',
              blogAbstract:'  <TABLE border=\"1\" cellSpacing=\"5\" borderColor=\"#003333\" cellPadding=\"0\" width=\"800\" align=\"center\" height=\"211\" \>  <TBODY\>  <TR\>  <TD style=\"FILTER: Blur(Add=true, Direction=180, Strength=20);\"  bgColor=\"#003333\" height=\"27\" \><WBR\>    <P align=\"center\" \><FONT size=\"6\" \><FONT face=\"华文新魏\" \><FONT color=\"#ff0000\" \>亮边框与暗边框的运用</FONT\></FONT\></FONT\></P\></TD\></TR\>  <TR\>  <TD style=\"FILTER: Blur(Add=true, Direction=180, Strength=20);\"  bgColor=\"#003333\" height=\"27\" \><FONT color=\"#ccffff\" \>博文介绍</FONT\></TD\></TR\>  <TR\>  <TD height=\"184\" vAlign=\"top\" \>  <P style=\"TEXT-INDENT: 21pt; MARGIN: 0cm 0cm 0pt; mso-char-indent-count: 2.0;\"  \><SPAN lang=\"EN-US\" \><FONT face=\"Times New Roman\"  \></FONT\></SPAN\> </P\></TD\></TR\></TABLE\>',
              blogTag:'html',
              blogUrl:'blog/static/7250754220116995914484',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1329410757111,
              publishTime:1310294231940,
              permalink:'blog/static/7250754220116995914484',
              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:'B型天秤座',
              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/7250754220116995914484">${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 - 订阅此博客

启野的博客

导航

日志

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

历史上的今天

最近读者

热度

评论

页脚