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

洞庭风帆

 
 
 

日志

 
 
关于我

从军校到部队,造就了军人的性格,从工厂到机关,完善了人生的历练。 岁月如歌,人生磋砣。“长风破浪会有时, 直挂云帆济沧海”!

网易考拉推荐

引用 用HTML代码制作边框过程(初学者请进)  

2010-02-10 14:51:07|  分类: 博海拾贝 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

 

引用

亮剑用HTML代码制作边框过程(初学者请进)

用HTML代码制作边框过程(初学者请进) - 亮剑 - ★亮剑★博客★欢迎您光临!

[分享]用HTML代码制作边框过程(初学者请进)

第一步:打开个发主题帖子编辑栏,点插入表格不用设置(默认设置确定即可)如下:

第二步:转换为HTML模式,边框变为代码如下:

<TABLE borderColor=#cccccc cellSpacing=2 cellPadding=3 width="100%" bgColor=#ffffff border=1>

<TBODY>

<TR>

<TD>&nbsp;</TD></TR></TBODY></TABLE>

第三步:然后把代码稍微修改一下

把其中的bgColor=#ffffff(红色)去掉,换上background= 图片地址,把border=1(绿色)改为border=0 ,cellSpacing=2 (蓝色)把2修改得大一点,比如20 ,数越大,边框越宽。

这是第一层,转换为DESIGN模式,看一下效果如下:(我加的图片地址为:http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg)

下面是第一层的全代码:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>

<TBODY>

<TR>

<TD>&nbsp;</TD></TR></TBODY></TABLE>

一层效果还不好,我们接着做第二层:

第一步:把第一层的上半部分复制<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>

<TBODY>

<TR>

<TD>

第二步:稍作修改,cellSpacing=20 把原来的20改为了1,再把图片地址就改一下就好了

改好后代码如下:(我用的图片地址是:http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg)

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>

<TBODY>

<TR>

<TD>

前两层的全代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>

<TBODY>

<TR>

<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>

<TBODY>

<TR>

<TD>

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

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

为了看清楚效果我加了文字

 

同样的方法做第三层:

修改好的第三层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

前三层全代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

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

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

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

放心去飞

 

同样的方法做第四层:

修改好的第四层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前四层全代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

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

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

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

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

放心去飞

 

同样的方法做第五层:

修改好的第五层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

前五层全代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

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

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

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

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

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

放心去飞

 

同样的方法做第六层:

修改好的第六层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前六层全代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

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

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

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

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

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

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

放心去飞

 

同样的方法做第七层:

修改好的第七层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065172192889288.gif border=0>
<TBODY>
<TR>
<TD>

前七层全代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065172192889288.gif border=0>
<TBODY>
<TR>
<TD>

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

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

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

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

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

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

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

放心去飞

 

同样的方法做第八层:

修改好的第八层的代码如下:

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

前八层全代码如下:

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171465936112.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065171384656555.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517282860170.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=20 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/20065172192889288.gif border=0>
<TBODY>
<TR>
<TD>

<TABLE borderColor=#cccccc cellSpacing=1 cellPadding=3 width="100%" background=http://www.xax.net.cn/UploadFile/2006-5/2006517195134444.jpg border=0>
<TBODY>
<TR>
<TD>

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

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

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

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

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

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

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

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

放心去飞

 

做了八层基本上好看了吧!如果你觉得不够还可以再继续...

要注意的是每一层都要有</TD></TR></TBODY></TABLE> 来对应,

如上我做了八层就要有八个来对应,多一个少一个都发不出来的,一定要注意哦! 最好发表前检查一遍.

做好边框大家可以在边框里加你喜欢的图片和文字了. 

★这里是我的家园,希望成为您的乐园!素材来源于网络,亮剑收集整理并感谢《原创者》!★

2009年7月23日 - 亮剑 - ★亮剑★博客★   ★ 引用日志的方法

  1. 进入日志浏览页面→ 2. 点击日志右下角“引用”→ 3. 点左下角引用此篇日志到
      我的博客→
4.出现日志编辑页面 → 5.点发表日志即可。
 

用HTML代码制作边框过程(初学者请进) - 亮剑 - ★亮剑★博客★欢迎您光临!

博客代码汇总实用教程汇总方法技巧汇总电脑知识汇总影视欣赏汇总

名曲欣赏汇总幽默笑话汇总心情图文汇总博客游戏汇总情感杂谈汇总

美图欣赏汇总博客音画汇总散文朗诵汇总博客页面设置边框系列汇总

卷轴音画汇总健康天地汇总特效素材汇总综合素材集锦博客动画汇总

用HTML代码制作边框过程(初学者请进) - 亮剑 - ★亮剑★博客★欢迎您光临!

用HTML代码制作边框过程(初学者请进) - 亮剑 - ★亮剑★博客★欢迎您光临! 用HTML代码制作边框过程(初学者请进) - 亮剑 - ★亮剑★博客★欢迎您光临! 用HTML代码制作边框过程(初学者请进) - 亮剑 - ★亮剑★博客★欢迎您光临!  

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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