網站代碼

HTLM代碼---字體的高級應用---1管理提醒：本帖被 anping6860 執行置頂操作(2009-02-23)寶藏網音樂欣賞代碼：<div style="FONT-SIZE: 60px; FILTER: Chroma(color=#FCFBFA); FLOAT: left; WIDTH: 560px; HEIGHT: 70px; BACKGROUND-COLOR: #000000"><div align="center"><font color="#fcfbfa"><strong>寶藏網音樂欣賞</strong></font></div></div>詳解：簡單的文本框是通過DIV實現的，包含背景圖片的文本框是通過將DIV嵌入到Table中實現的。主要通過對DIV的Style屬性來控制樣式FONT-SIZE: 60px; （字體大小60px）FILTER: Chroma(color=#FCFBFA); (COLOR=轉換成透明的顏色)（chroma過濾器）：色彩代碼，該顏色將轉換成透明效果；FLOAT: left; (左浮動)他使得指定元素脫離普通的文檔流而產生的特別的布局特性。並且FLOAT必需應用在塊級元素之上,也就是說浮動並不應用於內聯標籤。或者換句話來說當應用了FLOAT那麼這個元素將被指定為塊級元素。WIDTH: 560px;（寬度：560px）HEIGHT: 70px;（高度：70px）BACKGROUND-COLOR: #000000（背景顏色：黑色）div align="center"（居中對齊）font color="#fcfbfa"（字體顏色）過濾器過濾的就是這個顏色，所以字體是透明的。strong（粗體）寶藏網音樂欣賞代碼：<p align="center"><marquee style="WIDTH: 556px; HEIGHT: 150px" scrollamount="5" direction="up" behavior="alternate" height="150"><div align="center"><marquee style="WIDTH: 460px; HEIGHT: 113px" scrollamount="4" width_="460" align="center"><div align="left"><font face="隸書" color="#ff0000" size="7"><b>寶藏網音樂欣賞</b></font></div></marquee></div></marquee></p>詳解：p align="center"（內容居中）marquee style（移動屬性）WIDTH: 556px; HEIGHT: 150px（移動範圍）scrollamount="5"（移動速度：5）direction="up"（移動方向：向上）behavior="alternate"（移動方式：來回移動）height="150"（移動高度：150px）font face="隸書" color="#ff0000" size="7"（字體：隸書 字體顏色：紅色 字型大小：7）大家注意到了吧，上面字體的移動是靠兩個不一樣的移動屬性來完成的(^o^)/~寶藏網音樂欣賞寶藏網音樂欣賞代碼：<p align="center"><marquee style="WIDTH: 610px; HEIGHT: 60px" scrollamount="2" direction="down" height="60"><center><font face="隸書" color="#ff0000" size="7"><b>寶藏網音樂欣賞</b></font></center></marquee></p><center><marquee style="WIDTH: 613px; HEIGHT: 60px" scrollamount="2" direction="up" height="60"><center><font face="隸書" color="#ff0000" size="7"><b>寶藏網音樂欣賞</b></font></center></marquee></center>詳解：上面字體移動是靠兩個移動方向相反其他屬性一樣的板塊組成的效果顯現。彩色字體寶藏網代碼：<p align="center"><strong><font size="6"><font color="#ff0000">彩</font><font color="#ff8900">色</font><font color="#92c000">字</font><font color="#00c024">體</font><br /><font face="隸書"><font color="#ff0000">寶<font color="#ff8900">藏</font></font><font color="#ff8900"><font color="#92c000">網</font></font></font></font></strong></p>詳解：這個就更簡單了，把共有的字體屬性粗體、字型大小6定型之後給每個字獨立定義字體顏色得到的效果。寶藏網音樂欣賞代碼：<p align="center"><marquee style="WIDTH: 397px; HEIGHT: 200px" scrollamount="8" direction="up"><p align="center"><font face="隸書" color="#ff0000" size="7"><b>寶藏網音樂欣賞</b></font></p></marquee></p>這個就不說了，一看就知道設定了移動範圍、速度、方向向上的基本移動代碼。寶藏網音樂欣賞寶藏網音樂欣賞代碼：<p align="center"><marquee style="WIDTH: 397px; HEIGHT: 200px" scrollamount="8" direction="up"><p align="center"><font face="隸書" color="#ff0000" size="7"><b>寶藏網音樂欣賞</b></font></p></marquee></p><div align="center"><marquee style="WIDTH: 397px; HEIGHT: 200px" scrollamount="8" direction="down"><p align="center"><font face="隸書" color="#ff0000" size="7"><b>寶藏網音樂欣賞</b></font></p></marquee></div></td></tr></tbody></table></p>詳解：再加上一個方向向下其他屬性相同的模塊，就出現了上面的移動樣式。寶藏網音樂欣賞 賞欣樂音網藏寶代碼：<p align="center"><marquee width_="200" height="50"><strong><font face="華文彩雲" color="#ee110e" size="7">寶藏網音樂欣賞</font></strong></marquee><marquee direction="right" width_="200" height="50"><strong><font face="華文彩雲" color="#ee110e" size="7">賞欣樂音網藏寶</strong></marquee></font></font></p>詳解：這個是移動方向左右相反、字的順序相反的組合。寶 藏 網 音 樂 欣 賞代碼：<center><font style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 87.02%; COLOR: #0033ff; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲; HEIGHT: 120px"><marquee direction="up" behavior="alternate" width_="60" height="120"><center><b>寶</b></center></marquee><marquee direction="up" behavior="alternate" width_="60" height="120"><center><b>藏</b></center></marquee><marquee direction="up" behavior="alternate" width_="60" height="120"><center><b>網</b></center></marquee><marquee direction="up" behavior="alternate" width_="60" height="120"><center><b>音</b></center></marquee><marquee direction="up" behavior="alternate" width_="60" height="120"><center><b>樂</b></center></marquee><marquee direction="up" behavior="alternate" width_="60" height="120"><center><b>欣</b></center></marquee><marquee direction="up" behavior="alternate" width_="60" height="120"><center><b>賞</b></center></marquee></font>詳解：其他的大家都能看明白，這裡就說一下glow這個函數。當對一個對象使用「Glow」屬性後，這個對象的邊緣就會產生類似發光的效果。FILTER: glow(color: mistyrose,pink=50); (上面的字體選用的發光顏色：霧玫瑰粉色，強度：50)[ 此貼被god-king在2009-02-24 16:30重新編輯 ]本帖最近評分記錄：好評度:+10(shuaizhao) 夥計--費心了、金幣:+10(shuaizhao) 費心了~~~夥計、好評度:+5(菰獨之劍)好評度:+5(anping6860)金幣:+10(anping6860)構建你自己的區域網即時通訊平台,超速傳離線文件夾頂端 Posted: 2009-02-23 21:30 |god-king 天地仁和 平衡陰陽 長生之道

級別: 寶藏博士後

精華:1發帖: 2499威望: 0 點金幣: 3296 枚股份: 0 股好評度: 111 點朋友圈:＂℡『無名小卒』︶ㄣ註冊時間:2008-06-22最後登錄:2009-03-09引用推薦編輯只看

寶藏網音樂欣賞代碼：<div align="center"><div align="center"><div id="texture" style="WIDTH: 560px; HEIGHT: 70px"><strong><img height="1" src="https://www.getit01.com/getimg_360.php?url=http://image4.360doc.com/DownloadImg/2009/3/9/109479_2760785_7.gif" width_="372" align="right" /><img style="WIDTH: 557px; HEIGHT: 70px" height="70" src="https://www.getit01.com/getimg_360.php?url=http://image4.360doc.com/DownloadImg/2009/3/9/109479_2760785_8.gif" width_="557" align="right" /> </strong><div align="center"><div style="FONT-SIZE: 60px; FILTER: Chroma(color=#FCFBFA); FLOAT: left; WIDTH: 560px; HEIGHT: 70px; BACKGROUND-COLOR: #ffffff" align="center"><div align="center"><font color="#fcfbfa"><strong>寶藏網音樂欣賞</strong></font></div></div></div></div></div>詳解：div id="texture"(實際上div就相當於一個肉眼看不到盒子，盒子裡邊可以放入很多的文字、圖片、flash等等。而盒子裡邊內容的樣式，就全部靠div的id所對應的函數。這裡是texture)(id屬性用於定義一個元素的獨特的樣式。是一個標籤，用於區分不同的結構和內容，就象你的名字，如果一個屋子有2個人同名，就會出現混淆)這是一個不斷變化顏色的字體，一般都用texture這個函數。只要記住頭一個動畫是背景，第二個動畫就是字體變化的效果就可以了。剩下的大家應該都能看懂，不懂得參閱以前的基礎教程。寶藏網音樂欣賞代碼：<p align="center"><font color="#6911ee"></font><marquee style="WIDTH: 506px; HEIGHT: 200px" direction="up"><table cellspacing="0" cellpadding="0" align="center" background="http://image4.360doc.com/DownloadImg/2009/3/9/109479_2760785_8.gif"><tbody><tr><td style="FILTER: chroma(color=#336699)"><table align="center" bgcolor="#cc00ff"><tbody><tr><td align="center"><font style="FONT-SIZE: 40pt" face="華文琥珀" color="#336699">寶藏網音樂欣賞</font></td></tr></tbody></table></font /></td></tr></tbody></table></font /></marquee></p>詳解：這個代碼看起來很複雜，仔細一看發現就是多了兩層表格，表格中沒有邊框跟間距。第一層表格底層用了剛才的動畫，單元格過濾了字體色彩使它透明化。第二層表格用紫色作為底色。這樣看起來是不是更炫了(^o^)/~寶 藏 網 音 樂 欣 賞代碼：<center><font style="FONT-SIZE: 40pt; FILTER: glow(color: mistyrose,pink=50); WIDTH: 94.53%; COLOR: #ff6600; LINE-HEIGHT: 150%; FONT-FAMILY: 華文彩雲; HEIGHT: 200px"><marquee direction="up" behavior="alternate" width_="80" height="160"><center><b>寶</b></center></marquee><marquee direction="up" behavior="alternate" width_="80"><center><b>藏</b></center></marquee><marquee direction="up" behavior="alternate" width_="80" height="160"><center><b>網</b></center></marquee><marquee direction="up" behavior="alternate" width_="80"><center><b>音</b></center></marquee><marquee direction="up" behavior="alternate" width_="80" height="160"><center><b>樂</b></center></marquee><marquee direction="up" behavior="alternate" width_="80"><center><b>欣</b></center></marquee><marquee direction="up" behavior="alternate" width_="80" height="160"><center><b>賞</b></center></marquee></marquee /></font></center>詳解：根據不同的移動高度實現這個效果，要一個字一個字設定，不然就一起排隊跑了(^o^)/~寶藏網音樂欣賞代碼：<center><div style="FILTER: shadow(color=#FF9999<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />, strength=60); WIDTH: 397px; HEIGHT: 129px"><font face="華文彩雲" color="#ff0000" size="7"><b><center>寶藏網音樂欣賞</center></b></font><div align="left"><br /></div></div></center>詳解：Shadow屬性可以在指定的方向建立物體的投影。它的表達式是這樣的：Filter：Shadow（Color=color，Direction=direction）strength=60（投影力度：60）寶藏網音樂欣賞這個稍複雜一點(^o^)/~代碼：<center><div style="FILTER: shadow<position:absolute;top:20;width:300;filter:shadow(color=#cc66ff,direction=225);> WIDTH: 397px; HEIGHT: 129px"><font face="華文彩雲" color="#ff0000" size="7"><b><center>寶藏網音樂欣賞</center></b></font><div align="left"><br /></div></div></center>[ 此貼被god-king在2009-02-23 23:34重新編輯 ]頂端 Posted: 2009-02-23 21:30 |god-king 天地仁和 平衡陰陽 長生之道

級別: 寶藏博士後

精華:1發帖: 2499威望: 0 點金幣: 3296 枚股份: 0 股好評度: 111 點朋友圈:＂℡『無名小卒』︶ㄣ註冊時間:2008-06-22最後登錄:2009-03-09引用推薦編輯只看播放器一：

代碼如下:<DIV class=t_msgfont align=center><TABLE style="WIDTH: 270px; HEIGHT: 69px" borderColor=#cc338f cellSpacing=3 cellPadding=0 background=http://image4.360doc.com/DownloadImg/2009/3/9/109479_2760785_11.gif border=2><TBODY><TR><TD><TABLE align=center border=0><TBODY><TR><TD style="FILTER: alpha(opacity=60,style=3)"><P align=center><FONT size=4><EMBED style="FILTER: Gray" src=音樂地址 width_=273 height=35 type=audio/mpeg volume="2" autostart="1" loop="-1"> </FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV><P align=center><FONT size=4></FONT></P><P align=left><FONT color=darkgreen size=4><STRONG></STRONG></FONT></P>播放器二

代碼如下:<DIV class=t_msgfont align=center><TABLE style="WIDTH: 301px; HEIGHT: 102px" borderColor=#dee4fe cellSpacing=3 cellPadding=0 align=center background=http://image5.360doc.com/DownloadImg/2009/12/12/132336_10920638_1.jpg border=2><TBODY><TR><TD><TABLE align=center border=0><TBODY><TR><TD style="FILTER: alpha(opacity=60,style=3)"><P align=center><EMBED style="FILTER: Gray" src=音樂地址width_=300 height=70 type=audio/mpeg loop="1" autostart="1" volume="2"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>播放三：

代碼如下:<DIV class=t_msgfont id=message1177650 align=center><TABLE style="WIDTH: 422px; HEIGHT: 98px" borderColor=#dee4fe cellSpacing=3 cellPadding=0 bgColor=#000000 background=http://bbs.xxjy.net/UploadFile/2005-5/200551223859362.gif border=2><TBODY><TR><TD><TABLE align=center border=0><TBODY><TR><TD style="FILTER: alpha(opacity=60,style=3)"><P align=center><EMBED style="FILTER: Gray" src=音樂地址width_=440 height=70 type=audio/mpeg loop="-1" autostart="1" volume="2"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>播放器四：

代碼如下:<DIV class=t_msgfont align=center><DIV class=t_msgfont align=center><TABLE style="BORDER-RIGHT: #ff69b4 3px dotted; BORDER-TOP: #ff69b4 3px dotted; BORDER-LEFT: #ff69b4 3px dotted; WIDTH: 324px; BORDER-BOTTOM: #ff69b4 3px dotted; HEIGHT: 109px" cellSpacing=0 cellPadding=0 bgColor=white><TBODY><TR><TD><TABLE style="BORDER-RIGHT: #ff69b4 3px dashed; BORDER-TOP: #ff69b4 3px dashed; BORDER-LEFT: #ff69b4 3px dashed; WIDTH: 289px; BORDER-BOTTOM: #ff69b4 3px dashed; HEIGHT: 99px" cellSpacing=0 cellPadding=0 bgColor=white><TBODY><TR><TD><TABLE style="BORDER-RIGHT: #ff69b4 3px dotted; BORDER-TOP: #ff69b4 3px dotted; BORDER-LEFT: #ff69b4 3px dotted; BORDER-BOTTOM: #ff69b4 3px dotted" cellSpacing=2 cellPadding=0 bgColor=white><TBODY><TR><TD><TABLE borderColor=#ff69b4 align=center bgColor=#ffccf5 border=2><TBODY><TR><TD style="FILTER: alpha(opacity=100,style=3)"><P align=center><EMBED src=音樂地址 width_=300 height=45 type=audio/mpeg loop="1" autostart="1" volume="0"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV><DIV class=t_msgfont align=center></DIV></DIV>播放器五：

代碼如下:<DIV class=t_msgfont align=center><TABLE style="WIDTH: 259px; HEIGHT: 77px" borderColor=#dee4fe cellSpacing=3 cellPadding=0 background=http://image4.360doc.com/DownloadImg/2009/3/9/109479_2760785_12.gif border=2><TBODY><TR><TD><TABLE align=center border=0><TBODY><TR><TD style="FILTER: alpha(opacity=60,style=3)"><P align=center><EMBED style="FILTER: Gray" src=音了地址 width_=300 height=45 type=audio/mpeg loop="1" autostart="1" volume="2"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV></FONT>播放器六：

<TABLE style="WIDTH: 293px; HEIGHT: 57px" borderColor=#ff88e7 cellSpacing=3 cellPadding=0 background=http://www.cxjy.net.cn/~xujingyuan120/mw01/flowers02.gif border=2><TBODY><TR><TD><TABLE align=center border=0><TBODY><TR><TD style="FILTER: alpha(opacity=60,style=3)"><P align=center><EMBED style="FILTER: Gray" src=音樂地址width_=300 height=25 type=audio/mpeg loop="1" autostart="1" volume="2"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>播放器七：

<TABLE style="WIDTH: 109px; HEIGHT: 67px" borderColor=#dee4fe cellSpacing=3 cellPadding=0 background=http://bbs.mumayi.net/customavatars/285100.gif border=2><TBODY><TR><TD><TABLE align=center border=0><TBODY><TR><TD style="FILTER: alpha(opacity=60,style=3)"><P align=center><EMBED style="FILTER: Gray" src=音樂地址width_=100 height=35 type=audio/mpeg loop="-1" autostart="1" volume="2"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>播放器八：

<TABLE style="WIDTH: 299px; HEIGHT: 40px" align=center border=4><TBODY><TR><TD style="FILTER: alpha(opacity=60,style=3)"><P align=center><EMBED style="FILTER: Gray" src=音樂地址width_=310 height=30 type=audio/mpeg loop="-1" autostart="1" volume="2"></P></TD></TR></TBODY></TABLE></DIV><DIV class=t_msgfont align=left></DIV>
推薦閱讀：