无损格式发烧友天地百事高游戏站
‹‹ 上一主题 | 下一主题 ››
 84 123456
发新话题
打印

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

天下一家

VIP会员

Rank: 6Rank: 6
1# 大 中 小 发表于 2006-1-30 11:41  只看该作者

【天下一家谈 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 编辑 ]

TOP

天下一家

VIP会员

Rank: 6Rank: 6
2# 大 中 小 发表于 2006-1-30 11:45  只看该作者

百事高论坛

复制内容到剪贴板
代码:
<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 编辑 ]

TOP

天下一家

VIP会员

Rank: 6Rank: 6
3# 大 中 小 发表于 2006-1-30 11:53  只看该作者
百事高在线音乐网
百 事 高 音 乐 论 坛

复制内容到剪贴板
代码:
<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

天下一家

VIP会员

Rank: 6Rank: 6
4# 大 中 小 发表于 2006-1-30 11:58  只看该作者
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 编辑 ]

TOP

天下一家

VIP会员

Rank: 6Rank: 6
5# 大 中 小 发表于 2006-1-30 12:16  只看该作者

欢迎光临百事高

复制内容到剪贴板
代码:
[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 编辑 ]

TOP

天下一家

VIP会员

Rank: 6Rank: 6
6# 大 中 小 发表于 2006-1-30 12:22  只看该作者
一家整理
<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 编辑 ]

TOP

天下一家

VIP会员

Rank: 6Rank: 6
7# 大 中 小 发表于 2006-1-30 13:10  只看该作者
百事高论坛欢迎您！
<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

天下一家

VIP会员

Rank: 6Rank: 6
8# 大 中 小 发表于 2006-1-30 13:45  只看该作者
百事高论坛欢迎您
<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

gjb老头子

游客
9# 大 中 小 发表于 2006-2-1 06:56  只看该作者
我想要啊谢谢

TOP

天下一家

VIP会员

Rank: 6Rank: 6
10# 大 中 小 发表于 2006-2-3 09:45  只看该作者

[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

天使之翼

Wandering

银牌会员

Rank: 6Rank: 6

Key to the Paradize
11# 大 中 小 发表于 2006-2-3 11:25  只看该作者
谢谢啦！
Who can save ***********? ***** **! Follow *********, nothing else!

TOP

maggie

中级会员

Rank: 3Rank: 3
12# 大 中 小 发表于 2006-2-3 23:08  只看该作者
设计的好漂亮呢~
谢谢
百事高音乐论坛

TOP

ensing

中级会员

Rank: 3Rank: 3
13# 大 中 小 发表于 2006-2-11 22:10  只看该作者
<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

听者有心

论坛功勋

Rank: 8Rank: 8
14# 大 中 小 发表于 2006-2-13 10:54  只看该作者

[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

听者有心

论坛功勋

Rank: 8Rank: 8
15# 大 中 小 发表于 2006-2-13 10:55  只看该作者

[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

‹‹ 上一主题 | 下一主题 ››
 84 123456
发新话题