您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页代码>>>网页代码>>>用颜色制作边框与贴图方法
用颜色制作边框与贴图方法
发表日期:2012-4-22 11:24:00 出处:转载 作者:未知 发布人:qingyiyoulan3 已被访问 1591
           



 

 

用颜色制作边框与贴图方法

 

       

      我们常用网络上的图片地址做成的多层图框叫套装,非常精彩漂亮,但有时会因网络失去链接,无法显示。但用颜色做成的图框,不受条件所限,隐定性较好,显示也快。下面主要介绍用颜色制作边框。

 

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

<P align=center>

<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=660000<br...>--边框颜色

<TD bgcolor=#AAAAFF>--图框内单元格背景颜色

 

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

<P align=center>

<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>

 

显示结果:




 

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

<P align=center>

<table border=16 cellSpacing=8 cellPadding=5 borderColor=#841A00 bgcolor=#FFFF6F>

<td>

<TABLE border=1>

<TR>

<TD width=450 background=图片地址 height=300 border=3>

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

</td></table>

 

显示结果:

 

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

<P align=center>

<TABLE borderColor=#ffff00 cellSpacing=10 cellPadding=8 width=470 background=http://img.gw.com.cn/UploadFile/2004/9/3/3750984.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>

 

显示结果:

 

 

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

<P align=center>

<table 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>

</td></tr></table>

 

显示结果:





 

 

六.  用金黄色图片作边框的代码

<CENTER>

<TABLE borderColor=660000 cellSpacing=10 cellpadding=20 background=http://img.bimg.126.net/photo/Dv4onDyaJV0ArRAATyMffQ==/4296715519489378797.jpg width=400 height=300 border=10>

<TBODY>

<TR>

<TD bgcolor=blue>

<br><br>

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

 

显示结果:

DyaJV0ArRAATyMffQ==/4296715519489378797.jpg border=10>


 

 

       我们要注意的是:引用套装代码时,必须在代码的第一行前面加设全屏代码,才能完整显示。全屏代码:

<DIV style="LEFT: -210px; WIDTH: 800px; POSITION: relative; TOP: 40px">

 

          用HTML代码贴图,图片必须是网络上的图片绝对地址(URL)。如果是本机硬盘的图片,应先上传到较隐定的空间(免费相册或可上传图片的论坛),取得图片的地址和图片的尺寸大小。新学习者最好选择一些较简单的图框来贴图。由于各论坛系统对贴子宽度有不同的限制,因此图框的宽最好不要超过500,图片宽度则在400左右.

 

七、 几种常用贴图代码

 

第一种:

<img src="图片地址">

 

第二种:

<img src=“图片地址” width=''''''''80''''''''height=''''''''280'''''''' border=''''''''10''''''''>

 

第三种:图片可调大小

<INPUT src="图片地址" type=image width=500>

 

第四种:用图片作表格背景的贴图方法


<CENTER>

<TABLE borderColor=0000ff cellSpacing=10 cellpadding=20 background=“图片地址”width=400 height=300 border=10>

<TR>

<TD>

<br>

<br>

</TD></TR></TABLE></CENTER>

 

 

第一种最简易使用的贴图代码:

<img src="图片地址">

用网络上的图片绝对地址(URL)粘贴上去就可以了。但这种方法贴的图片,各论坛对图片宽度显示有不同的限制,有时不是原图片的尺寸,更不是你想要多大就多大。

 

这里有一张图片地址: http://img.bimg.126.net/photo/MDIY7A1jaZ1PN8Iqgh67qA==/4235916924519834607.jpg

把它粘贴在上面代码中的“图片地址”如下:

<P align=center>
<img src="
http://img.bimg.126.net/photo/MDIY7A1jaZ1PN8Iqgh67qA==/4235916924519834607.jpg
">

 

显示结果:

用颜色做音画边框 - 老君 - 老君休闲屋

 

 

第二种;用表格的贴图代码

<P align=center>

<TABLE borderColor=#fbd44c cellSpacing=3 cellpadding=0 background=http://img.blog.163.com/photo/UJFr5s_krmFIlrvuqqN6Hg==/2888214736029298110.jpg width=540 height=770  border=10>

<TBODY>

<TR>

<TD>

<br>

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

 

显示结果:


 


 说明: 用图片作表格背景必须注意图片素材原尺寸和图框宽度设置要一致。 如果图片小而图框大,会显示部份重影,多出一部份图像。相反如果图片大而图框小则 只显示图像的一部份。

 
 

八、语法介绍

 

BORDER-RIGHT: #9b0000 6px ridge;

右边框颜色 宽度 样式 BORDER-TOP: #9b0000 6px ridge;

上边框颜色 宽度 样式 BORDER-LEFT: #9b0000 6px ridge;

左边框颜色 宽度 样式 BORDER-BOTTOM: #9b0000 6px ridge;

下边框颜色 宽度 样式 ; 外边框定位(相对定位) ;

内部小表格的定位(绝对定位) LEFT: 0px; 离左边的距离 TOP: 0px;

离顶部的距离 RIGHT: 0px;

离右边的距离 BOTTOMM: 0px;

离下边的距离 HEIGHT: 512px 表格高度 WIDTH: 512px; 表格宽度 表格边框的样式还有以下几种(换不同的值就会有不同的边框样式):

 
九、图片雾化的贴图方法
 
图片雾化或叫羽化效果,就是一张图片只突出显示中心的主要图像,周边朦胧淡化。方法有通常使用的代码和简化的代码. 
 
 二种雾化代码模式
 
1、 通常使用的代码:
<TABLE border=0>
<TR>
<TD style="FILTER:Alpha(opacity=100,style=2)" width=450 height=600 background=图片地址>
</TD></TR></TABLE>
 
2、简化的代码:
<INPUT style="FILTER: alpha(opacity=100,style=2)" type=image width=450 src="图片地址"INPUT>
 
 显示结果:

 

 说明:

圆形雾化效果和矩形雾化效果代码是一样的,不同之处是:

把圆形雾化效果 style=2 改为:

矩形雾化效果 style=3

通常使用的是圆形雾化效果 style=2 . :

如何在图框内插入图片或文字。

 
十、在一张图框或图片内如何插入文字和图片?
 
 要在表格的单元格 <TD></TD> 中间插入。 例如:
 
 <P align=center>
<TABLE width=500 height=380 bordercolor=olive background=图片地址 border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 25pt" face=华文行楷 color=red><B>
<p align=CENTER> 插入文字或图片</P>
<P align=center>插入文字或图片</P>
<p align=CENTER>插入文字或图片</P>
</B> </FONT>
</TD> </TR></TABLE></CENTER>
 
 显示效果: 

插入文字或图片

插入文字或图片

插入文字或图片

 说明:
●width=480=图框宽度;
●height=350=图框高度;
●bordercolor=oliv=边框颜色;
●border=8=边框线粗度.
●background=背景图片地址
 
 变化代码实例:
<P align=center>
 
<TABLE width=480 height=350 bordercolor=olive background=主要图片地址 border=18>
<TR>
<TD >
<FONT style="FONT-SIZE: 15pt" face=华文行楷><B>
<br> <p align=CENTER><FONT color=#0000ff>蝶恋花</P>
<p align=CENTER><img src="http://img.bimg.126.net/photo/UmPOghixAOWKYoXVnu_BCA==/638385247180246590.jpg"width=100 border=1>
</P>
<p align=CENTER><img src="http://img.bimg.126.net/photo/UgikHhQV7pY-u5alBhNeaQ==/352125195865483615.jpg"width=200 border=1>
</P>
<p align=CENTER><img src="http://img.bimg.126.net/photo/N7Le-0pXpr7MvBYFw3274w==/3737987690718011063.jpg" width=200 border=1>
</P>
<p align=CENTER><FONT color=red>图文:网络/
原创制作者:老君</P>
</B> </FONT>
</TD></TR>;</TABLE></CENTER>
 
显示效果:


蝶恋花

用颜色制作边框与贴图方法 - 老君 - 老君休闲屋

用颜色制作边框与贴图方法 - 老君 - 老君休闲屋

用颜色制作边框与贴图方法 - 老君 - 老君休闲屋

图文:网络/ 原创制作者:老君

 
像这样的宽幅代码贴,就必须加设全屏代码:
在代码的第一行前面加以下代码:
<DIV style="LEFT: -220px; WIDTH: 800px; POSITION: relative; TOP: 40px">
在代码最后一行加以下代码:
</DIV><br><br><br><br>
不设置全屏代码时,贴子右边有一部份不能显示。
 
 
         学习和掌握了HTML代码两大基本功即文字设置和表格设置之后,就可以制作一些多姿多彩的代码贴了。
       我们可以在一张用图片或颜色作背景的表格单元格内(单层或多层图框内),插入多段文字的和图片。
       根据插入的图片宽度和色彩选好图框。有些论坛对代码贴图的宽度限制在500之内,所以图框包括边线宽度不能超过500,插入的图片宽度在400以内,否则其超过部份就无法显示。如果论坛对代码贴宽度不限制,插入的图片就可宽限些。由于插入的图片加图框的宽很大,所以必须设置全屏代码才能完整显示。网络上有很多漂亮的图框(套装)可以拿来套用。启步学习时最好采用较简单的图框。

 

 

 

 点击图片即可进入我的博客

 

 素材:网络   编辑:老君

 (引用老君用颜色制作边框与贴图方法

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

没有相关评论

 发表评论:

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

清逸幽蓝--蓝之梦*素材*音画*FLASH | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:417556691 本站最佳分辨率:1024*768 联系人:清逸幽蓝