书山有路勤为径，学海无涯苦做舟。

老当益壮，宁知自首之心，穷且益坚，不坠青云之志。

日志

关于我

同恩

我希望我将具有足够的坚定性和美德,借以保持所有称号中我认为最值得羡慕的称号：一个诚实的人。

文章分类

【博客素材】边框的制作与应用

2009-01-07 09:44:57| 分类：【博客素材】 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

边框的基格式：

标识符分析：

<table>：表格的起始符。任意一个表格的开始都必须以它开头，且必须有终止符</table>。

cellspacing：单元格间距。当一个表格有多个单元格时，各单元格的距离就是cellspacing了，如若表格只有一个单元格，那么，这个单元格与表格上、下、左、右边边框的距离也是cellspacing。

width：表格的宽度。取值从0开始，默认以像素为单位，与显示器的分辨率的像素是一致的。800×600的显示分辨率下，如果表格设置成1000个像素的宽度，那么，得出的效果将导致IE的横向滚动条出现，只有通过滑动它才能看到表格最右边的内容，所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比，如widht="100%"，这种赋值法有个好处：表格的宽度将根据可显示的宽度来自我调整宽度。

background：表格的背景图。其值为一个有效的图片地址。<td>也有此属性。同时设置背景色和背景图不冲突，也建议这么做，这样，当图片不能显示时，表格的外观依然是好看的。

<tbody>：表体的起始符。紧跟在<table>之后，表示表体开始。必须有结尾符，放在</table>之前。在纯网页中可以不要tbody元素，但在论坛一定要使用，否则，当帖子用到较多的表格时，论坛的自动填充功能将可能会导致代码出错。

<tr>：tr的作用是规定表格的行，其中，t是table，r是row（行）。有多少组tr，这张表格就有多少行。<tr>紧跟在<tbody>之后。必须有终止符</tr>。

<td>：td的作用是规定表格的列，t是table，d可理解为down（向下）。有多少组td，这张表格就有多少列。第一个<td>紧跟在<tr>之后。终止符为</td>。td与tr配合构成单元格。

以上就第一层边框的基本要素，现在我们在看看第二层边框：

其它的全和第一层一样，但多了这几组：

1：borderColorDark=#0d1737 暗边框，颜色为0d1737 当border值不为0时设置有效。暗边框指表格的右边和下边的边框。

2：borderColorLight=#24387a 亮边框，颜色为0d1737 当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

3：cellpadding：单元格衬距。指该单元格里的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格里的内容与表格周边边框的距离。

第三层边框和第一层一样，现在我们来看最后一层边框也就是背景。

它只有背景的宽度width="网页宽度"，背景展示的网址：background=背景图片网址，还多了一个border=0它是什么意思呢？

border：此属性定义表格的边框。比如，border=1，表示表格边框的粗细为1个像素（默认值），为0表示没有边框。

以上就是边框的基本结构，现在我们来看一个实例：看看它的效果：

例：

效果图:

朋友们做贴想要设置字体的颜色时可能会说:不懂英语如何设置啊?（懂的朋友可直接用英语颜色的单词来表示）
　不要紧,不必着急,我们用代码一定可以做出漂亮的颜色来,你只需在表示字体颜色的color=的后面加上色码表中提供的代码就可以了.加入时不要忘了加个“#”号噢.比如说你要选择大红为字体色,那就用“color=#FF0000”表示它．当然，色码一样也可用于亮边框、暗边框和背景色的设置，明白了吗？想用什么色只管来拿吧，呵呵。

色码如下：

EEEEEE FF00CC FF66FF FF00FF

DDDDDD FFCCCC FF66CC FF00CC

CCCCCC FFCC99 FF6699 FF0099

BBBBBB FFCC66 FF6666 FF0066

AAAAAA FFCC33 FF6633 FF0033

999999 FFCC00 FF6600 FF0000

888888 CCCCFF CC66FF CC00FF

777777 CCCCCC CC66CC CC00CC

666666 CCCC99 CC6699 CC0099

555555 CCCC66 CC6666 CC0066

444444 CCCC33 CC6633 CC0033

333333 CCCC00 CC6600 CC0000

222222 99CCFF 9966FF 9900FF

111111 99CCCC 9966CC 9900CC

000000 99CC99 996699 990099

FF0000 99CC66 996666 990066

EE0000 99CC33 996633 990033

DD0000 99CC00 996600 990000

CC0000 66CCFF 6666FF 6600FF

BB0000 66CCCC 6666CC 6600CC

AA0000 66CC99 666699 660099

990000 66CC66 666666 660066

880000 66CC33 666633 660033

770000 66CC00 666600 660000

660000 33CCFF 3366FF 3300FF

550000 33CCCC 3366CC 3300CC

440000 33CC99 336699 330099

330000 33CC66 336666 330066

220000 33CC33 336633 330033

110000 33CC00 336600 330000

FFFFFF 00CCFF 0066FF 0000FF

FFFFCC 00CCCC 0066CC 0000CC

FFFF99 00CC99 006699 000099

FFFF66 00CC66 006666 000066

FFFF33 00CC33 006633 000033

FFFF00 00CC00 006600 000000

CCFFFF FF99FF FF33FF 00FF00

CCFFCC FF99CC FF33CC 00EE00

CCFF99 FF9999 FF3399 00DD00

CCFF66 FF9966 FF3366 00CC00

CCFF33 FF9933 FF3333 00BB00

CCFF00 FF9900 FF3300 00AA00

99FFFF CC99FF CC33FF 990099

99FFCC CC99CC CC33CC 008800

99FF99 CC9999 CC3399 007700

99FF66 CC9966 CC3366 006600

99FF33 CC9933 CC3333 005500

99FF00 CC9900 CC3300 004400

66FFFF 9999FF 9933FF 003300

66FFCC 9999CC 9933CC 002200

66FF99 999999 993399 001100

66FF66 999966 993366 0000FF

66FF33 999933 993333 0000EE

66FF00 999900 993300 0000DD

33FFFF 6699FF 6633FF 0000CC

33FFCC 6699CC 6633CC 0000BB

33FF99 669999 663399 0000AA

33FF66 669966 663366 000099

33FF33 669933 663333 000088

33FF00 669900 663300 000077

00FFFF 3399FF 3333FF 000066

00FFCC 3399CC 3333CC 000055

00FF99 339999 333399 000044

00FF66 339966 333366 000033

00FF33 339933 333333 000022

00FF00 339900 333300 000011

0099FF 0033FF 0099CC 0033CC

009999 003399 009966 003366

009933 003333 009900 003300

评论这张

转发至微博

阅读(370)| 评论(2)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_085068085085081074093086094095082095084071093082085068',
              blogTitle:'【博客素材】边框的制作与应用 ',
              blogAbstract:'<TABLE style=\"TABLE-LAYOUT: fixed\" cellSpacing=0 cellPadding=0 width=\"98%\" align=center border=0\>\r\n<TBODY\>\r\n<TR\>\r\n<TD style=\"WORD-WRAP: break-word\"\>\r\n<P align=left\><FONT size=4\><STRONG\>边框的基格式</STRONG\>：</FONT\></P\>\r\n<P align=left\><FONT size=4\><TABLE cellSpacing=边框宽度 width=\"网页宽度\" background=第一层边框图片网址><BR\><TBODY><BR\><TR><BR\><TD><BR\><TABLE cellSpacing=1 borderColorDark=#0d1737 cellPadding=边框宽度 width=\"网页宽度\" borderColorLight=#24387a background=第二层边框图片网址 border=1><BR\><TBODY><BR\><TR><BR\><TD><BR\><TABLE cellPadding=边框宽度 width=\"网页宽度\"background=第三层边框图片网址><BR\><TBODY><BR\><TR><BR\><TD><BR\><TABLE width=\"网页宽度\" background=背景图片网址 border=0></FONT\></P\></TD\></TR\></TABLE\>',
              blogTag:'',
              blogUrl:'blog/static/6954943720090794419847',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1231292698103,
              publishTime:1231292697954,
              permalink:'blog/static/6954943720090794419847',
              commentCount:2,
              mainCommentCount:2,
              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/6954943720090794419847">${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 - 订阅此博客

书山有路勤为径，学海无涯苦做舟。

导航

日志

【博客素材】边框的制作与应用

历史上的今天

最近读者

热度

评论

页脚

EEEEEE	FF00CC	FF66FF	FF00FF
DDDDDD	FFCCCC	FF66CC	FF00CC
CCCCCC	FFCC99	FF6699	FF0099
BBBBBB	FFCC66	FF6666	FF0066
AAAAAA	FFCC33	FF6633	FF0033
999999	FFCC00	FF6600	FF0000
888888	CCCCFF	CC66FF	CC00FF
777777	CCCCCC	CC66CC	CC00CC
666666	CCCC99	CC6699	CC0099
555555	CCCC66	CC6666	CC0066
444444	CCCC33	CC6633	CC0033
333333	CCCC00	CC6600	CC0000
222222	99CCFF	9966FF	9900FF
111111	99CCCC	9966CC	9900CC
000000	99CC99	996699	990099
FF0000	99CC66	996666	990066
EE0000	99CC33	996633	990033
DD0000	99CC00	996600	990000
CC0000	66CCFF	6666FF	6600FF
BB0000	66CCCC	6666CC	6600CC
AA0000	66CC99	666699	660099
990000	66CC66	666666	660066
880000	66CC33	666633	660033
770000	66CC00	666600	660000
660000	33CCFF	3366FF	3300FF
550000	33CCCC	3366CC	3300CC
440000	33CC99	336699	330099
330000	33CC66	336666	330066
220000	33CC33	336633	330033
110000	33CC00	336600	330000
FFFFFF	00CCFF	0066FF	0000FF
FFFFCC	00CCCC	0066CC	0000CC
FFFF99	00CC99	006699	000099
FFFF66	00CC66	006666	000066
FFFF33	00CC33	006633	000033
FFFF00	00CC00	006600	000000
CCFFFF	FF99FF	FF33FF	00FF00
CCFFCC	FF99CC	FF33CC	00EE00
CCFF99	FF9999	FF3399	00DD00
CCFF66	FF9966	FF3366	00CC00
CCFF33	FF9933	FF3333	00BB00
CCFF00	FF9900	FF3300	00AA00
99FFFF	CC99FF	CC33FF	990099
99FFCC	CC99CC	CC33CC	008800
99FF99	CC9999	CC3399	007700
99FF66	CC9966	CC3366	006600
99FF33	CC9933	CC3333	005500
99FF00	CC9900	CC3300	004400
66FFFF	9999FF	9933FF	003300
66FFCC	9999CC	9933CC	002200
66FF99	999999	993399	001100
66FF66	999966	993366	0000FF
66FF33	999933	993333	0000EE
66FF00	999900	993300	0000DD
33FFFF	6699FF	6633FF	0000CC
33FFCC	6699CC	6633CC	0000BB
33FF99	669999	663399	0000AA
33FF66	669966	663366	000099
33FF33	669933	663333	000088
33FF00	669900	663300	000077
00FFFF	3399FF	3333FF	000066
00FFCC	3399CC	3333CC	000055
00FF99	339999	333399	000044
00FF66	339966	333366	000033
00FF33	339933	333333	000022
00FF00	339900	333300	000011
0099FF	0033FF	0099CC	0033CC
009999	003399	009966	003366
009933	003333	009900	003300