北斗六星网

标题: 简单边框的代码 [打印本页]

作者: 繁花 时间: 2016-5-18 08:00
标题: 简单边框的代码
一、单层边框
下面给出的是一条边框线的代码格式：

引用:
<TABLE width=750 bordercolor=#6495ed bgcolor=#784784 border=2>
<TBODY>
<TR>
<TD>
在这里放入你编辑好的文章
</TD></TR></TBODY></TABLE>

参数说明：
width：边框的宽度

bordercolor：边框的颜色，#后就是颜色代码，由六位十六进制数组成。也可以用英文的颜色单词，如red代表红色、pink代表粉红。

bgcolor：边框内的背景颜色，这个是控制边框内部显示的颜色。颜色的使用同bordercolor。

border：边框的宽度或者叫厚度，单位为像素，当值为0时不显示边框，数值越大边框线越粗。

我们做边框就要用到了html语言中表的概念，表是成对出现的，即有开始必须有结束，好比数学中的括号一样，开始时用左括号，结束时用右括号，这才是一个完整的表达式，表也是一样的概念。

下面这段代码就是表的开始部分：
<TABLE width=750 bordercolor=#6495ed bgcolor=#f5feb8 border=2>
<TBODY>
<TR>
<TD>
每一行都不能少

下面这段代码是表的结束部分：
</TD></TR></TBODY></TABLE>
也是一样，不能缺少任何一个。
大家可以注意到，结束符有个特点是前面都有个斜杠 / ，而且表中先出现的命令<TABLE.....>，结束时是最后出现的</TABLE>，相反，后出现的<TD>，结束时是最先出现的</TD>。提醒大家，如只有表的开始部分，没有或缺少结束部分的部分代码，帖子就会严重变形错位，一定要注意这点。表的代码也是一层层嵌套的。

这里面的颜色啥的可以去百度颜色代码，自己换掉就行了。

作者: 繁花 时间: 2016-5-18 08:01
下面是两层边框线的代码：

引用:
<TABLE width=750 bordercolor=red border=3>
<TBODY>
<TR>
<TD>
<TABLE width=750 bordercolor=#6495ed bgcolor=#f5feb8 border=2>
<TBODY>
<TR>
<TD>
在这里放入你编辑好的文章
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

说明：
可以注意到，两层边框线就是由两个表嵌套起来的，首先出现的表是外层，后出现的表是内层，如还想要更多的边框线，就照此格式再加表。细心的人会注意到，两个表都有bgcolor，即为该表内填充颜色的参数，到底该显示哪一个呢，实际效果是这样的，内层的填充色会覆盖外层的填充色，表现出来的效果就是在内层与外层之间会有条颜色线，这条线的颜色就是外层的填充色。
你也可以只在外层表加bgcolor，内层表不加bgcolor。
外层表的bordercolor和bgcolor参数我用的是英文的颜色单词，这与使用颜色代码效果是一样的，选用哪种都可以。
大家可以做一下练习试试，就会有体会其中的效果。

作者: 繁花 时间: 2016-5-18 08:02
下面是在图上写文字的代码格式：
引用:
<TABLE width=750 borderColor=#6495ed background=http://www.ream.ais.ne.jp/~meme/b-panji.JPG border=5>
<TBODY>
<TR>
<TD>
这里放入你编辑好的文章
</TD></TR></TBODY></TABLE>

说明：
background：在它后面输入图片的地址。
在图上写文字同样可以嵌套多个表，形成多边框线条，如下面这段代码就是多边框线且在图上写字。

引用:
<TABLE width=750 borderColor=#6495ed background=http://www.ream.ais.ne.jp/~meme/b-panji.JPG border=5>
<TBODY>
<TR>
<TD>
<TABLE width=750 bordercolor=red border=3>
<TBODY>
<TR>
<TD>
<TABLE width=750 bordercolor=#6495ed border=2>
<TBODY>
<TR>
<TD>
在这里放入你编辑好的文章
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

这段代码的实际效果是，有三条边框线，内部是图片，文字是放在图片上的。

作者: 繁花 时间: 2016-5-18 08:03
点线边框：
代码
引用:<TABLE style="BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=green cellSpacing=1 cellPadding=0 width=385 align=center border=2>
<TBODY>
<TR>
<TD><BR><BR><BR><BR></TD></TR></TBODY></TABLE>

作者: 繁花 时间: 2016-5-18 08:03
双线边框：
代码
引用:
<TABLE style="BORDER-TOP-STYLE: double; BORDER-RIGHT-STYLE: double; BORDER-LEFT-STYLE: double; BORDER-BOTTOM-STYLE: double" borderColor=teal cellSpacing=2 cellPadding=0 width=385 align=left border=4>
<TBODY>
<TR>
<TD><BR><BR><BR><BR></TD></TR></TBODY></TABLE>

作者: 繁花 时间: 2016-5-18 08:04
这些边框可以套在一起用，形成多层边框
代码如下：
引用:
<TABLE style="BORDER-TOP-STYLE: double; BORDER-RIGHT-STYLE: double; BORDER-LEFT-STYLE: double; BORDER-BOTTOM-STYLE: double" borderColor=teal cellSpacing=2 cellPadding=0 width=385 align=left border=4>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-TOP-STYLE: dotted; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-BOTTOM-STYLE: dotted" borderColor=green cellSpacing=1 cellPadding=0 width=385 align=center border=2>
<TBODY>
<TR>
<TD>
<TABLE style="BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-BOTTOM-STYLE: dashed" borderColor=teal cellSpacing=0 cellPadding=0 width=385 align=center border=3>
<TBODY>
<TR>
<TD><BR><BR><BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

作者: 繁花 时间: 2016-5-18 08:04
图片边框的制作方法（边框套装）
以前所讲的都是改变表的颜色属性值来做边框，这种方法制作的边框不受条件所限，隐定性较好，显示快，但略显单调。现在我们更深入地学习一下利用网络上的素材图片做出漂亮的有花边的边框，这样就能做出漂亮华丽的边框了。

基本代码如下：
引用:
<TABLE borderColor=#ffff00 cellSpacing=10 cellPadding=8 background=http://www.downsmall.cn/uploadfile/article/uploadfile/200803/20080312072918659.gif border=0>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff00 cellSpacing=6 cellPadding=4 width="100%" background=http://www.downsmall.cn/uploadfile/article/uploadfile/200803/20080312073115965.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff00 height=500 cellSpacing=6 cellPadding=4 width="100%" background=http://www.art-box.tv/jisaku/wall/iruka1.gif border=1>
<TBODY>
<TR>
<TD>这里放入你编排好的图文内容 </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

作者: 繁花 时间: 2016-5-18 08:06
图片地址可以自己更换。
这个教程是很久以前拿来的别人的，谢谢原作者。

做起来还是很简单的，大家可以试试。

作者: 繁花 时间: 2016-5-18 08:09
买一送一

在帖子里加音乐
用html代码可以播放音乐，做为帖子的背景音乐。它可实现自动循环播放，可以显示播放器也可以隐藏，下面给出通用的播放器代码。

引用:
<EMBED src="音乐连接地址" width=300 height=40 type=audio/mpeg loop="true" autostart="true" panel="true">

说明：
src：它后面放入音乐的网络地址，要用双引号括起来。
width：播放器的宽度，单位像素。
height：播放器高度，单位像素。
loop：循环播放，true为循环播放，false为只播放一次，不循环。
autostart：自动播放，true为自动播放，false为手动播放。
panel：播放器面板，true为显示面板，false为隐藏面板。

以上是显示播放器的代码，如要隐藏播放器，修改width=0，height=0，panel="false"

作者: 我是来打酱油的 时间: 2016-5-18 08:10
太复杂。技术控。

作者: 繁花 时间: 2016-5-18 08:16

我是来打酱油的发表于 2016-5-18 08:10
太复杂。技术控。

复杂的让徒弟来，您就学个简单的，第一个单层边框就行了，就吧文字填到那个空地方就行了

作者: 咂摸 时间: 2016-5-18 10:48
哈哈，你居然还记得这个，我的都遗忘在空间里了，好几年了，想起那会儿真是能折腾啊！

作者: 大雅 时间: 2016-5-18 19:00
很实用，繁花辛苦了

作者: 蓝黛朵朵 时间: 2016-5-18 20:43
等我抽空也学学试试，好玩，香宝真挺牛

作者: 繁花 时间: 2016-5-19 16:44

咂摸发表于 2016-5-18 10:48
哈哈，你居然还记得这个，我的都遗忘在空间里了，好几年了，想起那会儿真是能折腾啊！

就保留了一、二现在想起来可惜死的啊

作者: 繁花 时间: 2016-5-19 16:44

大雅发表于 2016-5-18 19:00
很实用，繁花辛苦了

只是一点包装文字贴的。复制黏贴

作者: 繁花 时间: 2016-5-19 16:45

蓝黛朵朵发表于 2016-5-18 20:43
等我抽空也学学试试，好玩，香宝真挺牛

包装文字帖，可以，简单易学

作者: 一叶舟 时间: 2016-5-19 21:56
姐姐，好复杂呀

作者: 一叶舟 时间: 2016-5-19 21:56
发现你好厉害

作者: 一叶舟 时间: 2016-5-19 21:56
这个需要我好好滴消化才行呀

欢迎光临北斗六星网 (http://bdlxbbs.top/)