梦中人の梦工场

这里有爱的细雨，这里有情的倾诉。这里帮你筑梦，帮你圆梦！

日志

关于我

梦中人

喜欢做梦,从小到大,始终不变,喜欢研究,海阔天空,天文地理,喜欢交友,不分老幼,不分男女。

文章分类

边框代码注解

2009-09-12 13:07:03| 分类：边框制作 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

边框代码注解 - 梦中人 - 梦中人の梦工场

边框代码注解

（资料来源：网络.作者腾飞）

边框其实就是一种表格。要制作边框或者要调节边框中的具体细节，首先要明确表格语法与表格代码的基本属性。

一、基本代码简介：

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

　　 <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配合构成单元格。

　　</TD></TR></TBODY></TABLE>：这些都是相应元素的终止符，表示相应元素所规范的内容结束。必须注意它们的排列顺序，不能有错。从表格的代码框架分析得出：表格标签里，所有元素都成对出现，而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大，它占在起始和终结的位置，tbody是老二，tr是老三，td最小，它在最里层。

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

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

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

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

　　 height：表格的高度，取值方法同width。提示：如果不是特别需要，建议不用设置表格的高度，系统会根据表格的内容自动设置高度。所谓特别的需要，是指一些特殊的情形下，需要表格的高度精确，比如，当我们通过表格的背景来发一张图片时，如果表格的高度不精确定义，图片就不可能完整或完美地显示。

　　 bgcolor：表格的背景色。取值方法举例：bgcolor=#ff0000或bgcolor=red。单元格td也可有此属性，如果设置了表格的背景色，又设置表格单元格的背景色，得出的效果将是值得试试的，这种情况主要用于多单元格的表格。

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

　　 bordercolor：表格的边框颜色，当border值不为0时设置此值有效。取值同bgcolor。

　　 bordercolorlight：亮边框颜色，当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。

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

　　 align：表格的对齐方式，值有left（左对齐，默认）、center（居中）以及right（右对齐）。align定义的是表格自身的位置，这是一个很有用的属性。

二、表格语法：

表格语法：

<table aling=left>...</table>表格位置,置左

<TABLE aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与网格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定网格线与网格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割窗口

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架.

三、其它参考：

<TABLE>	●	表格标记	设定该表格的各项参数
<CAPTION>	●	表格标题	做成一打通列以填入表格标题
<TR>	●	表格列	设定该表格的列
<TD>	●	表格栏	设定该表格的栏
<TH>	●	表格标头	相等于<TD>，但其内之字体会变粗
表单标记
<FORM>	●	表单标记	决定单一表单的运作模式
<TEXTAREA>	●	文字区块	提供文字方盒以输入较大量文字
<INPUT>	○	输入标记	决定输入形式
<SELECT>	●	选择标记	建立 pop-up 卷动清单
<OPTION>	○	选项	每一标记标示一个选项
图形标记
<IMG>	○	图形标记	用以插入图形及设定图形属性
连结标记
<A>	●	连结标记	加入连结
<BASE>	○	基准标记	可将相对 URL 转绝对及指定连结目标
框架标记
<FRAMESET>	●	框架设定	设定框架
<FRAME>	○	框窗设定	设定框窗
<IFRAME>	○	页内框架	于网页中间插入框架
<NOFRAMES>	●	不支援框架	设定当浏览器不支援框架时的提示

HTML最基本的代码认识

　　做音画代码帖首先我们先打破对代码的困惑，而我们最先接触的代码就是

　　<table><tr><td>必须成对出现，缺一不可，

　　table这一项是具体的工作场，如吧整个音画做为一出戏，那table就是戏中的舞台

　　要是吧整个音画做为一顿美餐。table就是桌子

　　tr是拓展工作区域的标识工具。

　　td就是舞台上的装饰品

例：代码<table bgcolor=#000066 width=300 height=200><tr><td></td></tr></table>

效果如下

这个代码中多了大家不认得的代码bgcolor。 bgcolor是设置舞台背景色的代码

　　</TD></TR></TABLE>这是结束代码

　　有多少个

　　<TABLE>

　　<TBODY>

　　<TR>

　　<TD>,就有多少个</TD></TR></TBODY></TABLE>而顺序也是刚好相反

再看一下另外一个贴代码为：

　　<TBODY>

　　<TR>

　　<TD align=middle><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。</FONT></TD></TR></TBODY></TABLE>

效果如下：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

上面这个贴的代码中多了文字代码

　　<TD align=middle>时文字得位置。当中。

　　align=cneter(居中，align:文字对齐方式的标识），还有一种是right(居右）left（居左），

　　<FONT color=#ff0000 size=6>时文字得属性。color=#ff0000 。字得色彩。可以用英文代替。size=6字体大小

　　</FONT></TD></TR></TBODY></TABLE>对应的收尾代码。

　　我们再看另外一个贴代码为

<TBODY>

<TR>

<TD align=middle><BR><MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT></P></MARQUEE></TD></TR></TBODY></TABLE>

上面这个舞台的代码。已经接近我们一般做帖的代码了。但文字代码多了一个属性：marouee

marouee是文字的移动代码。

scrollamount=3:文字滚动速度，数字越大速度越快

direction=UP: 文字滚动方向，它有四个参数：UP（向上），down(向下），left（向左），right(向右）

height:滚动文本框的高度，width: 滚动文本框的宽度，数值多少自已可以定，高度太小了，视觉会很窄，高度太了，字又很少，滚动一次和第二次的间隔会很长，宽度小了字不能完全显示

效果如下：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

我们上面所有的贴只是在一个舞台上展示。下面我们就来看看变动多一点的舞台看看。

代码为：

<MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT>

</td></tr> </TBODY></table></center><BR>

效果如下：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

上面这个代码中多了给音画定位的center（中间）代码。关键是多了这两个代码：border(设定边框宽度）bordercolor(设定边框颜色）。如果我们想让边框理漂亮一点，就要用到这个工具：cellspacing(设定内部细小格线的工具）看一下下面这个舞台设计：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

上面的边框代码为：

<MARQUEE scrollAmount=1 direction=up width=400 height=100><BR><P align=center><FONT color=#ff0000 size=6><STRONG>床前明月光，凝是地上霜。<BR>举头望明月，低头思故乡。 </STRONG></FONT>

</td></tr> </TBODY></table></center><BR>

这里我们设的cellspacing＝10，你做的时候可以任意更改，想设为多少都行，上面所有的代码我们都没有用到图片，而在我们做音画必不可少的就是图片，我们现在就看看怎样吧色彩代码变为图片代码。我们现在把bgcolor换成background。把色彩代码换成图片链接地址：http://img.blog.163.com/photo/ieJjc4eOJLshbzHI-4DRTg==/3739113590625184963.jpg看一下效果：

床前明月光，凝是地上霜。

举头望明月，低头思故乡。

浮雕效果边框：

日志标题1	日志标题2
日志标题3	日志标题4

浮雕效果边框代码：

</TBODY></TABLE>

带背景图片的浮雕效果边框：

日志标题1	日志标题2
日志标题3	日志标题4
日志标题5	日志标题6
日志标题7	日志标题8
日志标题9	日志标题10

带背景图片的浮雕效果代码：

<DIV align=center>
<TABLE style="WIDTH: 250px; HEIGHT: 138px" border=4 cellSpacing=3 borderColor=#608040 cellPadding=4 width=250 height=138>【表格属性控制代码部分】

<TBODY>
<TR>
<TD>
<TABLE style="WIDTH: 225px; HEIGHT: 118px" border=1 cellSpacing=5 borderColor=#00ff00 cellPadding=0 width=225 background=http://img6.bimg.126.net/photo/KYcT0I0PgYMPkT3NqRt9bA==/1450440554990766096.jpg align=center height=158>【表格背景控制代码部分（图片格式一般为jpg）】
<TBODY>
<TR borderColorLight=#2a404b align=middle borderColorDark=#eeeeee>
<TD width="50%"><A href="日志地址1" rel=nofollow target=_blank><FONT color=#800080 size=4 face=_GB2312>日志标题1</FONT></A></TD>
<TD><FONT face=_GB2312><A href="日志地址2" target=_blank><FONT color=#800080 size=4>日志标题2</FONT></A></FONT></TD></TR>

<TR borderColorLight=#2a404b align=middle borderColorDark=#eeeeee>
<TD width="50%"><A href="日志地址9" rel=nofollow target=_blank><FONT color=#800080 size=4 face=_GB2312>日志标题9</FONT></A></TD>
<TD><FONT face=_GB2312><A href="日志地址10" target=_blank><FONT color=#800080 size=4>日志标题10</FONT></A></FONT></TD></TR>

</TR></TBODY></TABLE>
<DIV> </DIV></TD></TR></TBODY></TABLE>
<CENTER></CENTER>
<DIV></DIV></DIV></FONT></TD></TR></TBODY></TABLE>
<CENTER></CENTER>
<DIV> </DIV></TD></TR></TBODY></TABLE></CENTER></DIV>
代码诠释：

一、表格设置关键：从上面的代码可以看出，表格的设置关键就是受黄颜色部分代码的控制，其属性值不同，得到的表格效果就不同，其属性解析如下：

【<TABLE border=4 cellSpacing=3 borderColor=#608040 cellPadding=4 width=316 bgColor=#a0c060 height=107>】

TABLE【表示创建表格】
border=4【设置围绕表格的边框的宽度】
cellspacing=3【设置表格格子之间空间的大小】
cellpadding=4【设置表格格子边框与其内部内容之间空间的大小】
width=316【设置表格的宽度（用绝对像素值或文档总宽度的百分比】
align= right 【设置表格格子的水平对齐（左中右）】
valign=top> 【设置表格格子的垂直对齐（上中下）】
colspan= 【设置一个表格格子应跨占的列数（缺省为1）】
rowspan=【设置一个表格格子应跨占的行数（缺省为1）】
nowrap= 【禁止表格格子内的内容自动断行回卷】
borderColor=#608040 【表格外边框颜色】
height=107【设置表格的高度（用绝对像素值或文档总宽度的百分比】

二、表格背景设置关键：是受粉红色部分代码的控制，就是在表格外边框和内部内容之间添加上面这组背景图片链接代码即可，静态与动态背景的区别只是在于背景图片格式上的差异。

点击查看："制作技巧与常用素材"

梦中人谢谢您欣赏

您在这里已经停留了

边框代码注解 - 梦中人 - 梦中人の梦工场

继续浏览请您点击：

评论这张

转发至微博

阅读(30803)| 评论(26)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_082070082085086068085083085095083084082064083084083071',
              blogTitle:'边框代码注解',
              blogAbstract:'   <P style=\"TEXT-INDENT: 2em;\"  \><IMG title=\"边框代码注解 - 梦中人  - 梦中人の梦工场\"  style=\"DISPLAY: block; WIDTH: 461px; HEIGHT: 9px; TEXT-ALIGN: center;\"   alt=\"边框代码注解 - 梦中人  - 梦中人の梦工场\"  src=\"http://icon.sie.net/image/homepage/line/line032.gif\"  width=\"485\" border=\"0\" \><IMG title=\"边框代码注解 - 梦中人  - 梦中人の梦工场\"  style=\"DISPLAY: block; TEXT-ALIGN: center;\"  alt=\"边框代码注解 - 梦中人  - 梦中人の梦工场\"  src=\"http://img.bimg.126.net/photo/4NlCweG7RIeK6kksrq3w1w==/3121276016744913907.jpg\"  border=\"0\" \><IMG title=\"边框代码注解 - 梦中人  - 梦中人の梦工场\"  style=\"DISPLAY: block; WIDTH: 461px; HEIGHT: 9px; TEXT-ALIGN: center;\"   alt=\"边框代码注解 - 梦中人  - 梦中人の梦工场\"  src=\"http://icon.sie.net/image/homepage/line/line032.gif\"  width=\"475\" border=\"0\" \> </P\>  <P style=\"TEXT-INDENT: 2em;\"  \> </P\>  ',
              blogTag:'',
              blogUrl:'blog/static/72337254200962784643522',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1345428887333,
              publishTime:1252732023742,
              permalink:'blog/static/72337254200962784643522',
              commentCount:26,
              mainCommentCount:12,
              recommendCount:2,
              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:true,
              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/72337254200962784643522">${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 - 订阅此博客

梦中人の梦工场

导航

日志

边框代码注解

历史上的今天

最近读者

热度

评论

页脚