当前位置:首页 >> 实用素材 >> 边框素材 >> 做边框的基本代码
    
  双击自动滚屏  



做边框的基本代码

发表日期:2018年9月18日  出处:转  作者:散人  本页面已被访问 4958 次









 

  
 

做边框的基本代码

表格常用属性

代 码

代码属性含义

 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> </TD></TR></TBODY></TABLE>

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

日志内容


双线带底色边框代码


<TABLE border=2 cellSpacing=5 borderColor=#ffffff cellPadding=0 width=800

bgColor=#000000 align=center height=300>
<TBODY>
<TR>
<TD> </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>需要放在最后。

吉林市人民广场是北山公园的配套工程,她位于吉林市北山公园东南角。和北山公园一起组成美丽壮观的吉林市北山风景区。

2010年春,吉林市投资4.6亿元对这里进行了改造建设。历经四个月的紧张施工,建成了这个具有休闲、旅游、景观等多功能的大型广场。

她东至吉林市越山路,南至吉林市德胜路。西北与北山公园的正门广场及北山公园的卧波东湖相连。西北与沈吉铁路,东北与吉林市致和门公铁立交桥毗邻。

该广场占地26.23万平方米,建成于2010年秋。之前,这里曾是吉林市北山体育场、吉林女子中专(原址最早是吉林市九中,后来是吉林市一中,最后才是吉林市女中)、一些商铺和居民住宅楼及平房。


四层带底色彩色边框代码


<TABLE border=0 cellSpacing=10 borderColor=#556b2f cellPadding=10 width=800 background=http://img4.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027193755856644.gif
bgColor=#ce0000 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=2 borderColor=#556b2f cellPadding=2 background=http://img2.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027193755897141.gif
bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=3 borderColor=#556b2f cellPadding=3 background=http://img1.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027193755925020.jpg
bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=0 borderColor=#556b2f cellPadding=0 width=750 background=http://img1.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027193756003460.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>
需要放在每一层代码的后面,但是作为底板的图片,

一般是第二张,收尾代码需要放在内容的后面。举列说明:

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

(这是第一张图,也叫框头图,图片地址如下:http://img3.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244392113.jpg

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

(这是第二张图,也叫底板图,图片地址如下:http://img3.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244546215.gif

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

 (这是第三张图,也叫框底图,图片地址如下:http://img2.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244587547.jpg

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

框叠框的基本代码


<TABLE border=0 borderColor=#cccccc cellPadding=0 width=880 background=http://img3.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244392113.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://img3.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244546215.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.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244587547.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://img3.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244392113.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://img3.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244546215.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.oldkids.cn/upload/260790000/u260787417/2014/10/27/blog_20141027191244587547.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>

完整边框如下:

 

在此可添加内容




  双击自动滚屏  
  相关评论:    

 没有相关评论

  发表评论:    

用 户 名:
电子邮件:
评论内容:
(最多评论字数:500)

心缘之梦 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 |

联系人:“心缘之梦”微信群yueyuanzhongqiu20080815