梦中人の梦工场

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

日志

关于我

梦中人

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

文章分类

十分钟学会做边框

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

下载LOFTER 我的照片书 |

梦中人祝朋友们浏览开心！

十分钟学会做边框（引自Q仔博客）

一、边框表格的基本语法

梦中人注：边框的制作方法,一般分为二种:

1):不用图片直接制作音画、日志的边框;

2):用图片的方法,来制作更加漂亮的日志及音画边框.

用(静态)图片制作边框的方法 - 寒冬腊月 - .

通常情况下,大多数博友均采用第二种方法.特点是美观、漂亮.但制作过程相对复杂一些.今天,本人特地抽出时间赶写了这方面的资料供大家叁考.并借此回复各位博友的留言......

表格边框效果

不用图片代码如下<table width="200" height="120" border="5" cellspacing="5" cellpadding="5" align="center" valign="middle" bgcolor="#f0ffff" bordercolor=#00ff00><tr><td>文字</td></tr></table>

基本语法释义

在上面框内这段代码里的<table.........><tr><td>文字<*/td><*/tr><*/table>就组成边框表格的基本语法:开始标签,内容,结束标签.这三个标记<table><tr><td>是定义表格的最重要的标记，可以说学懂这三个就足己制作一个边框表格了.

先看懂这个代码:

table:这是一个做表格的元素,要描述内容的属性都写在由它组成的开始标签里.

tr:描述列的元素,列就是从上到下的行.

td:描述格的元素,格就是每行里的格(大概意思).

table的属性常用的有:

width= 表格宽度，接受绝对值（如180）及相对值（如 80%,相对可显示的宽度）

height= 表格高度，接受绝对值（如 180）

border= 表格框的厚度.

cellspacing= 表格格线离边框距离

cellpadding= 文字图片离格线的距离.

align= 表格的摆放位置（水平），可选值为： left, right,center(左，右，中心)

valign= 表格内字画等的摆放贴位置（垂直）可选值为： top, middle, bottom。(顶，中间，底部 ) background= 表格的背景图，与 bgcolor 不要同用。 bgcolor= 表格背景颜色，与background 不要同用. bordercolor= 表格边框颜色. bordercolorlight= 表格边框向光部分的颜色. bordercolordark= 表格边框背光部分的颜色,(使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效)

二、边框的制作

1.颜色框: 简单地只要写上表格边框颜色属性 bordercolor 和边框的厚度属性 border,再写上表格的宽 width 和高 height 就会显示一个你所指定的颜色框.

颜色框效果

不用图片做边框代码如下<table bordercolor=#00ff00 border=5 align=center width=200 height=120 cellspacing=0><tr><td>文字</td></tr></table>

这里多写了一个格线属性cellspacing=0,格线就是上面第一个边框里的那根细线(打表格用的)，不写格线属性浏览器就默认为1.我们不需要格线时,请一定写上cellspacing=0,这个默认有时会捣乱的. 右边是不写的效果:

cellspacing=0不写的效果

框定好宽和高以后,如果放在里面的内容大于它,则按大的显示.例如还是上面那个尺寸的框,放进一张大的图片

:

用图片的代码如下<table align=center bordercolor=#00ff00 border=5 width=200 height=120 cellspacing=0><tr><td><img src=图片地址 width=200></td></tr></table>

以上的效果提示我们要注意两点:

1）有时按需要定好框的尺寸,不容许再变的,那就要注意放进去的内容不能大于框的尺寸,以免撑大.

2）因为放进去的内容会撑大框,有时干脆不写表格的尺寸,让内容自动撑大反而会服贴.

三、素材框

利用素材图片做框的原理是:把素材图片做成各种背景图,再把背景图一张张覆盖上去,每后一张都比前一张小一点,这些边上露出来的小一点就组成了一个框的效果. 边框要做多少层就要做多少个背景图,要做成多少个背景图也就是要做多少个表格.每后一个表格都要放到前一个表格里. 要使每后一张都比前一张小一点的方法:只要在前一张代码里设定格线厚度cellspacing=就行了,设定多大就露多大.(我们经常看到的漂亮边框就是这样做出来的）

素材边框效果

多层图片的边框代码如下<table align="center" border="0" cellpadding="0" cellspacing="10" width="90%" background="第一层背景图片地址"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="5" width="100%" background="第二层背景图片地址"><tr><td bgcolor=#000000>文字</td></tr></table></td></tr></table>

在框内添加一张图片效果如下：

代码如下<TABLE cellSpacing=10 cellPadding=0 align=center background=第一层背景图片地址 border=0> <TBODY><TR><TD> <TABLE cellSpacing=5 cellPadding=0 width="100%" align=center background=第二层背景图片地址 border=0> <TBODY><TR><TD> <IMG src=框内的图片地址 width=250 twffan="done"></TD></TR></TBODY>

</TABLE></TD></TR></TBODY></TABLE>

看懂这些代码的意思了吗？其实最重要的还是应该做到前面有几个开始标签，结束就必须有收尾标签。音画帖往往做框用很多表格,里面又大框套小框的用很多表格,由于疏忽经常会出现少写或多写收尾。使得整个帖变形. 正常来说：做了几个表格,就必须有几组收尾标签,多一个少一个都不行.（即：多少<td><tr><table>对应多少</td></tr></table>）。（网易博客具有默认兼容）

四、图和文字放进框里的方法及注意点

代码格式：<table ......><tr><td>内容</td></tr></table>

将图和文字的代码从上到下按顺序代替上面的"内容"放到表格里. 代码安放的一些注意点:

1.竖向处理:,首先,表格属性里不写高 height ,这样可让内容自动撑高. 凡是要空行的地方可用换行标签<br>来设定,不够可以多加几个<*br>,到满意为止, 也可用分段标签<P>......</P>,不够再加<br>

2.横向处理:首先,在最后一层表格里写上文字图片离格线的距离属性: cellpadding= .不让内容靠边. 再强调一遍,放进去的所有内容的宽度不要大于框的内宽,为了美观还要它们小一点. 图片宽度好设定,文字一般也用<br>分行的方法来限定它的宽度。

3.内容居中:将位置属性align=center放到最后一层表格的<td>标签里,框里的内容就会都居中了，代码格式：<table ......><tr><td align=center>内容</td></tr></table>

五、如何隐藏表格的四个边框

表格边框的显示与隐藏，是可以用frame参数来控制的。请注意它只控制表格的边框图，而不影晌单元格。

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示左、右边框 <table frame=vsides>

只显示上、下边框 <table frame=hsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

Q仔*网易博客声明：转载本站内容请遵循“署名·非商业用途·保持一致”的创作共用协议。正常引用··拒绝盗版··所有内容不得删除篡改（包括本站所有链接）··祝您阅览愉快！

梦中人欢迎您欣赏

评论这张

转发至微博

阅读(1263)| 评论(19)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_083064085095089064085087094095083084082064083084083071',
              blogTitle:'十分钟学会做边框',
              blogAbstract:'<STRONG\><FONT face=\"黑体\" size=\"7\" \>  <P align=\"left\" \>  <MARQUEE style=\"FONT-SIZE: 11pt; WIDTH: 780px; COLOR: #66ff66; LINE-HEIGHT: 45pt; HEIGHT: 98px; TEXT-ALIGN: center; padding-center: 10em;\"  scrollAmount=\"2\" scrollDelay=\"40\" loop=\"infinite\" height=\"98\" \>  <DIV align=\"left\" \><FONT face=\"黑体\" size=\"7\" \><B\>    梦中人祝朋友们浏览开心！</B\></FONT\></DIV\></MARQUEE\></P\></FONT\></STRONG\>  <P style=\"TEXT-INDENT: 2em;\"  \><FONT size=\"6\" \>十分钟学会做边框（引自Q仔博客）</FONT\></P\>  <P style=\"TEXT-INDENT: 2em;\"  \></P\>  <P style=\"TEXT-INDENT: 2em;\"  \>  </P\>',
              blogTag:'',
              blogUrl:'blog/static/72337254200911375321671',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1347334987073,
              publishTime:1259844938915,
              permalink:'blog/static/72337254200911375321671',
              commentCount:19,
              mainCommentCount:7,
              recommendCount:1,
              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/72337254200911375321671">${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 - 订阅此博客

梦中人の梦工场

导航

日志

十分钟学会做边框

历史上的今天

最近读者

热度

评论

页脚