无损格式发烧友天地百事高游戏站
打印

【天下一家谈 HTML 系列之二】文字特效、分割线与图片加边框的方法

【天下一家谈 HTML 系列之二】文字特效、分割线与图片加边框的方法

题材来源于网络!

百事高论坛

复制内容到剪贴板
代码:
<P><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>百事高论坛</B></FONT></P>

百事高论坛


复制内容到剪贴板
代码:
<P align=center><FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 70px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 450px; POSITION: relative" color=#cc00>百事高论坛</FONT></P><BR></DIV>
[ 本帖最后由 听者有心 于 2006-2-13 10:59 AM 编辑 ]

百事高论坛

复制内容到剪贴板
代码:
<FONT style="FONT-SIZE: 40pt; FILTER: glow(color=black); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>百事高论坛</B></FONT></CENTER><BR>

百事高论坛
复制内容到剪贴板
代码:
<DIV align=center><DIV style="FILTER: shadow(color=#c299ff, strength=40); WIDTH: 480px"><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 50pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#fff000>百事高论坛</FONT> <BR></DIV></DIV></DIV>
[ 本帖最后由 天下一家 于 2006-1-30 05:55 PM 编辑 ]
百事高在线音乐网

复制内容到剪贴板
代码:
<CENTER><FONT face=隶书 color=red size=15><MARQUEE direction=up behavior=alternate width=60 height=120>百</MARQUEE><FONT color=yellow> <MARQUEE direction=up behavior=alternate width=60 height=80>事</MARQUEE><FONT color=brown> <MARQUEE direction=up behavior=alternate width=60 height=120>高</MARQUEE><FONT color=green> <MARQUEE direction=up behavior=alternate width=60 height=80>音</MARQUEE><FONT color=orange> <MARQUEE direction=up behavior=alternate width=60 height=120>乐</MARQUEE><FONT color=yellow> <MARQUEE direction=up behavior=alternate width=60 height=80>论</MARQUEE><FONT color=orange> <MARQUEE direction=up behavior=alternate width=60 height=120>坛</MARQUEE></FONT></B></MARQUEE></FONT></CENTER></FONT><CENTER></CENTER></FONT></FONT></FONT></FONT><BR>

复制内容到剪贴板
代码:
<MARQUEE scrollAmount=8 direction=right behavior=alternate><B><FONT color=#7700bb size=6><FONT color=red> <MARQUEE direction=up behavior=alternate width=40 height=60 align="middle">好</MARQUEE><FONT color=red> <MARQUEE direction=up behavior=alternate width=40 height=80>看</MARQUEE><FONT color=red> <MARQUEE direction=up behavior=alternate width=40 height=60>吗</MARQUEE></B></FONT></FONT></FONT></FONT></MARQUEE> <CENTER></CENTER><BR>

TOP

APE.FLAC.WAV格式音乐文件下载

复制内容到剪贴板
代码:
<MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000><B>一 </FONT></B></B></MARQUEE><MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; LINE-HEIGHT: normal; FONT STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000><B>家</FONT></B></B></MARQUEE> <MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000><B>整</FONT></B></B></MARQUEE><MARQUEE scrollAmount=2 width=60 height=67 align="center" scrolldely="10"><B><FONT style="FONT-WEIGHT: normal; FONT-SIZE: 20pt; LINE-HEIGHT: normal; FONT-STYLE: normal; FONT-VARIANT: normal" face=华文彩云 color=#ff0000><B>理</FONT></B></B></MARQUEE> </FONT></CENTER><BR>
百事高论坛欢迎你~~~~
百事高论坛迎你~~~~

复制内容到剪贴板
代码:
<CENTER><MARQUEE scrollAmount=2 direction=down height=60> <CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>百事高论坛欢迎你~~~~</FONT></CENTER></B></MARQUEE> <CENTER><MARQUEE scrollAmount=2 direction=up height=60> <CENTER><FONT face=华文彩云 color=#da70d6 size=6><B>百事高论坛迎你~~~~</FONT></CENTER></B></MARQUEE></CENTER><DIV></DIV><P></P></CENTER>
[ 本帖最后由 天下一家 于 2006-1-30 06:00 PM 编辑 ]

欢迎光临百事高

复制内容到剪贴板
代码:
[code]<p align=center><FONT style="FONT-SIZE: 55pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>欢迎光临百事高</B></FONT></DIV>
[/code] [ 本帖最后由 天下一家 于 2006-1-30 06:31 PM 编辑 ]
一家整理
<FONT style="FONT-SIZE: 50pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷" size=6>一家整理</FONT> <DIV></DIV><BR><BR></DIV>
一家整理
<FONT style="FONT-SIZE:30pt;filter:glow(color=gray,strength=4);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>一家整理</B></FONT> 
一家整理
<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#DA70D6); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 方正舒体"><B>一家整理</B></FONT></CENTER><BR>
 

白事高论坛欢迎您!

<CENTER><FONT style="FONT-SIZE: 50pt; FILTER: glow(color=#CC33AE); WIDTH: 100%; COLOR: #e4dc9b; LINE-HEIGHT: 150%; FONT-FAMILY: 华文行楷"><P><B>白事高论坛欢迎您!</P></FONT></CENTER></B><CENTER></CENTER>




白事高论坛欢迎您


 <CENTER>
<TABLE align=center background=http://tech.china.com/zh_cn/home4u/sucai/gifanimation/line/0024.gif border=0><BR><BR><BR><BR><TBODY><TR><TD style="FILTER: mask(color=#000000)" align=middle><FONT style="FONT-SIZE: 50pt" face=华文行楷 color=#336699><B>白事高论坛欢迎您</B></FONT></TD></TR></TBODY></TABLE><BR><BR></CENTER>
[ 本帖最后由 天下一家 于 2006-1-30 12:55 PM 编辑 ]
百事高论坛欢迎您!
<CENTER><TABLE cellSpacing=0 cellPadding=0 align=center background=http://bbs.tianshi163.com/UploadFile/2005-6/2005612225123775.gif><TBODY><TR><TD style="FILTER: chroma(color=#33ff33)"><TABLE align=center background=http://yuandi.com/wysc/xiangsu/2/mangertile.jpg><TBODY><TR><TD align=middle><FONT style="FONT-SIZE: 40pt" face=华文行楷 color=#33ff33><B><I>百事高论坛欢迎您!</I></B></FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>
百事高论坛欢迎您
 <FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=FF0033); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>百事高论坛欢迎您</B></FONT>
百事高论坛欢迎您
 <FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=green); WIDTH: 100%; COLOR: white; LINE-HEIGHT: 150%; FONT-FAMILY: 华文彩云"><B>百事高论坛欢迎您</B></FONT>
百事高论坛欢迎您
 <FONT style="FONT-SIZE:40pt;filter:glow(color=gray,strength=5);WIDTH:100%; COLOR:red;LINE-HEIGHT:150%;FONT-FAMILY:华文行楷"><B>百事高论坛欢迎您</B></FONT>

百事高论坛欢迎您
<DIV align=center>
<DIV style="FILTER: glow(color=#c299ff, strength=60); WIDTH: 400px"><FONT face=隶书 color=#8a2be2 size=7><B><BR>百事高论坛欢迎您</FONT></B> </DIV>
[ 本帖最后由 天下一家 于 2006-1-30 06:39 PM 编辑 ]

TOP

百事高论坛欢迎您
<FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=#AF0530); WIDTH: 100%; COLOR: #f90b46; LINE-HEIGHT: 150%; FONT-FAMILY: 隶书"><B>百事高论坛欢迎您</B></FONT>
百事高欢迎您 百事高欢迎您
<CENTER><FONT face=华文彩云 color=#ee110e size=7><MARQUEE width=200 height=50><IMG src="">百事高欢迎您<IMGsrc=""> </FONT></MARQUEE><FONT face=华文彩云 color=#ee1111

size=7><MARQUEE direction=right width=200 height=50><IMG src="">百事高欢迎您<IMG src=""></FONT> </MARQUEE></FONT></FONT></CENTER>
百事高论坛
<FONT SIZE=7><B><FONT COLOR="#FF0000">百</FONT><FONT SIZE=7><B><FONT COLOR="#FF0000">事</FONT><FONT COLOR="#FF2A00">高</FONT><FONT COLOR="#FF5500">论</FONT><FONT COLOR="#FF7F00">坛</FONT><FONT COLOR="#FFAA00">欢</FONT><FONT COLOR="#FFD400">迎</FONT><FONT COLOR="#FFFF00">你</FONT> </B></FONT>
百事高论坛管理团队欢迎你
百事高论坛管理团队欢迎你
<MARQUEE direction=right> <TABLE cellSpacing=0 cellPadding=0 align=center background=http://znrs.2000y.net/UploadFile/2004-5/2004510115258900.jpg><TBODY><TR><TD style="FILTER: chroma(color=#336699)"><TABLE align=center bgColor=red><TBODY><TR><TD align=middle><FONT style="FONT-SIZE: 60pt" face=文鼎花瓣体 color=#336699>百事高论坛管理团队欢迎你</FONT></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE></FONT></MARQUEE> <MARQUEE direction=up> <TABLE cellSpacing=0 cellPadding=0 align=center background=http://www.cycnet.com/encyclopedia/propagation/flower/flowerlanguage/images/qht.jpg><TBODY><TR><TD style="FILTER: chroma(color=#336699)"><TABLE align=center bgColor=lime><TBODY><TR><TD align=middle><FONT style="FONT-SIZE: 60pt" face=文鼎圆立体 color=#336699>百事高论坛管理团队欢迎你</FONT></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE></FONT></MARQUEE> 
欢迎光临百事高!

<MARQUEE direction=up> <TABLE cellSpacing=0 cellPadding=0 align=center background=http://znrs.2000y.net/UploadFile/2004-5/2004510115258900.jpg><TBODY><TR><TD style="FILTER: chroma(color=#336699)"><TABLE align=center bgColor=red><TBODY><TR><TD align=middle><FONT style="FONT-SIZE: 60pt" face=华文行楷 color=#336699>欢迎光临百事高!</FONT></TD></TR></TBODY></TABLE></FONT></TD></TR></TBODY></TABLE><P></FONT></P> 
好看吗
 <TABLE align="center" border="0" cellpadding="0" cellspacing="0" background=http://www.dabaoku.com/gif/168/gif074.gif><TR><TD style="FILTER: chroma(color=#336699"><TABLE align=center bgcolor=#FCF3F4><TR><TD align=middle><FONT style="FONT-SIZE: 40pt" face=华文新魏 color=#336699><b>好看吗</b></FONT></TD></TR></TABLE></TD></TR></TABLE>
[ 本帖最后由 天下一家 于 2006-1-30 06:35 PM 编辑 ]

TOP

我想要啊谢谢

TOP

[HTML] 运用代码制作分割线

 
运用HTML代码来做分割线
最基本的:

代码:[hr width=300 size=1 color=#00ffff align=center noshade]

其中 width 规定线条的长度,还可以是百分比;

color 是颜色,size 是厚度。

align 规定线条位置,left、right、center。

noshade 是否有立体效果。
 


 

代码:[hr width=80% size=3 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=3)"]


 


代码:[hr width=80% size=3 color=#00ffff style="FILTER: alpha(opacity=100,finishopacity=0,style=1)"]


 

代码:[hr width=80% size=1 color=#00ffff style="border:1 dashed #00ffff"]


 

代码:[hr width=80% size=3 color=#00ffff style="border:3 double green"]


 

代码:[hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#f6ae56,direction:145,strength:15)"]


 

代码:[hr width=80% size=3 color=#00ffff style="filter:progid:DXImageTransform.Microsoft.Glow(color=#00ffff,strength=10)"]

 

代码:[hr width=80% size=30 color=#00ffff style="filter:alpha(opacity=100,finishopacity=0,style=2)"]

注:在使用时用< >代替[ ]即可
 

楼上想要就拿去了!^_^
[ 本帖最后由 听者有心 于 2006-2-13 10:38 AM 编辑 ]

TOP

谢谢啦!
Who can save ***********? ***** **! Follow *********, nothing else!

TOP

设计的好漂亮呢~
谢谢
百事高音乐论坛

TOP

<TABLE align="center" border="0" cellpadding="0" cellspacing="0" background=http://www.dabaoku.com/gif/168/gif074.gif><TR><TD style="FILTER: chroma(color=#336699"><TABLE align=center bgcolor=#FCF3F4><TR><TD align=middle><FONT style="FONT-SIZE: 40pt" face=华文新魏 color=#336699><b>好看吗</b></FONT></TD></TR></TABLE></TD></TR></TABLE>

TOP

[HTML] 给图片加边框的几种方法

 

上边是原图
 

 

 

 


 
代码:<*table border="0" cellspacing="0" cellpadding="0" style="border:1px #5F94C9 dashed" id="table3"> <tr> <td width="5" height="5" style="border-top:2px solid red;border-left:2px solid red;font-size:2pt"></td><td height="5" width="63"></td> <td width="5" height="5" style="border-top:2px solid red;border-right:2px solid red;font-size:2pt"></td></tr><tr><td width="5"><br>
 </td><td bgcolor="#ffffff" valign="top" style="border:2px red solid" class="s12" width="63">
<img border="0" src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" width="300" height="299"></td> <td width="5"></td*>

 

代码:<*table border="0" cellspacing="0" cellpadding="0" style="border:3px #5F94C9 dashed"> <tr> <td>
<img border="0" src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" width="300" height="299"></td*>

 

代码:<*img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" width="300" height="299" style="border:6px #5F94C9 dashed"*>

 


代码:<*table border="0" cellspacing="0" cellpadding="0" style="border:8px #5F94C9 dashed"><tr><td><img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" width="300" height="299" style="border:9px #5F94C9 solid"></td></tr></table*>

 

 

代码:<*table border="0" cellspacing="0" cellpadding="0" style="border:8px #5F94C9 dotted"><tr><td><img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" width="300" height="299" style="border:9px #5F94C9 solid"></td></tr></table*>

 

 

代码:<*img style="BORDER-RIGHT: #5f94c9 6px double; BORDER-TOP: #5f94c9 6px double; BORDER-LEFT: #5f94c9 6px double; BORDER-BOTTOM: #5f94c9 6px double" height="299" src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" width="300"*>



 

代码:<*IMG
style="BORDER-RIGHT: #5f94c9 6px solid; BORDER-TOP: #5f94c9 6px solid; BORDER-LEFT: #5f94c9 6px solid; BORDER-BOTTOM: #5f94c9 6px solid"
height=299
src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg"
width=300*>


 

 


 

代码:<*IMG
style="BORDER-RIGHT: #5f94c9 6px ridge; BORDER-TOP: #5f94c9 6px ridge; BORDER-LEFT: #5f94c9 6px ridge; BORDER-BOTTOM: #5f94c9 6px ridge"
height=300
src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg"
width=299><br*>
 

 

注:使用时根据图片的实际大小,修改高和宽。另外去掉*即可!

 

 


找音乐请先使用论坛“搜索”功能

TOP

[HTML] 给图片加边框的几种方法

再添几种偶喜欢的边框!

 

凸出框

代码:
<*img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg"style="border:20 outset #ff88ff"*>

border表示边框厚度(数值大框宽),#ff88ff表示颜色这两个参数可以根据自己的喜好修改。

 

 

 

凹进框 

代码:
<*img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg"style="border:25 inset #ff88ff"*>

 


 

 凹槽框

代码:
<*img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" style="border:25 groove green" border="0"*>

边框颜色改green即可

 

 

 

 脊状框

代码:
<*img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" style="border:25 ridge green" border="0"*>

 

 

黑白效果

代码:
<*img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg" style="filter:'gray'"*>

 

 

横向渐变透明

代码:
<*img src="file:///C:/Documents%20and%20Settings/Administrator/桌面/9.jpg"style="filter=alpha(opacity=100,style=1,finishopacity=0)"*>
 

 

 

 

 


找音乐请先使用论坛“搜索”功能

TOP