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

小青岛博客

山不在高、水不在深、有灵则行、

 
 
 

日志

 
 

【转载】记住这些常用代码,做边框就不愁啦  

2014-11-22 12:18:18|  分类: 博客教学 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
记住这些常用代码,做边框就不愁啦

表格常用属性

代 码

代码属性含义

 border=1  边框的边线宽度,数字越大边线越粗,为0表示没有边框。
 cellpacding=1  里框与外框之间的距离,数字越大之间的宽度越宽。
 cellpadding=1  里框内容与里框之间的距离,数字越大之间的宽度越宽。
 width=200  宽度代码,200表示像素,数字越大越宽。
 height=200  高度代码,200表示像素,数字越大越高。
 bgcolor=#ffffff  边框的背景颜色,ffffff表示背景颜色为白色。
 background=图片地址  边框的背景图片,=后面加图片地址。
 borderColor=#cccccc  边框的颜色,(当border值不为0时设置此值才显示)。
 align=center  边框居中代码,(不设此代码边框居左,=后加right为右对齐)。

   你如果会熟练运用这几个边框的常用属性,制作边框对你来说就不难了。只要
 点一下表格按钮,就会出现下面的边框基本代码,然后你再根据自己的需要添加上
 面的属性,使之边框符合你的心意。目前我们用到的边框基本上属于两大类型:一
 种是框套框类型,就是大框套小框的意思;另一种类型是框叠框类型,就是一个个
 框叠起来,再配上各种颜色或图片组成的。下面我说说具体的做法:

边框基本代码

<TABLE border=1 cellSpacing=1 cellPadding=1 align=center>
<TBODY>
<TR>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

   你如果只要一个简便的双线框,只要添加几个代码就成了:(兰色的代码)
 并将红色的数字改成你喜欢的宽度。

日志内容


双线带底色边框代码

<TABLE border=2 cellSpacing=5 borderColor=#ffffff cellPadding=0 width=800 bgColor=#000000 align=center height=300>
<TBODY>
<TR>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

   你如果你要做个框套框的边框,只要添加几组单个边框代码就成了:四层就添
 加三组(共四组代码),但是,收尾代码</TD></TR></TBODY></TABLE>需要放在最
 后,有几层就需要放几组收尾代码(白色代码)这是“框套框”与“框叠框”最大
 的区别。框边的宽度
数字可以改成你喜欢的宽度,边框颜色你可自己调。

日志内容


四层带底色彩色边框代码

<TABLE border=4 cellSpacing=0 borderColorLight=#5b00ae borderColorDark=#000000 cellPadding=1 width=800 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=4 cellSpacing=0 borderColorLight=#00e3e3 borderColorDark=#ff0000 cellPadding=1 width=790 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=4 cellSpacing=0 borderColorLight=#00a600 borderColorDark=#ffa500 cellPadding=1 width=780 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=4 cellSpacing=0 borderColorLight=#ffff00 borderColorDark=#ffffff cellPadding=1 width=770 bgColor=#fffacd align=center height=300>
<TBODY>
<TR>
<TD>
<P align=center><EM><STRONG><FONT color=#800000>日志内容</FONT></STRONG></EM></P>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

   你如果想要将图片做框边,只要添加背景图片代码就成。下面是三层图片组成
 边框外加一张底图的边框。添加图片后,底色就自动遮盖了。下面的紫色代码就是
 背景图片代码。同样道理,收尾代码</TD></TR></TBODY></TABLE>需要放在最后。

日志内容


四层带底色彩色边框代码

<TABLE border=0 cellSpacing=10 borderColor=#556b2f cellPadding=10 width=800 background=http://img0.ph.126.net/hHTJkYcFlRnw9WhcxVqxVQ==/669066019659093276.gif
bgColor=#ce0000 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=2 borderColor=#556b2f cellPadding=2 background=http://img2.ph.126.net/m0_lhnCCOTFPQ0XieQ7kQw==/154529762216905328.gif
bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=3 borderColor=#556b2f cellPadding=3 background=http://img0.ph.126.net/MBSuRkZkDMxOLvxd5e2Wow==/3375166445737619115.jpg
bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=0 borderColor=#556b2f cellPadding=0 width=750 background=http://img2.ph.126.net/X7OVeiCvoK0Ae28ndpsTdg==/846676729946411921.jpg
bgColor=#000000 align=center height=200>
<TBODY>
<TR>
<TD>
<P align=center><EM><STRONG><FONT color=#ffff00>日志内容</FONT></STRONG></EM></P>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

   下面我再说说怎么做框叠框的边框。其实最方便又好看的是框叠框边框,这种
 边框一般由三张图片组成,也有些是四张五张等图片的,多一张图片就多加一层代
 码就行了。与框套框的收尾代码不同的是,收尾代码</TD></TR></TBODY></TABLE>
 需要放在每一层代码的后面,但是作为底板的图片,一般是第二张,收尾代码需要
 放在内容的后面。举列说明:

记住这些常用代码,做边框就不愁啦 - 和尚 - 2014

 这是第一张图,也叫框头图,图片地址如下:http://img2.ph.126.net/SPd6fwGBTGcio9G3V5hdLA==/1887571193921807843.jpg

记住这些常用代码,做边框就不愁啦 - 和尚 - 2014

 这是第二张图,也叫底板图,图片地址如下:http://img0.ph.126.net/DmUzYAkyfXNNCeiAUiKL9Q==/3897865477589258313.gif

记住这些常用代码,做边框就不愁啦 - 和尚 - 2014

 这是第三张图,也叫框底图,图片地址如下:http://img2.ph.126.net/bQeGmdwlVDzh8FFEy0aNzQ==/1893200693456017982.jpg

 将三张图片拼起的的代码如下:

框叠框的基本代码

<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://img2.ph.126.net/SPd6fwGBTGcio9G3V5hdLA==/1887571193921807843.jpg bgColor=#ffffff align=center height=360>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://img0.ph.126.net/DmUzYAkyfXNNCeiAUiKL9Q==/3897865477589258313.gif bgColor=#ffffff align=center height=100>
<TBODY>
<TR>
<TD>在此可添加内容</TD></TR></TBODY></TABLE>
<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://img2.ph.126.net/bQeGmdwlVDzh8FFEy0aNzQ==/1893200693456017982.jpg bgColor=#ffffff align=center height=360>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE
>

 以上是基本代码,你还可以在图片中加点动态的点缀,要注意两点:1.红色的宽高
 数字要与其背景图片一致;2.点缀的动画宽高不能超过其背景的宽高;其代码如下:
 (深黄色)

框叠框加点缀后的基本代码

<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://img2.ph.126.net/SPd6fwGBTGcio9G3V5hdLA==/1887571193921807843.jpg bgColor=#ffffff align=center height=360>
<TBODY>
<TR>
<TD><EMBED height=300 type=application/x-shockwave-flash width=800 src=http://www.flash1890.com/swf/sucai/hudie/23.swf allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent"></TD></TR></TBODY></TABLE>
<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://img0.ph.126.net/DmUzYAkyfXNNCeiAUiKL9Q==/3897865477589258313.gif bgColor=#ffffff align=center height=100>
<TBODY>
<TR>
<TD>在此可添加内容</TD></TR></TBODY></TABLE>
<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://img2.ph.126.net/bQeGmdwlVDzh8FFEy0aNzQ==/1893200693456017982.jpg bgColor=#ffffff align=center height=360>
<TBODY>
<TR>
<TD><EMBED height=300 type=application/x-shockwave-flash width=860 src=http://www.flash1890.com/swf/sucai/hudie/23.swf wmode="transparent" invokeurls="false" quality="high" allowScriptAccess="never" allowNetworking="internal"></TD></TR></TBODY></TABLE
>

 完整边框如下:

在此可添加内容

记住这些常用代码,做边框就不愁啦 - 和尚 - 2014

和尚2014-10-25编辑

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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