天涯部落

小圈子,大声音!呼朋引伴网聚部落!

创建新部落?

从零启步学代码【十】

楼主:人间惆怅客SD 时间:2012-09-13 08:16:49 点击:596 回复:7
脱水模式给他打赏只看楼主 阅读设置

 



欢迎您!启步学代码


 


(原创编辑者:游子。供初学HTML代码的朋友参考)

学习用表格属性做漂亮的代码边框。


   有很多漂亮的帖子边框是怎么做成?一些是现成的像框或三合一的花边图框做成,大部份是应用表格的相关属性做成的。做图框的素材可用颜色也可用图片。或颜色与图片组成。用颜色做成的图框,不受条件所限,隐定性较好,显示也快。用网络上的图片地址做成的多层图框叫套装,非常精彩漂亮,但有时会因网络失去链接,无法显示。



用颜色做成的一层图框代码;



 





<TABLE borderColor=#ffd700 cellSpacing=10 cellPadding=8 width=470 align=center bgColor=#0000ff border=12>
<TBODY>
<TR>
<TD >
<BR><BR><BR><BR><BR><BR>
</TD></TR></TBODY></TABLE>




欢迎您!启步学代码 ( 十 )转载 - 幻影日月 - 幻影日月

显示结果:










用颜色做成的二层图框代码;






<TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width=470 align=center bgColor=#f70968 border=12>
<TBODY>
<TR>
<TD >
<TABLE borderColor=#ffd700 cellSpacing=5 cellPadding=8 width=465 align=center bgColor=#bb4444 border=1>
<TBODY>
<TR>
<TD>
<BR><BR><BR>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

 

 



显示结果:

 







给图片加用颜色做成的边框代码;





<table border=16 cellSpacing=8 cellPadding=5 borderColor=#841A00 bgcolor=#FFFF6F>
<td>
<TABLE border=1>
<TR>
<TD width=450 background=http://image2.sina.com.cn/dy/c/2004-10-01/U397P1T1D4478993F21DT20041001212159.jpg height=300 border=3>
</TD></TR></TABLE>
</td></table>

 


显示结果:


用颜色做成的二层图框代码;




<TABLE borderColor=#ffff00 cellSpacing=10 cellPadding=8


width=430 background=http://img.gw.com.cn/UploadFile/2004/9/3/375


0984.jpg border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#ffff00 cellSpacing=6 cellPadding=4


width="100%" background=http://img.gw.com.cn/UploadFile


/2005/5/15/3419934.jpg border=1>
<TBODY>
<TR>
<TD>
<P align=center><INPUT type=image width=420 src="http://photo.southcn.com/upload/F202922004.11.4.


22.24.422.jpg" ></P>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>


 

欢迎您!启步学代码 ( 十 )转载 - 幻影日月 - 幻影日月

显示结果:







用颜色做成的立体图框代码;


 




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

 


 



显示结果:


 









 



 

楼主人间惆怅客SD 时间:2012-09-13 08:33:37
  
作者 :枫叶Fs 时间:2012-09-13 12:30:25
  学习!好友做得好细心。。
作者 :星连193 时间:2012-09-13 13:32:24
  学习!
作者 :我的心在飞扬2011 时间:2012-09-13 14:54:01
  学习,惆怅做得很精致!问好@人间惆怅客SD
楼主人间惆怅客SD 时间:2012-09-13 15:39:31
  谢谢大家的鼓励。这是别人的东东,我只是转了一下,搬家公司而已。
作者 :不与莉花同梦 时间:2013-05-27 16:50:31
  学习。
作者 :冰雪儿的眼泪 时间:2013-07-31 12:59:34
  学习,问好楼主!

相关推荐

发表回复

请遵守天涯社区公约言论规则,不得违反国家法律法规