您好!欢迎您光临雄鹰教您如何用代码制作边框_雄鹰翱翔! 聊天室 I 论坛 I 免费电影 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>教学版块>>>其他教材>>>雄鹰教您如何用代码制作边框
雄鹰教您如何用代码制作边框
发表日期:2013/7/20 17:51:00 出处:雄鹰 作者:雄鹰 发布人:yfxy20 已被访问 695

  

 

http://yfxy20.16789.net/

 

 

上面的边框就是用下面的代码制作的

 

<BR>
<TABLE id=table1 style="LEFT: -20px;【重点注意:这里的-20是指边框对网页左边的距离,这个数值在每个网站使用的时候是不一样的】; WIDTH: 1010px;【这里的1010就是代表边框的宽度】; POSITION: relative; TOP: 0px【这里的0代表的是边框对顶部的距离,如果没有特殊需要,最好设置为0】" cellSpacing=0>
<TBODY>

<TR> 【自前面的这个<TR>符号开始是每一层边框的开始代码】
<TD>
<TABLE style="BACKGROUND-IMAGE: url(
http://yfxy20.16789.net/s-helpSite/domName/yfxy20/2013720663745529.gif)>【()里面的网址是第一层图片的网址】; BORDER-TOP-STYLE: outset; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; BORDER-BOTTOM-STYLE: outset" borderColor=#06a525 cellSpacing=10 【这个10代表的是下层图片加上去以后左右两边留给上层图片可以让人看到的距离。
 cellPadding=10 【这个10代表的是下层图片加上去以后上下留给上层图片可以让人看到的距离。
 width="100%" align=center bgColor=#ffffff border=5>
<TBODY> 【到前面的这个<TBODY>符号为止是每一层边框的结束的代码】
<TR>  【这里是第二层图片了
<TD>
<TABLE style="BACKGROUND-IMAGE: url(
http://yfxy20.16789.net/s-helpSite/domName/yfxy20/201372068721970.jpg)" borderColor=#cccccc cellSpacing=10 cellPadding=10 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(
http://yfxy20.16789.net/s-helpSite/domName/yfxy20/2013720693212803.gif)" borderColor=#cccccc cellSpacing=40 cellPadding=40 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(
http://yfxy20.16789.net/s-helpSite/domName/yfxy20/20137206141537558.gif)" borderColor=#cccccc cellSpacing=10 cellPadding=10 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(
http://yfxy20.16789.net/s-helpSite/domName/yfxy20/201372068721970.jpg)" borderColor=#cccccc cellSpacing=20 cellPadding=20 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(
http://yfxy20.16789.net/s-helpSite/domName/yfxy20/2013720771376995.jpg)" borderColor=#cccccc cellSpacing=5 cellPadding=5 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD>
<TABLE style="BACKGROUND-IMAGE: url(
http://yfxy20.16789.net/s-helpSite/domName/yfxy20/20137206564210284.gif)" borderColor=#cccccc cellSpacing=10 cellPadding=10 width="100%" align=center bgColor=#ffffff border=1>
<TBODY>
<P><FONT size=6></FONT>&nbsp;</P>
<P><FONT size=6>&nbsp;&nbsp;</FONT></P>
<P><FONT size=6></FONT>&nbsp;</P>
<P><FONT size=6>&nbsp; </FONT></P>
<P>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </P>
<P align=center>&nbsp;&nbsp;&nbsp;</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P><FONT style="BACKGROUND-COLOR: yellow" color=red></FONT>&nbsp;</P></TD></TR></TBODY></TABLE>&nbsp; </TD>
<P></P></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
<P></P></TD></TR></TBODY></TABLE>
<P></P>
<P>&nbsp;</P>

有几个基本代码和数据必须交代给大家。

  1、WIDTH: 1000px 是边框整体外延的宽度,1000像素是宽屏页面的宽度。小于这个数边框就会在页面的两边留出空隙,大于这个数就会突破正常页面,变成特宽幅边框。

  2、TOP: 0px 是边框上延与页面顶部的距离,除非有特殊需要,一般取0,否则边框顶部与页面会出现空隙,不美观。

  3、cellPadding=0 是第一层边框与第二层边框的距离,数字越大,边框最外层的宽度就越大,一般根据需要调整。  第一层图片地址的代码就是第一层边框图片的代码。从第二层到其他层的边框代码都是一样的,只是图片代码不同而已。从<TBODY>到下一个<TBODY>之间就是一层边框的代码。

  4、cellSpacing=45  的代码,这是确定每一层边框宽度的代码,等号后面的数字就是这一层边框的宽度。可以根据需要随意调整。

    5、LEFT: 0px 是边框与页面边界的距离,0即为与左边界重合,取负数边框就会突破页面左边界,取正数则边框右边就会突破页面右边界。

     6、align=center 表示的是居中。

    7、TABLE style="BACKGROUND-IMAGE: url()表示在此处插入图片的绝对地址。

    8、border=0 表示的是边框的外装饰效果。

下面我们着手对这个边框进行“改装”

    首先复制上面的代码粘贴到发表文章编辑器里面。并将我们事先上传好的图片地址准备好代用

    方法是:

    1、你们可以用你们自己上传的图片地址替换原边框的第一层图片地址的代码

    2、用第(二)号图片替换第二层、后面依次类推。

    3、如果要增加层数,将如下代码复制
<TR><TD><TABLE style="BACKGROUND-IMAGE: url(http://yfxy20.16789.net/s-helpSite/domName/yfxy20/20137206141537558.gif)" borderColor=#cccccc cellSpacing=10 cellPadding=10 width="100%" align=center bgColor=#ffffff border=0>
<TBODY>)复制粘贴到代码里面修改图片网址就可以了

    新边框是做出来了,但仔细一瞧,这个新边框仍然是不尽如人意。问题在哪里呢?

    第五步:  "照猫画虎”完了之后,我们要对这个新边框进行再一次的修饰。那就是:调整各层之间的距离。

    朋友们仔细观察可以在每一层边框代码中都有cellSpacing=    的代码,这是确定每一层边框宽度的代码,等号后面的数字就是这一层边框的宽度。可以根据需要随意调整。

    第六步:我们把第最后一层边框结尾处的border=0改为border=1。

    到这里,新边框就等于基本完成了,最后就是在边框内的增加相关的内容发表就可以了

    您对这个新边框还满意吗?您可以根据这些步骤“照猫画虎”地练习,熟练后就可以运用自如了!

最后完成的边框效果如上面的边框

 

注意事项:

  1、边框素材选择色彩要相近,(最好是同一色像的),反差太大反而不好看。但也不能完全没有色差,那样会显得单调呆板。

   2、最里层的图案最好使用单色或略有变化的图案,因为这里要粘贴文字和图片。

   3、每一段代码之间都留有一个字母的间隙,要留够,否则这一层图案就不显示。

   4、制作边框用的图片素材必须是jpg或gif格式的,否则不能使用(就是每张图片地址代码的后缀)。

    注意:复制上面现成边框代码的时候,一定要将红色部分【XXXXXX】全部删除,我上面主要是告诉你【XXXXXX】前面代码的作用。

下面是添加网页音乐隐藏式播放器的代码:

  <P align=center><embed src=加入音乐地址 autostart=true loop=true hidden=true type=audio/mpeg></EMBED></P>

注意:红色部分的《加入音乐地址》几个字一定要删除,更换为有效的音乐网址,这部分代码,可以放到代码的最下面。

 

双击自动滚屏 【打印本页】 【关闭窗口

上篇文章:活灵活现的鱼儿

下篇文章:央视春晚大全[1983-2012年]

 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

雄鹰翱翔(二站) | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:392676988 联系人:雄鹰 Email:huanggege999@163.com

琼icp备09005167