如何使用html代码美化帖子(页 1) - □-音乐风采 - 魔兽地图吧 - 中国最具潜力的魔兽地图公益性网站

darky_5418 发表于 2007-2-4 13:22

如何使用html代码美化帖子

[size=2][color=red]转自清风论坛.供大家一起交流学习.感谢原作者gift530:以下内容为转贴内容[/color][/size]
[size=2][color=#ff0000][/color][/size]
[size=2][color=#ff0000][/color][/size]
[size=2][color=#ff0000][/color][/size]
[img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img]
[color=#ff0000][size=24px][b]学前育成：[/b][/size][/color]
[color=#3366ff]本来这些不该是我讲的，因为这些算是很基础的吧，可能还是有人不知道，就重复一次吧[/color]
[color=#3366ff]一.清风论坛的编辑模式：清风的编辑模式有两种，姑且称简洁模式和高级模式吧，在高级模式下，就可以发html贴[/color]
[color=#3366ff]二.关于剪切，复制，和粘贴[/color]
[color=#3366ff]新手大多是喜欢用右键，但是不是什么时候都能用右键的，请熟练操作快捷键——[/color]
[color=#3366ff]复制：ctrl+c[size=0pt] [size=0pt] ;'C:Ssx [/size]
[/size]剪切：ctrl+x[size=0pt] [size=0pt]_+~c*EhD" [/size]
[/size]粘贴：ctrl+v[/color]
[color=#3366ff]全选：ctrl+a[/color]
[color=#3366ff]撤消：ctrl+z[/color]
[color=#3366ff]三.关于换行，高级模式下换行有两种[/color]
[color=#3366ff]1.直接敲回车键，可以达到换行的效果，但实际上是分段！下面的一行字会和上面的一行有距离的[size=0pt] zB>^k/En [/size][size=0pt]05==Gj5 [/size][size=0pt]hjc< .!9 [/size]
2.shift+会车，这个才是真正的换行，两行紧密排在一起！[/color]
[color=#3366ff]四.有关html代码，html代码由标签构成。常见的有段落，文字，图片，多媒体，表格等等[/color]
[color=#3366ff]接下来逐一的介绍这些标签的用法[/color]
[img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img]
[color=#ff0000][size=24px][b]第一讲：文字标签[/b][/size][/color]
基本语法： [color=#ff00ff]<font>文字〈/font〉[/color]
[color=#3366ff]可通过参数改变文字的大小，颜色，字体，粗细等等，如[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#ff00ff]<FONT style="FONT-SIZE: 18px; COLOR: red; FONT-FAMILY: 黑体">文字</FONT>[/color]
效果：[font=黑体][size=4][color=#ff0000]文字[/color][/size][/font]
[size=2][color=#3366ff]注解：[/color][/size]
[size=2][color=#3366ff]style=" ; ",这里是设置文字的样式，各属性用分号隔开即可[size=0pt] *2 Gp &7. [/size]
font-size:字的大小，px是像素，说明文字大小18像素[size=0pt] dS$wg??P [/size]
color：这个不用多说了是颜色，可以用英文（red，blue,black,white,..）表示,同样可以用16进制格式表示color:#ffffff(#号加6位数字)[size=0pt] f[size=0pt] q|=%`):o{M [/size]
[/size]font-family:看都看得出是字体了[/color][/size]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[size=2][color=#3366ff]同样还有简易的方法，如[/color][/size]
[color=#ff00ff]<FONT color=#cfcf88 size=7>文字</FONT>[/color]
效果：[size=7][color=#cfcf88]文字[/color][/size]
[color=#3366ff]可以简单的不用style直接用以上的来设置文字的颜色和大小[size=0pt] )i?_cy9Hf [/size]
size:字号，1到7可以选择[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]加粗，倾斜，下划线，删除线 [/color]
[color=#3366ff]放在[color=#ff00ff]<font></font>[/color]标签中间[/color]
[color=#3366ff]加粗： [color=#ff00ff]<b></b>[/color]或者[/color][color=#ff00ff]<strong></strong>[/color]
[color=#3366ff]如: [/color][color=#ff00ff]<FONT style="FONT-SIZE: 20px"><STRONG>文字</STRONG></FONT>[/color]
效果：[b][size=5]文字[/size][/b]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]倾斜：[/color] [color=#ff00ff]<i></i>[/color]或[color=#ff00ff]<EM></EM>[/color]
[color=#3366ff]下划线：[/color] [color=#ff00ff]<u></u>[/color]
[color=#3366ff]删除线：[/color] [color=#ff00ff]<STRIKE></STRIKE>[/color]
[img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img]

[[i] 本帖最后由 darky_5418 于 2007-2-4 13:38 编辑 [/i]]

darky_5418 发表于 2007-2-4 13:23

[color=#ff0000][size=24px][b]第二讲：段落[/b][/size][/color]
标签： [color=#ff00ff]<p></p>[/color]
[color=#3366ff]可以设置段落的样式，对齐方式如[/color]
[color=#ff00ff]<P align=right>文字</P>[/color]
效果：
[align=right]文字[/align][align=left][color=#3366ff]注解：align为对齐方式，可选left，center，right，justify[/color][/align][align=left][color=#3366ff]讲到这就要和上面讲到的换行对应一下，回车符对应的是<p></p>[size=0pt] |3<xoqD0 [/size] [size=0pt] fb&QBsm.e@ [/size]
而shift+回车对应的则是换行符<br>[/color][/align][align=left][color=#3366ff][img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img][/color][/align][align=left][color=#ff0000][size=24px][b]第三讲：图片标签[/b][/size][/color][/align][align=left]基本语法： [color=#ff00ff]<img src=图片地址>[/color] （这是个不成对出现的标签）[/align][align=left]原始图片[color=#ff00ff]<IMG src="http://img141.imageshack.us/img141/2446/111ff7.jpg">[/color][/align][align=left][img]http://img141.imageshack.us/img141/2446/111ff7.jpg[/img][/align][align=left][color=#af49c8]————————————————传说中的分隔线————————————————[/color][/align][align=left][color=#3366ff]可以通过属性设置图片的大小：[/color][/align][align=left][color=#3366ff]通过样式控制大小[/color][/align][align=left][color=#ff00ff]<IMG style="WIDTH: 96px; HEIGHT: 92px" src=http://img141.imageshack.us/img141/2446/111ff7.jpg>[/color][/align][align=left][color=#444444][img]http://img141.imageshack.us/img141/2446/111ff7.jpg[/img][/color][/align][align=left][color=#af49c8]————————————————传说中的分隔线————————————————[/color][/align][align=left][color=#ff00ff][color=#3366ff]另外还可以还可以直接设置图片大小：[/color][/color][/align][align=left][color=#ff00ff]<IMG width=50 height=50 src=http://img141.imageshack.us/img141/2446/111ff7.jpg>[/color][/align][align=left][color=#ff00ff][img=50,50]http://img141.imageshack.us/img141/2446/111ff7.jpg[/img][/color][/align][align=left][color=#ff00ff][img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img][/align][align=left][color=#ff0000][size=24px][b]第四讲：超级连接标签[/b][/size][/color][/align][align=left][color=#ff00ff][color=#3366ff]语法：[/color] <A href="地址">连接对象</A>[/color][/align][align=left][color=#af49c8]————————————————传说中的分隔线————————————————[/color][/align][align=left][color=#3366ff]如[/color]： [color=#ff00ff]<A href=http://bbs.breezecn.com>清风论坛</A>[/color][/align][align=left][color=#000000]效果：[/color][url=http://bbs.breezecn.com/][color=#444444]清风论坛[/color][/url][/align][align=left][color=#af49c8]————————————————传说中的分隔线————————————————[/color][/align][align=left][color=#3366ff]同样连接对象也可以是图片[/color][/align][align=left][color=#3366ff]如：[/color] <A href=http://bbs.breezecn.com><IMG width=50 height=50 src=http://img141.imageshack.us/img141/2446/111ff7.jpg></A>[/align][align=left][color=#000000]效果：[/color][/align][align=left] [url=http://bbs.breezecn.com/][img=50,50]http://img141.imageshack.us/img141/2446/111ff7.jpg[/img][/url][/align][align=left][img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img][/align][/color]

darky_5418 发表于 2007-2-4 13:23

[color=#ff0000][size=24px][b]第五讲：播放器标签[/b][/size][/color]
[color=#3366ff]播放器代码其实是很复杂的，这里就介绍最常用的简易标签[/color]
[color=#3366ff]基本语法： [/color][color=#ff00ff]<embed src=歌曲地址>[/color]
[color=#3366ff]可设置参数：[/color]
[color=#3366ff]width=300[size=0pt] Ff+HhV% [/size]
heigth=50（当然也可以通过style样式，来设置大小）[size=0pt] ssK9]~7 [/size]
loop=-1(循环次数，-1就是无限循环，1为播放一次结束)[size=0pt] ky H{}Y,K [/size]
autostart=1/0(1为自动播放，0为手动开始)[size=0pt] @+Ev(;mw [/size]
hidden=1/0（是否隐藏播放器）[size=0pt] v@vC.XcFRa [/size]
showstatusbar=1/0（是否显示歌曲状态拦）[/color]
[color=#3366ff]常见的就是上面的那些，具体的还有下面这些[/color]
[color=#3366ff] showcontrols 属性：是否显示控制栏（包括播放控件及可选的声音和位置控件）；[size=0pt] D#M8G4y [/size]
showaudiocontrols 属性：是否在控制栏显示声音控件（静音按钮和音量滑块）；[size=0pt] AXO&6 F&' [/size]
showpositioncontrols 属性：是否在控制栏显示位置控件（包括向后跳进、快退、快进、向前跳进、预览播放列表中的每个剪辑）；[size=0pt] /}2-L7 [/size]
showtracker 属性：是否显示搜索栏；[size=0pt] naJl9% [/size]
showdisplay 属性：是否显示显示面板（用来提供节目与剪辑的信息）；[size=0pt] 5<-,/6UWT3 [/size]
showcaptioning 属性：是否显示字幕显示面板；[size=0pt] ^eg8 g [/size]
showgotobar 属性：是否显示转到栏；[size=0pt] h .1hy+ [/size]
showstatusbar 属性：是否显示状态栏；[/color]
[color=#3366ff]随便写一个：[/color]
[color=#ff00ff]<embed src=歌曲地址 width=300 height=48 showstatusbar=1 loop=-1 autostart=1>[/color]
[color=#3366ff]这就是个长为300 高48 显示状态条无限循环自动的播放器[/color]

darky_5418 发表于 2007-2-4 13:24

[color=#ff0000][size=24px][b]第六讲：移动效果（俗称走马灯）[/b][/size][/color]
[color=#3366ff]语法： [/color][color=#ff00ff]<marquee> 移动对象</marquee>[/color]
[color=#3366ff]对象可是文字，图片，表格，播放器等等[/color]
[color=#3366ff]同样可以通过设置图片大小的两种方法来设置对象活动的区域（注意，长和宽至少有一项是必须设置的）[/color]
[color=#3366ff]width=300 height=300[/color]
[color=#3366ff]或者style="width:300px;height:300px"[/color]
[color=#3366ff]常用的参数可选的：[/color]
[color=#3366ff]behavior：可以在页面上一旦出现文本时让浏览器按照设定的方法来处理文本。如果设定的方法是slide，那么文本就移动到文档上，并停留在页边距上。如果设定为alternate，则文本从一边移动到另一边。如果设定为scroll，文本将在页面上反复滚动。本属性不是必须使用的。可以设定的值有：silide，alternate，scroll。　[/color]
[color=#3366ff]direction：用于设定文本滚动的方向，可以设定的值有:left,right ,up,down。此属性不是必须使用的。[/color]
[color=#3366ff]scrollamount：用于设定每个连续滚动文本后面的间隔，用来控制移动速度的，该间隔用像素表示。此属性不是必须使用的。[/color]
[color=#3366ff]scrolldelay：用于设定两次滚动操作之间的间隔时间，该时间以毫秒为单位。同样是用来控制滚动速度的,数值越大，速度越慢，如无特别的需要，推荐使用上边的书香控制！[/color]
[color=#3366ff]如： [/color][color=#ff00ff]<marquee width=100 height=100 direction=up> 移动对象</marquee>[/color]
移动对象
[img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img]
[color=#ff0000][size=24px][b]第七讲：文本框标签（文本区）[/b][/size][/color]
[color=#3366ff]基本语法： [/color][color=#ff00ff]<TEXTAREA></TEXTAREA>[/color]
[color=#ff00ff]<TEXTAREA style="WIDTH: 100px; HEIGHT: 100px">文字</TEXTAREA>[/color]
[color=#3366ff]好像清风里直接贴文本框有点小问题，请嵌入表格中使用...没有一定基础不推荐使用这组标签！！[/color]
[color=#3366ff][/color]
[color=#3366ff][/color]
[size=24px][b]第八讲：表格标签[/b][/size]
[color=#3366ff]终于讲到了这个，着是最复杂的一个了，不单是语法，更是效果最多样化的，可以说html贴最精华的部分也就在这了[/color]
[color=#ff00ff]<TABLE>[/color]
[color=#ff00ff]<TBODY>[/color]
[color=#ff00ff]<TR>[/color]
[color=#ff00ff]<TD></TD></TR></TBODY></TABLE>[/color]
[color=#3366ff]可以看出是四层的标签[/color]
[color=#3366ff]<td>这里控制单元格属性[size=0pt] jp)}:UA [/size] [size=0pt] 8pw%t0t(S [/size] [size=0pt] (O c`v) [/size]
<tr>控制行属性[size=0pt] KS2}Kd [/size] [size=0pt] GsY7> [/size] [size=0pt] K_N:hU=2! [/size]
<table>控制表格属性[/color]
[color=#3366ff]width:宽度（适用于table和td）[size=0pt] 5$4 >?`o' [/size] [size=0pt] [i!3+;Rf 0 [/size] [size=0pt] hxoG [/size]
height：高度（适用于table，tr，td）[size=0pt] 8mh}mT Ge [/size] [size=0pt] Ed32^(Ge [/size] [size=0pt] [j7Dr}i [/size]
cellSpacing:单元间距，单元格与表格边线、两单元格之间的距离（适用与table）[size=0pt] &h*}R5SV [/size] [size=0pt] A~4'< W [/size] [size=0pt] =Ple T[9 [/size]
cellPadding：单元边距，单元格内的内容距单元格边线的距离（适用于table）[size=0pt] 0WKh.~ [/size] [size=0pt] (\`[KILu [/size] [size=0pt] kWB;R60p [/size]
border：边框厚度（适用于table）[size=0pt] ?4bx!}0 [/size] [size=0pt] 2`J:R^Kj [/size] [size=0pt] 8V^yMg [/size]
bgcolor:背景色（适用于table和td，两个可同时设置）[size=0pt] 0J~ O5o8f [/size] [size=0pt] .vF-Q3SS&^ [/size] [size=0pt] hiyhb,0LD [/size]
background：背景图片（实用于table和td，两个可同时设置，不要与背景色重复使用）[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]下面举几个简单的例子：[/color]
[color=#3366ff]1.最简单的在图片上写字[/color]
[color=#3366ff][color=#ff00ff]<table bordercolor=#841a00 height=200 cellspacing=2 width=400 background=http://www.ne.jp/asahi/syaraku/kichinyado/hana/ayame1/ayame11/ayame12.jpg border=2>[/color][/color]
[color=#3366ff][color=#ff00ff]<tbody>[/color][/color]
[color=#3366ff][color=#ff00ff]<tr>[/color][/color]
[color=#3366ff][color=#ff00ff]<td>输入文字 </td></tr></tbody></table>[/color][/color]
[color=#000000]效果：[/color]
[table=400][tr][td]输入文字 [/td][/tr][/table]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]如不需要边框的话边框厚度设置成0就好了，就会出现下面的效果：[/color]
[color=#ff00ff]<table bordercolor=#841a00 height=200 cellspacing=2 width=400 background=http://www.ne.jp/asahi/syaraku/kichinyado/hana/ayame1/ayame11/ayame12.jpg border=0>[/color]
[color=#ff00ff]<tbody>[/color]
[color=#ff00ff]<tr>[/color]
[color=#ff00ff]<td>输入文字 </td></tr></tbody></table>[/color]
[table=400][tr][td]输入文字 [/td][/tr][/table]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]2.背景填充色：[/color]
[color=#ff00ff]<TABLE borderColor=gray height=150 cellSpacing=10 width=400 bgColor=yellow border=30>[/color]
[color=#ff00ff]<TBODY>[/color]
[color=#ff00ff]<TR>[/color]
[color=#ff00ff]<TD bgColor=green>输入文字</TD></TR></T></TBODY></TABLE>[/color]
[table=300][tr][td]输入文字[/td][/tr][/table]

darky_5418 发表于 2007-2-4 13:26

[color=#ff0000][size=24px][b]第九讲：对齐方式[/b][/size][/color]
[color=#3366ff]讲了上面的那么多，大家应该注意到一个很重要的问题，就是对齐方式的问题，对齐方式会直接影响到实际效果：[/color]
[color=#3366ff]align：横向对齐常用到有left，right,center[/color]
[color=#3366ff]因为适用对象很多（主要有<p>,<table><td>,<marquee>）,所以单独拿出来讲！[/color]
[color=#3366ff]如： [color=#ff00ff]<p align=center>段落内容<p>[/color][size=0pt] Bf5]ssOd [/size] [size=0pt] 3ni'\:M [/size]
（段落内可以是任何内容，表格，文字，播放器，图片，走马灯，段落等等）[/color]
[color=#3366ff]如放在 <talbe>内，则可以控制整个表格相对于外部的对齐方式[size=0pt] `?@ ~x!E\ [/size] [size=0pt] b``^%ZFC2 [/size] [size=0pt] VnG }^)0Z [/size]
放字<td>内则控制单元格内部的内容相对表格的对齐方式[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]valign：纵向对齐  常用到的属性有top,center,bottom[/color]
[color=#3366ff]适用对象(<table>,<td><marquee>)[/color]
[color=#3366ff]如： [/color][color=#ff00ff]<td valign=top>段落内容<td>[/color]
[color=#3366ff]写到这，标签基本上算是讲完了！！！[/color]
[img]http://www.mvzz.com/sck/fgx/fgx10/04.gif[/img]
[color=#ff0000][size=24px][b]第十讲：滤镜效果[/b][/size][/color]
[color=#3366ff]帖子讲到这呢，才有点味道了，因为从这开始，才能出一些比较好看的效果！！[/color]
[color=#3366ff]先从无参数的滤镜开始[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]1.横向翻转[/color]
基本语法：[color=#ff00ff]style="filter: fliph()"[/color]
[color=#3366ff]主要适用范围：文字<font>,图片<img>,播放器<embed>等等如：[/color]
[color=#ff00ff]<font style="filter: fliph(); width: 100px">大家一起学!</font>[/color]
[color=#000000]效果：[/color]
大家一起学!
[color=#3366ff]注意一下，给文字加滤镜时，样式里要给出文字区域的大小！！！[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]2.纵向翻转[/color]
[color=#3366ff]基本语法：基本语法：[/color][color=#ff00ff]style="filter: flipv()"[/color]
[color=#3366ff]主要适用范围：文字<font>,图片<img>,播放器<embed>等等如：[/color]
[color=#ff00ff]<IMG style="filter: flipv()" src=http://img246.imageshack.us/img246/5696/1111cs1.jpg>[/color]
[img]http://img246.imageshack.us/img246/5696/1111cs1.jpg[/img]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]3.黑白效果[/color]
[color=#3366ff]基本语法：[/color][color=#ff00ff]style="filter: gray()"[/color]
[color=#3366ff]主要适用范围：图片<img>,播放器<embed>，表格<table>，单元格<td>[/color]
[color=#3366ff]例如： [/color][color=#ff00ff]<embed  style="filter: xray()" width=300 height=28 autostart=false src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma>[/color]

[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]4.x光效果（黑白底片）[/color]
[color=#3366ff]基本语法：[/color][color=#ff00ff]style="filter: xray()"[/color]
[color=#3366ff]主要适用范围：图片<img>,播放器<embed>，表格<table>，单元格<td>[/color]
[color=#3366ff]例如： [/color][color=#ff00ff]<IMG style="filter: xray()" src=http://img246.imageshack.us/img246/5696/1111cs1.jpg>[/color]
[img]http://img246.imageshack.us/img246/5696/1111cs1.jpg[/img]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]5.反色效果（彩色底片）[/color]
[color=#3366ff]基本语法：[/color][color=#ff00ff]style="filter: xray()"[/color]
[color=#3366ff]主要适用范围：图片<img>,播放器<embed>，表格<table>，单元格<td>[/color]
[color=#3366ff]例如： [/color][color=#ff00ff]<embed style="filter: invert()" src=http://file1.baizhao.com/hard0/user310/310483/mydisk/fenzhen.wma width=300 height=50 showstatusbar=true autostart=0>[/color]
[color=#000000]效果：[/color]

[color=#3366ff]上面讲到的都是些无参数的滤镜，下面将到的几个是才参数的滤镜[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]6.羽化效果（半透明效果）[/color]
[color=#3366ff]基本语法：[/color][color=#ff00ff]style="filter: alpha(opacity=10,finishopacity=70,style=3)"[/color]
[color=#3366ff]opacity属性：设置起始透明度，取值0至100之间的任意数值，100表示完全不透明；finishopacity属性为终止透明度，缺省为0[size=0pt] X7;S [/size] [size=0pt] WMPBEyI [/size]
style属性：设置渐变风格，0表示均匀渐变，1表示线性渐变，2表示放射渐变，3表示直角渐变，缺省值为0。[/color]
[color=#3366ff]主要适用范围：文字<font>,图片<img>,播放器<embed>，表格<table>，单元格<td>[/color]
[color=#3366ff]如： [/color][color=#ff00ff]<img style="filter: alpha(opacity=10,finishopacity=70,style=3)" src="http://img141.imageshack.us/img141/2446/111ff7.jpg">[/color]
效果：
[img]http://img141.imageshack.us/img141/2446/111ff7.jpg[/img]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]7.发光效果：[/color]
[color=#3366ff]基本语法：[/color][color=#ff00ff]style="filter:glow(color=red,strength=4)"[/color]
[color=#3366ff]color属性：光晕颜色；strength：光晕的厚度。[/color]
[color=#3366ff]主要适用范围：文字<font>,图片<img>,播放器<embed>，表格<table>[/color]
[color=#3366ff]如： [/color][color=#ff00ff]<FONT style="FILTER: glow(color=red,strength=4); WIDTH: 200px" color=white>大家一起学</FONT>[/color]
效果：[color=red,strength=4);]大家一起学[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]8.阴影效果”[/color]
[color=#3366ff]基本语法：[/color][color=#ff00ff]style="filter:shadow(color=red,direction=40)"[/color]
[color=#3366ff]color属性：阴影颜色；[size=0pt] D(V=P2{ [/size] [size=0pt] - Av^*:C [/size] [size=0pt] :nA'4WF{ [/size]
direction属性：阴影角度，值取0至360度。[/color]
[color=#3366ff]主要适用范围：文字<font>,图片<img>,播放器<embed>，表格<table>[/color]
[color=#3366ff]如： [/color][color=#ff00ff]<FONT style="FONT-SIZE: 15px; FILTER: shadow(color=red,direction=40); WIDTH: 150px; HEIGHT: 20px">大家一起学!</FONT>[/color]
效果：[color=red,direction=40);][size=15px]大家一起学![/size][/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
9.模糊效果
[color=#3366ff]语法：[/color][color=#ff00ff]style="filter: blur(add=0,direction=30,strength=5)"[/color]
[color=#3366ff]其add属性是用来确定是否在运动模糊中使用原有目标，其值为0和1，0表示“否”，用于文字，1表示“是”，用于图像；direction属性是模糊移动的角度，其值为0至360度；strength属性是模糊的强度。[/color]
[color=#3366ff]主要适用范围：文字<font>,图片<img>[/color]
[color=#3366ff]如： [/color][color=#ff00ff]<FONT style="FONT-SIZE: 30px; FILTER: blur(add=0,direction=30,strength=5); WIDTH: 186px; HEIGHT: 42px" color=#4229a3>大家一起学!</FONT>[/color][color=#000000] [/color]
效果：
[color=#ff0000][color=#4229a3][size=30px]大家一起学![/size][/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]10.波纹效果[/color]
[color=#3366ff]语法：[/color][color=#ff00ff]style="filter: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30)"[/color]
[color=#3366ff]add属性：布尔型，0或1，0表示将原始对象加入最后效果中，1则反之；[size=0pt] 4C`n2{i [/size] [size=0pt] (-J0WJ [/size]
freq属性：决定显示的频率，即应出现多少个波形；[size=0pt] BJr3/ ]r [/size] [size=0pt] >itE/"$ [/size]
phrase属性：决定波形的形状，值取0至360之间；[size=0pt] ? /4%7V\ [/size] [size=0pt] \M%wem [/size]
strength属性：形状变化的强度[size=0pt] Lm6U``2 [/size] [size=0pt] g0;*A1V [/size]
lightstrength属性：光线变化的强度[/color]
[color=#3366ff]主要适用范围：文字<font>,图片<img>[/color]
[color=#3366ff]如: [/color][color=#ff00ff]<FONT style="FONT-SIZE: 30px; FILTER: wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30); WIDTH: 190px; HEIGHT: 44px" color=#c43cc4>大家一起学!</FONT>[/color]
[color=#000000]效果：[size=0pt] |K{5W(t. [/size] [size=0pt] $sld_ ]F [/size]
[/color][color=#c43cc4][size=30px]大家一起学![/size][/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]11.透明效果（选色透明）[/color]
[color=#3366ff]语法：[/color][color=#ff00ff]style="FILTER:Chroma( Color=#CCCCCC)"[/color]
[color=#3366ff]作用效果：如果滤镜中的像素有颜色与设定的颜色相同，则该像素变为透明（包括图片的像素）。例如使用的语句是 FILTER:Chroma( Color=#CCCCCC) ，则滤镜作用范围内所有颜色为“#CCCCCC”的像素都变为透明。[/color]
[color=#3366ff]主要适用范围：文字<font>,播放器<embed>，[/color]
[color=#3366ff]如： [/color][color=#ff00ff]<embed  style="filter: Chroma(color=black)" width=300 height=28 autostart=false src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma showstatusbar=true >[/color]
[color=#000000]效果：[size=0pt] HE5%u}< [/size] [size=0pt] PUt(hn> 7 [/size]
[/color]
[/color]

darky_5418 发表于 2007-2-4 13:26

[color=#ff0000][size=24px][b]第十一讲：运用实例[/b][/size][/color]
[color=#3366ff]基本的一些标签及语法算是讲得差不多了，光说不练嘴把式，还得实战演练一番！！[/color]
[color=#3366ff]这里先推荐一款功能在线编辑器[/color]：[url=http://gift530.xinwen365.net/gift/editor.txt][url=http://gift530.xinwen365.net/gift/editor.txt][url=http://gift530.xinwen365.net/gift/editor.txt][url=http://gift530.xinwen365.net/gift/editor.txt][url=http://gift530.xinwen365.net/gift/editor.txt][color=#0000ff]http://gift530.xinwen365.net/gift/editor.txt[/color][/url][/url][/url][/url][/url]
[color=#3366ff]功能比较强大，很多直接就可以编辑，不用到代码模式下修改！可以用它直接生成表格，图片，文本框，以及设置颜色，对齐格式！[/color]
[color=#3366ff]首先要说的是个总规则：[/color]
[color=#3366ff]1.代码模式下：标签内的属性控制该标签内的内容（如段落<p>标签里面的属性控制段落的属性，当然这个段落可以由“文字，图片，表格，播放器，走马灯，段落，或者这些任意组合”构成）[/color]
[color=#3366ff]2.可视编辑模式下：请遵循先选取，后操作的原则，选区尤为重要，大多时候无法达到预期的效果，都是选区不正确。[/color]
[color=#3366ff]3.如使用清风以外的在线编辑器的话，可视模式下选区比较重要，在完成编辑后，如果实在没有把握选中的话，请使用ctrl+a全部选中！[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
例一：水纹倒影
效果：
[img=200,200]http://img141.imageshack.us/img141/2446/111ff7.jpg[/img][size=0pt] hN{-OvK [/size] [size=0pt] 0cc\g< 9z [/size]
[img=200,150]http://img141.imageshack.us/img141/2446/111ff7.jpg[/img]
[color=#3366ff]首先我们解读一下：明显这是两张图片，上面的图片没有做什么效果。至于倒影，首先我们要给它来个纵向翻转，就可以把它倒过来了；接着呢，因为反射的关系，颜色会变淡，那么我们羽化一下，就可以让它变淡；最后一步，因为水波的关系，图片会有点波动，我们再做一个波形变化，就能实现下面一张图片的效果了，当然图片高度还得设置得比上面小一点！[/color]
[color=#3366ff]怎么让两张图片紧密的排在一起呢，前面讲到了，换行就可以了即<br>,那么全部的代码就是：[/color]
[color=#ff00ff]<IMG height=200 src=http://img141.imageshack.us/img141/2446/111ff7.jpg width=200 ><BR>[/color]
[color=#ff00ff]<IMG style="FILTER: Wave(Add=0, Freq=2, LightStrength=5, Phase=0, Strength=3) flipv() alpha(opacity=60,finishopacity=60,style=0)" height=150 src=http://img141.imageshack.us/img141/2446/111ff7.jpg width=200>[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
例二：播放器效果1
[table][tr][td] [/td][/tr][/table]
我们来解读一下：首先播放器显示的只有状态栏，那么我们要用showstatusbar="true"显示出状态栏，并且控制大小让它只现实状态栏，高度为24；接着我们让这个播放器变成透明的，那么加个透镜，让黑色变成透明的style="FILTER: Chroma(color=black)"，状态条的背景为black；最后呢在把这个播放器嵌入一个表格，那么给表格加个背景的话，就能显示出背景了！
解读之后，我们就可以写出以下的代码代码：
[color=#ff00ff]<TABLE cellSpacing=0 cellPadding=0 background=http://img1.3lian.com/img2008/03/020/gifbj071.gif border=0>[/color]
[color=#ff00ff]<TBODY>[/color]
[color=#ff00ff]<TR>[/color]
[color=#ff00ff]<TD><EMBED style="FILTER: Chroma(color=black)" src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma width=300 height=24 type=audio/x-ms-wma autostart="false" showstatusbar="true"> </TD></TR></TBODY></TABLE>[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]例三：播放器效果2[/color]
[table][tr][td] [/td][/tr][/table]
[color=#3366ff]我们来解读：首先播放器的基本设置和上面是一样的，那么怎么让播放器的字变成红色的呢？首先找到播放器原来字体的颜色#89A4FF（偶用抓色工具抓出来的），让这个颜色变成透明的FILTER: Chroma(color=#89A4FF)；那么背景是黑条怎么办呢，我们给播放器加个反色invert() ；最后把播放器嵌在一个红色背景的表格里，就能得到上面的效果了[/color]
[color=#3366ff]我们就可以得到下面的一段代码：[/color]
[color=#ff00ff]<TABLE cellSpacing=0 cellPadding=0 bgColor=red border=0>[/color]
[color=#ff00ff]<TBODY>[/color]
[color=#ff00ff]<TR>[/color]
[color=#ff00ff]<TD><EMBED style="FILTER: Chroma(color=#89A4FF) invert()" src=http://wma.mtvtop.net/5671/mtvtop_31/wanglingroudangwomzaiyiqi1/005.wma width=300 height=24 type=audio/x-ms-wma showstatusbar="true" autostart="false"> </TD></TR></TBODY></TABLE>[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]例四：金属光泽[/color]
[table=300][tr][td][align=center][color=#ff00ff]大家一起学[/color][/align][/td][/tr][/table]
[color=#3366ff]解读一下：很明显这里出现了一个颜色变化，我们怎么实现呢，可以用波形来实现，[size=0pt] V_nW-(GI7X [/size] [size=0pt] 5hq"o"|2 [/size] [size=0pt] *oW7WRm [/size]
style="FILTER: wave(add=0,lightstrength=40,strength=0,freq=1,phrase=0)" ；我们把频率设置成1，那么就只会出现一次颜色变换，strength设置为0，那么形状不会发生改变，只要合理的设置颜色和光线变化强度的话就能实现以上的效果了[/color]
[color=#3366ff]我们可以用以下代码实现上面的效果：[/color]
[color=#ff00ff]<TABLE style="FILTER: wave(add=0,lightstrength=40,strength=0,freq=1,phrase=0)" height=30 cellSpacing=0 cellPadding=0 width=300 bgColor=#c0c0c0 border=0>[/color]
[color=#ff00ff]<TBODY>[/color]
[color=#ff00ff]<TR>[/color]
[color=#ff00ff]<TD>[/color]
[color=#ff00ff]<P align=center><FONT color=#ff00ff>大家一起学</FONT></P></TD></TR></TBODY></TABLE>[/color]
[color=#af49c8]————————————————传说中的分隔线————————————————[/color]
[color=#3366ff]例五：立体边框表格[/color]
[color=#3366ff]这个相对比较简单一点，发个代码解释一下就可以了[/color]
[color=#ff00ff]<table height=150 cellspacing=10 bordercolordark=#722c2e width=200 bordercolorlight=#e5bcbd bgcolor=#B8E1D8 border=1>[/color]
[color=#ff00ff]<tbody>[/color]
[color=#ff00ff]<tr>[/color]
[color=#ff00ff]<td>输入文字</td></tr></tbody></table>[/color]
[table=200][tr][td]输入文字[/td][/tr][/table]
[color=#3366ff]bordercolordark:暗线颜色[size=0pt] B+<]CJmpEZ [/size] [size=0pt] Lxi#NQ79i [/size] [size=0pt] 1vB(T!9% [/size]
bordercolorlight:明线颜色[/color]
[color=#3366ff]这两个颜色设置成一样的就和普通边框没什么区别，当设置深浅不一样，就会出现立体效果，当然不一定是要暗线的颜色一定更深，两个颜色对调的话，分别会出现镂刻和浮雕的效果。你们可以自己尝试一下！！[/color]

darky_5418 发表于 2007-2-4 13:27

再占几个位置:lol

darky_5418 发表于 2007-2-4 13:27

首页占位:lol :lol

darky_5418 发表于 2007-2-4 13:28

再占一个:loveliness:

darky_5418 发表于 2007-2-4 13:28

最后一个:loveliness:

gehaobo1985 发表于 2007-2-5 00:11

DK你好狠啊,从屋顶到地面,从沙发到板凳都给占了,偶连打地铺的地方都没了.........

hisazabi 发表于 2007-2-5 10:00

我好想把我LS的贴删了然后自己占个位置:lol

永恆De神話 发表于 2007-2-5 11:03

要删吗? 交给我就行了 - -

darky_5418 发表于 2007-2-5 11:39

谁敢删个我试试看?:funk:

伊贺丸 发表于 2007-2-8 09:19

额占楼
对我这种用Dreamweaver的人来说不学这个是不行的。。

虚空之男 发表于 2007-2-8 19:22

不行呀....我试过了~~不行哦~~

猫行彼界 发表于 2007-2-13 18:15

最后占一楼;P
好
发表下感言
。。。。。真8错;P

MT-大佬 发表于 2007-2-14 10:53

哇~~~

还可以啦，都说出来了

Mythology 发表于 2007-2-14 11:53

wym163 发表于 2007-2-20 06:53

噢有意义袄

噢有意义袄
级别太低了罐吧

314529995 发表于 2007-2-20 22:49

这些东西~我找会了:L

314529995 发表于 2007-2-20 23:40

切切~~~~~~~:lol :lol :lol

小蜜发表于 2007-3-11 17:41

楼主YD的说,偶找的就是这个东东

ti4600 发表于 2007-3-15 19:21

好复杂:L :L :L :L :L :L :L :L

BoA彬 发表于 2007-3-20 22:56

LZ辛苦拉哈```

xhzb567 发表于 2007-4-8 11:22

**** Hidden Message *****

心随流水到天涯 发表于 2007-4-11 20:25

这方面的内容我在一门叫做“网页设计与制作”的选修课上听过~~~~但是那门课我基本是在睡觉中度过的…………汗~~~~~最后考试的时候有一道题居然是“请谈谈你对灰色的看法”~~~我晕~~我答的是我对灰色没有任何看法………………哈哈 ~~最后成绩是优秀~~~~侥幸~~~~~~~~

darky_5418 发表于 2007-4-12 19:15

楼上的老师看来更优秀!!;P

glgm9527 发表于 2007-5-7 14:27

好

恩好不过自己懒得弄顶你下吧!!!

何建军 发表于 2007-5-29 13:37

虽然我文化低看不懂这些~但还是感谢LZ的辛苦:lol

独孤浪客 发表于 2007-6-19 02:21

啊啊，还有这么叼哈。。

feelerly 发表于 2007-12-24 10:55

跟LZ学习了~~网页代码偶很菜的

[[i] 本帖最后由 feelerly 于 2007-12-24 10:56 编辑 [/i]]

永恆De神話 发表于 2007-12-25 08:32

:( 偶也很菜的说- -

sxlrose 发表于 2007-12-25 15:20

日~~~~

htm代码禁用！！

Trevors 发表于 2008-2-16 12:53

原来这里有这么棒的东西..

Victor 发表于 2008-3-27 20:53

HTML代码素很强大的东东

猫行彼界 发表于 2008-3-28 16:38

(葱头:16) 不过很多地方都禁用

剑魔发表于 2008-6-30 00:32

<A href=http://ed6sc.uuu9.com><IMG width=400 height=131 src=http://bbs.uuu9.com/attachments/day_080629/20080629_c19952778dcb8335e5bdnvzWgHgOzHQN.jpg></A>

[[i] 本帖最后由剑魔于 2008-6-30 00:33 编辑 [/i]]

mengyu1101 发表于 2008-7-19 14:28

[font=仿宋_GB2312][size=5][align=center][b][color=Red]太强大鸟
占了10楼[/color][/b][/align][/size][/font]

沧狼发表于 2008-9-3 13:09

什么和什么啊..
又没有可以写HTML的权限...

页: [1] 2

魔兽地图吧's Archiver