如何制作日志边框(附: 表格链接代码)

【幽梦教程】

如何制作日志边框

 

1.在图片上写日志效果:

1.在图片上写日志代码说明: 粉红色地方“height=300”表示图片的高度为300 黄色地方“width=500”表示图片的宽度为500 蓝色地方“图片地址”表示图片属性地址 鲜绿色地方“border=3”表示为图片加边框为3(当设为0时只是简单的图片加字效果) 青绿色地方“cellSpacing=3”表示为边框格线设置距离为3(最佳数值1到6) 注意:当边框设为0时无效 橙色地方“borderColor=#003333”表示边框格线颜色,颜色码是“003333”

 

代码:

<TABLE borderColor=#003333 height=300 cellSpacing=3 cellPadding=0 width=500 align=center style="BACKGROUND-IMAGE:url(图片地址)"borderColor=#cccccc border=1>

<TBODY>
<TR>
<TD align=middle>
<P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE> 

 

 

 2.用颜色码制作简单日志边框效果:

2.用颜色码制作简单日志边框代码说明: 海绿色地方“borderColor=#FF0000”的“FF0000”表示边框格线颜色码 红色地方“height=300”的“300”表示边框高度数值 蓝色地方“cellSpacing=0”的“0”表示格线的距离数值 粉红色地方“width=500”的“500”表示边框宽度数值 鲜绿色地方“bgColor=#FFFFCC”的“FFFFCC”表示边框内背景颜色码 青绿色地方“border=6”的“6”表示边框格线厚度

 

 

代码:

<TABLE borderColor=#FF0000 height=300 cellSpacing=0 cellPadding=0 width=500 align=center bgColor=#FFFFCC border=6>
<TBODY>
<TR>
<TD align=middle>
<P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE>

 

  3.为图片边框加标题栏及背景效果:

为图片边框加标题栏及背景代码说明

蓝色地方“标题栏背景图片地址”表示标题栏的背景图片属性地址 橙色地方“height=38”的“38”表示标题栏的高度 青绿色地方“日志背景图片地址”表示日志背景图片属性地址 粉红色地方“height=250”表示日志背景的高度 本人认为无论是标题蓝背景的高度还是日志背景高度都无需太大的修改,因为两者的高度都会随文字的大小和数量增加,所以,只设初步就好。这样在日志目录浏览中才不会显得过大。

代码:

<TABLE height=300 cellSpacing=2 cellPadding=0 width=500 align=center border=2>
<TBODY>
<TR>
<TD align=middle style="BACKGROUND-IMAGE:url(标题栏背景图片地址

)"borderColor=#cccccc border=38>

<STRONG><FONT color=#ff0000 size=5>添加标题</FONT></STRONG></TD></TR>
<TR>
<TD align=middle style="BACKGROUND-IMAGE:url(日志背景图片地址)"borderColor=#cccccc border=250>


<P><FONT color=#ff00ff size=3>添加文字或图片</FONT></P></TD></TR></TBODY></TABLE>

 

 

 4.为颜色边框加标题栏及背景色效果: 

为颜色边框加标题栏及背景色代码说明
粉红色地方“borderColor=#FF0000”的“FF0000”表示边框格线颜色码 橙色地方“bgColor=#FFFFCC”的“FFFFCC”表示日志背景颜色码 绿色地方“bgColor=#FF0000”的“FF0000”表示标题栏颜色码

 

代码:

<

<TABLE borderColor=#FF0000 height=300 cellSpacing=3 cellPadding=0 width=500 align=center bgColor=#FFFFCC border=6>
<TBODY>
<TR>
<TD align=middle bgColor=#FF0000 height=38><FONT face=宋体 color=#FFFFFF size=5><STRONG>添加标题</STRONG></FONT></TD></TR>
<TR>
<TD align=middle height=250>
<FONT face=宋体 color=#222222 size=3><STRONG>添加文字或图片</STRONG></FONT></TD></TR></TBODY></TABLE>
5.图片边框加多层效果:

图片边框加多层效果代码说明 1.橙色地方表示第一层格线宽度 蓝色地方表示第一层背景图片地址 2.粉红色地方表示第二层格线宽度 青绿色地方表示第二层背景图片地址 3.紫罗兰色地方表示第三层格线宽度 鲜绿色地方表示第三层背景图片地址 4.黄色地方表示日志背景图片地址 值得注意的是,“ 值得注意的是,“ <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center style="BACKGROUND-IMAGE:url(边框背景图片地址)"borderColor=#cccccc border=1>
<TR>
<TD align=middle>

其实就是表示边框的一层代码,如果要加多层就只需在所有代码前加一段这个代码就行,减少也是删除这一段。

代码:

<TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center style="BACKGROUND-IMAGE:url(第一层边框背景图片地址)"borderColor=#cccccc border=1>


<TBODY>
<TR>
<TD align=middle>
<TABLE borderColor=#003366 height=300 cellSpacing=16 cellPadding=0 width=500 align=center style="BACKGROUND-IMAGE:url(第二层边框背景图片地址)"borderColor=#cccccc border=1>


<TBODY>
<TR>
<TD align=middle>
<TABLE borderColor=#000000 height=300 cellSpacing=8 cellPadding=0 width=500 align=center style="BACKGROUND-IMAGE:url(第三层边框背景图片地址)"borderColor=#cccccc border=1>


<TBODY>
<TR>
<TD align=middle>
<TABLE borderColor=#000000 height=300 cellSpacing=3 cellPadding=0 width=500 align=center style="BACKGROUND-IMAGE:url(日志背景图片地址)"borderColor=#cccccc border=3>

<TBODY>
<TR>
<TD align=middle>
<P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE

6. 添加多层颜色框效果:

添加多层颜色框代码说明: 蓝色地方表示第一层边框颜色代码 鲜绿色地方表示第二层边框颜色代码 青绿色地方表示第三层边框颜色代码 粉红色地方表示日志背景颜色 添加一层或删除一层代码:“ <TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center bgColor=#FF0000 border=1>
<TBODY>
<TR>
<TD align=middle>

5.图片边框加多层的添加或删除方法

 

代码:

<TABLE borderColor=#000000 height=300 cellSpacing=20 cellPadding=0 width=500 align=center bgColor=#FF0000 border=1>
<TBODY>
<TR>
<TD align=middle>
<TABLE borderColor=#FFFFFF height=300 cellSpacing=12 cellPadding=0 width=500 align=center bgColor=#000000 border=1>
<TBODY>
<TR>
<TD align=middle>
<TABLE borderColor=#000000 height=300 cellSpacing=8 cellPadding=0 width=500 align=center bgColor=#FF0000 border=1>
<TBODY>
<TR>
<TD align=middle>
<TABLE borderColor=#000000 height=300 cellSpacing=2 cellPadding=0 width=500 align=center bgColor=#FFFFFF border=1>
<TBODY>
<TR>
<TD align=middle>
<P><FONT face=宋体 color=#ff0000 size=4><STRONG>添加文字或图片</STRONG></FONT></P></TD></TR></TBODY></TABLE>

 

 

 
制作素材: 
 
图片      图片    
 
图片     底图      图片
 
  图片
 

 

HTML在线编辑器:http://ny.xmu.edu.cn/editor.asp 
 
 
风致嫣然讲解录像:
 
 
 

 

 

表格链接代码 : 

制作代码

1、表格中纯图片链接

表格中的图片链接代码:

<TABLE borderColor=#ff0000 cellSpacing=1 cellPadding=2 width=570 bgColor=#60ffff border=2>

<TBODY>

<TR>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TR>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TD width="10%"><A href="网址" target=”_blank”><IMG src="图片"></A></TD>

<TR>

2、纯文字链接:

表格中的文字链接代码:

 <TABLE borderColor=#ff0000 cellSpacing=1 cellPadding=2 width=570 bgColor=#60ffff border=2>

<TBODY><TR>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TR>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><A href="网址" target=_blank>名称</A></TD>

<TR>

3、图文混合表格(文字链接)

表格中的图片上的文字链接代码:

<TABLE borderColor=#ff0000 cellSpacing=1 cellPadding=2 width=570 bgColor=#60ffff border=2>

<TBODY>

<TR>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TR>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TD width="10%"><IMG src="图片" border=0><A href="网址" target=_blank>名称</A></TD>

<TR>

 

 

 

☆夜月幽梦☆《专版导航》  

用IR给GIF动画添加文字

iSee图片专家下载与简单处理图片

一图搞定全套自定义装扮

春 朱自清(简易音画大图制作教程示例)

用PS制作音画大图日志(6.1修改)

用PS去掉图片上的文字

用PS扣图拼图制作签名图

用PS做简单闪图闪字签名

对称花边框简单的制作方法

如何在图片加播放器

做边框代码详解和边框素材2

如何用代码做一篇日志1

如何在图片中加入文字及百页窗效果代码

QQ空间可用的基本代码

纯代码分割线及信纸的制作(附 颜色代码)

信纸加边框和背景的代码

元旦贺卡及制作方法

如何制作边框的代码(附,颜色代码大全)

教你免费使用漂亮的黄钻专用日志信纸

美图秀秀(软件)----不会PS的来看看哦

清除迅雷5小广告的方法 新手用电脑必备 160种色彩搭配组合专用表 漂亮的闪光边框(背景素材) 漂亮的横条边框(背景素材)

 图片

 

文章评论