查看: 3245|回复: 28

用颜色代码做边框

[复制链接]

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
发表于 2015-7-4 15:07:36 | 显示全部楼层 |阅读模式





用颜色代码做边框

 

 、做颜色边框的代码

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridgeBACKGROUND-COLOR: #ff0000cellSpacing=0>
<TBODY>
<TR>
<TD>

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

说明:红色代码是右边框;绿色代码是上边框;深蓝色代码是左边框;桃红色代码是下边框;天蓝色代码是边框内面背景颜色;

紫色代码cellSpacing=0是限制内边框与外边框距离的,“0”表示没有距离,是可以改变的。(这段代码里没有内边框代码)

#号后面的00ff00是颜色代码,可以变换,要改变边框颜色就要将四边#号后的代码变为同一个代码,否则,四边的颜色就会不同,

颜色代码可以在颜色代码表里找,注意用小写;10PX是表示外边框的宽度,数值可以改变

 效果:

此框代码

此框代码

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #ff0000" cellSpacing=0>
<TBODY>
<TR>
<TD>

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

  外框和背景换色

此框代码

 此框代码

<TABLE style="BORDER-RIGHT: #ae00ae 10px ridge; BORDER-TOP: #ae00ae 10px ridge; BORDER-LEFT: #ae00ae 10px ridge; BORDER-BOTTOM: #ae00ae 10px ridge; BACKGROUND-COLOR: #844200" cellSpacing=0>
<TBODY>
<TR>
<TD>
<>&nbsp;</P></TD></TR></TBODY></TABLE>

 外框加粗、换色

  此框 代码

  此框 代码

<TABLE style="BORDER-RIGHT: #9d9d9d 20px ridge; BORDER-TOP: #9d9d9d 20px ridge; BORDER-LEFT: #9d9d9d 20px ridge; BORDER-BOTTOM: #9d9d9d 20px ridge; BACKGROUND-COLOR: #750000" cellSpacing=0>
<TBODY>
<TR>
<TD>
<>&nbsp;</P></TD></TR></TBODY></TABLE>

 

二、边框里添加内边框

1、添加白框代码:

<TABLE border=1>
<TBODY>
<TR>
<TD>

说明:

A、“=”号后的“1”可以变为“2”或“3”.......,不可改得太大,因为这是限制内边框宽度的,太宽了就不好看了;

B、做几个内边框,就将这段代码放开头那段代码的<TD>后,(即“文字”前)并复制粘贴几次。

效果、代码

此框代码

 (加一个内框代码)

此框代码

(加一个内框代码)

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge;

BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #ff0000" cellSpacing=5>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD>&nbsp;</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TR>

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

此框代码

(加3个内框代码)

此框代码

(加3个内框代码)

<TABLE style="BORDER-RIGHT: #7c3d76 10px ridge; BORDER-TOP: #7c3d76 10px ridge;

BORDER-LEFT:

#7c3d76 10px ridge; BORDER-BOTTOM: #7c3d76 10px ridge; BACKGROUND-COLOR: #d3a4ff"

cellSpacing=3>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY>

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

 

3. 添加其他颜色框代码:
<TABLE border=3>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff99 height=3 cellSpacing=1 cellPadding=1 width=800 align=center bgColor=#000000

border=3>
<TBODY>
<TR>
<TD>
说明:就将这段代码放开头那段代码的<TD>后,更换颜色代码,可得不同颜色内框和背景颜色。

此框代码

此框代码

<></P><FONT size=2></FONT>
<TABLE style="BORDER-RIGHT: #ff0000 10px ridge; BORDER-TOP: #ff0000 10px ridge; BORDER-LEFT: #ff0000 10px ridge; BORDER-BOTTOM: #ff0000 10px ridge; BACKGROUND-COLOR: #ffcc33" cellSpacing=5 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=3>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff99 height=3 cellSpacing=1 cellPadding=1 width=800 align=center bgColor=#000000 border=3>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

4、添加一条细颜色框代码:

<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10 width=800 align=center bgColor=#000000

border=1>
<TBODY>
<TR>
<TD>

说明:就将这段代码放开头那段代码的<TD>后,更换TABLE borderColor=#00ff00 颜色代码,得到不同颜色细框。

此框代码

此框代码

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #460046" cellSpacing=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10 width=800 align=center bgColor=#460046 border=1>
<TBODY>
<TR>
<TD><BR><BR><BR><BR>6<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

5、添加细框代码:

<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10 width=800

align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>

说明:就将这段代码放开头那段代码的<TD>后,一次添加粘贴几次,更换颜色代码,

得到几层不同颜色细框。



以上边框代码有的来源于网络,有的为网络代码组合而成,试一试更换颜色代码和代码中数据,

你会有所发现!! !

 

此框代码

代码:

代码

<TABLE style="BORDER-BOTTOM: rgb(255,220,116) 12px ridge; BORDER-LEFT: rgb(255,220,116) 12px ridge; BORDER-TOP: rgb(255,220,116) 12px ridge; BORDER-RIGHT: rgb(255,220,116) 12px ridge" title=鳕鲱鮩鲒编辑 border=5 cellSpacing=10 borderColor=#ffdc74 cellPadding=12 width=720 bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
<DIV align=center>&nbsp;</DIV></TD></TR></TBODY>
<></P>
<></P></TABLE>

 

 

  

用颜色制作边框

 

代码:

代码
<TD><FONT color=#339966 size=1 face=宋体><STRONG> 
<TABLE style="BORDER-BOTTOM: #336666 12px ridge; BORDER-LEFT: #336666 12px ridge; WIDTH: 826px; HEIGHT: 105px; BORDER-TOP: #336666 12px ridge; BORDER-RIGHT: #336666 12px ridge" title=鳕鲱鮩鲒编辑 border=5 cellSpacing=10 borderColor=#336666 cellPadding=12 width=826 bgColor=#000000 align=center>
<TBODY>
<TBODY>
<TR>
<TD></TD></TR></TBODY><BR></TABLE></STRONG></FONT>

 

 

 

用颜色制作边框

代码代码:

用颜色制作边框代码

<TABLE border=50 cellSpacing=5 borderColor=#00ffdd cellPadding=8 width="100%" bgColor=#aaaadd align=center>
<TBODY>
<TR>
<TD>
<TABLE border=1 cellSpacing=5 borderColor=#aa99bb cellPadding=8 width="100%" bgColor=#000000 align=center>
<TBODY>
<TR>
<TD>
< dir=ltr><FONT color=#ff6633 size=4><STRONG>此处添加内容</STRONG></FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


 

 

立 体 边 框 代 码

 

立 体 边 框 代 码

<table style="border:19px #ccffcc ridge" align="center" border="0" cellpadding="0" cellspacing="0" width="460" background="http://bbs.eyu.cn/attachments/ext_jpg/029_mS674YcNXDnk.jpg">
<tr><td><br><br><br><br><br><br></td></tr></table>

 


蓝边框

l蓝色边框代码

代码:
<TABLE id=blogContentTable cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD vAlign=top><BR>
< style="TEXT-INDENT: 2em">
<TABLE style="WIDTH: 877px; HEIGHT: 427px" border=0 cellSpacing=11 borderColor=#f0ffff cellPadding=11 width=877 bgColor=#000033 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=5 cellSpacing=3 borderColor=#f0ffff cellPadding=3 width="100%" bgColor=#000033>
<TBODY>
<TR>
<TD>
<TABLE border=0 cellSpacing=11 borderColor=#f0ffff cellPadding=11 width="100%" bgColor=#000033>
<TBODY>
<TR>
<TD>
<TABLE border=1 cellSpacing=0 borderColor=#6600ff cellPadding=0 width="100%" bgColor=#000033>
<TBODY>
<TR>
<TD>
<TABLE border=10 cellSpacing=0 borderColor=#f0ffff cellPadding=0 width="100%" bgColor=#000033>
<TBODY>
<TR>
<TD>
<TABLE border=1 cellSpacing=0 borderColor=#6600ff cellPadding=0 width="100%" bgColor=#000033>
<TBODY>
<TR>
<TD>
< style="TEXT-INDENT: 2em"></P><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE>


 













本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入叮咚

x

评分

参与人数 6威望 +42 金币 +25 收起 理由
闲飞闲宿 + 8 + 4 很强大的指导帖
流云听涛 + 8 + 4 jiaoxuetie
才上路 + 8 + 4 回头一定再来刻苦钻研
清风扬 + 5 + 5 必须手写 赞!!
船夫 + 5 + 4 很给力!
瑶瑶 + 8 + 4 孩子辛苦了

查看全部评分

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 15:07:37 | 显示全部楼层

此框代码

(加3个内框代码)

<TABLE style="BORDER-RIGHT: #7c3d76 10px ridge; BORDER-TOP: #7c3d76 10px ridge;

BORDER-LEFT:

#7c3d76 10px ridge; BORDER-BOTTOM: #7c3d76 10px ridge; BACKGROUND-COLOR: #d3a4ff"

cellSpacing=3>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD>
<TABLE border=1>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY>

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

评分

参与人数 1威望 +8 金币 +4 收起 理由
嘿一颗菜 + 8 + 4 很给力!

查看全部评分

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 15:07:38 | 显示全部楼层

此框代码

<></P><FONT size=2></FONT>
<TABLE style="BORDER-RIGHT: #ff0000 10px ridge; BORDER-TOP: #ff0000 10px ridge; BORDER-LEFT: #ff0000 10px ridge; BORDER-BOTTOM: #ff0000 10px ridge; BACKGROUND-COLOR: #ffcc33" cellSpacing=5 align=center>
<TBODY>
<TR>
<TD>
<TABLE border=3>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff99 height=3 cellSpacing=1 cellPadding=1 width=800 align=center bgColor=#000000 border=3>
<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 15:07:39 | 显示全部楼层

 此框代码

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00

10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00

10px ridge; BACKGROUND-COLOR: #000000" cellSpacing=5>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10

width=800 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ff0000 height=3 cellSpacing=10 cellPadding=10

width=800 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffd306 height=3 cellSpacing=10 cellPadding=10

width=800 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD>
<>&nbsp;</P></TD></TR></TBODY></TABLE></TD></TR></TBODY>

</TABLE><FONT color=#ff00cc></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY>

</TABLE>

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 15:07:40 | 显示全部楼层
本帖最后由 樱子 于 2015-7-4 14:44 编辑



<

 

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 15:07:41 | 显示全部楼层
本帖最后由 樱子 于 2015-7-4 15:24 编辑

做此贴 点附加选项
HTML 代码 点上钩


希望大家玩得开心!

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 15:27:44 | 显示全部楼层

109

主题

378

帖子

809

积分

Lv4.高中生风粉

Rank: 4

金币
774
威望
400
脚步
386
好友
12
发表于 2015-7-4 17:56:54 | 显示全部楼层
一直想尝试,就怕弄不好。

点评

试了就删不掉贴了。。一直在愁这个。。  详情 回复 发表于 2015-7-4 18:13
先复制代码 看一下效果 记住 一定选择 附加选项 勾上【HTML 代码 】祝您玩得开心!  发表于 2015-7-4 18:08

109

主题

378

帖子

809

积分

Lv4.高中生风粉

Rank: 4

金币
774
威望
400
脚步
386
好友
12
发表于 2015-7-4 18:13:12 | 显示全部楼层
船夫 发表于 2015-7-4 17:56
一直想尝试,就怕弄不好。

试了就删不掉贴了。。一直在愁这个。。

点评

别着急 慢慢来  详情 回复 发表于 2015-7-4 18:40

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 18:16:47 | 显示全部楼层
我在给你演示一下 先把纯文本勾上 把框架里代码复制上  往下看 底层有选项 附加选项 
把纯文本勾打开 就成了 

<TABLE style="BORDER-RIGHT: #00ff00 10px ridge; BORDER-TOP: #00ff00 10px ridge; BORDER-LEFT: #00ff00 10px ridge; BORDER-BOTTOM: #00ff00 10px ridge; BACKGROUND-COLOR: #460046" cellSpacing=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#00ff00 height=3 cellSpacing=10 cellPadding=10 width=800 align=center bgColor=#460046 border=1>
<TBODY>
<TR>
<TD><BR><BR><BR><BR>6<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>



6

点评

做贴时 先不要保存 把框架做好后 就可以选择你需要的内容 最后保存 发帖  详情 回复 发表于 2015-7-4 18:21

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 18:21:28 | 显示全部楼层
樱子 发表于 2015-7-4 18:16
我在给你演示一下 先把纯文本勾上 把框架里代码复制上  往下看 底层有选项 附加选项 HTML 代码  ...

做贴时 先不要保存 把框架做好后 就可以选择你需要的内容 最后保存 发帖

点评

你说的这个我懂。但我用网站自带的表格制作出来有一边不对称怎么办?  详情 回复 发表于 2015-7-4 18:50

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 18:40:52 | 显示全部楼层
船夫 发表于 2015-7-4 18:13
试了就删不掉贴了。。一直在愁这个。。

别着急 慢慢来

109

主题

378

帖子

809

积分

Lv4.高中生风粉

Rank: 4

金币
774
威望
400
脚步
386
好友
12
发表于 2015-7-4 18:50:58 | 显示全部楼层
樱子 发表于 2015-7-4 18:21
做贴时 先不要保存 把框架做好后 就可以选择你需要的内容 最后保存 发帖  ...

你说的这个我懂。但我用网站自带的表格制作出来有一边不对称怎么办?


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?加入叮咚

x

点评

如果你是复制代码 就不要用网站表格 各论坛程序都不一样  发表于 2015-7-4 19:00

44

主题

149

帖子

394

积分

Lv3.初中生风粉

Rank: 3Rank: 3

金币
253
威望
455
脚步
40
好友
5
 楼主| 发表于 2015-7-4 18:57:03 | 显示全部楼层
如果你是复制代码 就不要用网站表格  各论坛程序都不一样

点评

好吧。谢谢樱子老师教导。一直在纠结这个问题  详情 回复 发表于 2015-7-4 19:02

109

主题

378

帖子

809

积分

Lv4.高中生风粉

Rank: 4

金币
774
威望
400
脚步
386
好友
12
发表于 2015-7-4 19:02:28 | 显示全部楼层
樱子 发表于 2015-7-4 18:57
如果你是复制代码 就不要用网站表格  各论坛程序都不一样

好吧。谢谢樱子老师教导。一直在纠结这个问题

点评

上一条回复 删掉吧 一着急发些代码 不好意思 船版客气了 熟悉一段时间就会好 玩的开心  发表于 2015-7-4 19:11
蓝色简捷 在此加载内容 边框代码: <P align=center><FONT color=#00ffff size=5 face=黑体>蓝色简捷</FONT></P> <TABLE title=和尚欢迎您 border=0 borderColor=#cccccc cellPadding=0 width=910 background=htt   发表于 2015-7-4 19:07
您需要登录后才可以回帖 登录 | 加入叮咚

本版积分规则