孤獨者 - 心在黑暗裡旅行 ...... ... 至尊會員
遊蕩的過客 - 枉入紅塵若許年 .. ... - UID
- 18273
- 帖子
- 12122
- 精華
- 1273
- 積分
- 240737
- 金幣
- 492641
- 威望
- 5001
- 推廣
- 0
- 閱讀權限
- 99
- 來自
- 尋覓中
- 註冊時間
- 2006-6-24
- 最後登錄
- 2015-5-27
|
1樓
大 中
小 發表於 2006-11-15 21:10
《資訊》 網頁設計的一些代碼
1.字體樣式引用:<div style="text-align:justify; text-justifyistribute-all-lines;">中文兩端對齊</div>
<p><span style="text-transform: capitalize;">first letter capitalize(第一個字母大寫)</span></p>
<p><span style="text-transform: uppercase">text-transform: uppercase(全部大寫)</span></p>
<p><span style="font-variant: small-caps">font-variant: small-caps(小型大寫)</span></p>
<p><span style="text-decoration: line-through">text-decoration: line-through(刪除線)</span></p>
<p><span style="text-decoration: underline">text-decorationunderline(下劃線)</span></p>
<p><span style="text-decoration: overline">text-decoration: overline(上劃線)</span></p>
<p><span style="text-decoration: blink ">text-decoration: blink (閃爍)</span></p>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代碼" onClick= 'window.location = "view-source:" + window.location.href'></div> [運行]中文兩端對齊
first letter capitalize(第一個字母大寫)
text-transform: uppercase(全部大寫)
font-variant: small-caps(小型大寫)
text-decoration: line-through(刪除線)
text-decorationunderline(下劃線)
text-decoration: overline(上劃線)
text-decoration: blink (閃爍)
2.層的切換引用:<html>
<head>
<title>層的切換-訪客無法瀏覽此圖片或連結,請先 註冊 或 登入會員 。</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<STYLE type=TEXT/CSS>
#layer1 { FILTER: revealTrans(Duration=1.0,Transition=23) visibility:hide}
#layer2 { FILTER: revealTrans(Duration=1.0,Transition=23) visibility:hide}
</STYLE>
<script>
function set_menu(x)
{
if (x.style.visibility=="hidden")
{
x.filters.revealTrans.apply();
x.style.visibility="visible";
x.filters.revealTrans.play();
}
else{
x.filters.revealTrans.apply();
x.style.visibility="hidden" ;
x.filters.revealTrans.play();
}
}
</script>
<p OnClick="set_menu(layer1);set_menu(layer2)">點擊</p>
<div id="layer1" style="position:absolute; width:200px; height:115px; background-color: #336699; layer-background-color: #33FFFF; border: 1px none #000000; left: 50; top: 50; visibility: visible"></div>
<div id="layer2" style="position:absolute; width:200px; height:115px; background-color: #FF9900; layer-background-color: #FF9900; border: 1px none #000000; left: 50; top: 50; visibility: hidden"></div>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代碼" onClick= 'window.location = "view-source:" + window.location.href'></div> 3.CSS藝術字引用:<style type="text/css">
<!--
.title_1 { font-family: "Verdana"; font-size: 12px; color: #E1E4EC; width: 100%; filter: DropShadow(Color=#213C63, OffX=1, OffY=1)}
.text { font-family: "Verdana"; font-size: 12px; line-height: 16px; color: #666699; text-decoration: none}
.unnamed1 { filter: DropShadow(Color=#FFFFFF, OffX=1, OffY=1)}
-->
</style>
<table width="500" border="0" cellspacing="1" cellpadding="0" bgcolor="#8C96B5" align="center">
<tr>
<td bgcolor="#FFFFFF">
<table bordercolordark=#ffffff width="100%"
bordercolorlight=#000000 border=0 cellspacing="1" cellpadding="0">
<tr bgcolor="#8C96B5">
<td colspan=2 bgcolor="#8C96B5" width="100%" height="16">
<div align="center" class="title_1">..:: 巧用CSS製作藝術字 ::..</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">如果靈活應用CSS各種濾鏡的特點並加以組合,我們可以得到許多意想不到的效果。這是一些效果示範,供各位參考。</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">
<table align=center border=0 width="200" height="50">
<tr>
<td style="FILTER: blur(direction=135,strength=8)" align="center"><font face="黑體" color="#8C96B5" size="6"><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
用blur濾鏡做出的效果,代碼如下:<br>
<b>FILTER: blur(direction=135,strength=8)</b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">
<table align=center border=0 width="200" height="50">
<tr>
<td style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align="center"><font face="黑體" color="#8C96B5" size="6"><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
用dropshadow濾鏡做出的效果,代碼如下:<br>
<b>FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)</b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">
<table align=center border=0 width="200" height="50">
<tr>
<td style="FILTER: glow(color=#B4BBCF,strength=5)" align="center"><font face="黑體" color="#8C96B5" size="6"><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
用glow濾鏡做出的效果,代碼如下:<br>
<b>FILTER: glow(color=#B4BBCF,strength=5)</b></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">
<table align=center border=0 width="200" height="50">
<tr>
<td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align="center"><font face="黑體" color="#8C96B5" size="6"><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
這個效果用到了兩種濾鏡:shadow和alpha,代碼如下:<br>
<b>FILTER: alpha(opacity=100,finishiopacity=0,style=1)<br>
shadow(color=#8C96B5,direction=135)</b> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">
<table align=center border=0 width="200" height="50">
<tr>
<td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑體" color="#8C96B5" size="6"><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
這個效果也用到兩個濾鏡mask和shadow,代碼如下:<br>
<b>FILTER: mask(color=#E1E4EC)<br>
shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)</b><br>
<br>
注意:mask的顏色要和網頁背景色一致,字體的顏色由shadow決定。</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">
<table align=center border=0 width="200" height="50">
<tr>
<td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font face="黑體" color="#8C96B5" size="6"><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
如果說上面的效果是陰文的話,那麼這個效果的應該算是陽文了,用兩個濾鏡實現mask和dropshadow,注意mask的顏色要和網頁背景色一致,或者把mask和chroma成對使用,也可達到同樣效果。代碼如下:<br>
<b>FILTER: mask(color=#E1E4EC)<br>
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)<br>
chroma(color=#E1E4EC)"</b> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">
<tr>
<td class="text">
<table align=center border=0 width="200" height="50">
<tr>
<td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font face="黑體" color=#E1E4EC size=6><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
用glow濾鏡可以做空心字,方法是將字體顏色設置為背景色,再將glow濾鏡的strenght的值設置為1或2即可。這個效果的代碼如下:<br>
<b>FILTER: glow(color=#8C96B5,strength=2)<br>
shadow(color=#B4BBCF,direction=135)</b> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr>
<td class="text">
<table height=150 width=200 align=center
background="<a href="http://www.e-flowing.com/1/bg_1.jpg" target="_blank"></a>" border=0>
<tr>
<td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑體" color=#8C96B5 size=6><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
<br>
<table height=150 width=200 align=center background="<a href="http://www.e-flowing.com/1/bg_2.jpg" target="_blank"></a>" border=0>
<tr>
<td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height=54><font face="黑體" color=#8C96B5 size=6><b><i>E流設計</i></b></font></td>
</tr>
</table>
<br>
<br>
<table height=150 width=200 align=center background="<a href="http://www.e-flowing.com/1/bg_3.jpg" target="_blank"></a>" border=0>
<tr>
<td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center" height=54><font face="黑體" color=#8C96B5 size=6><b><i>E流設計</i></b></font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="unnamed1"><font class="text">如果背景採用圖片,為了能達到滿意的效果需要將mask和chroma組合使用,這樣能使字體感覺是透明的,讓背景透出來。<br>
<br>
上面列出的效果前者的代碼是:<br>
<b>FILTER: mask(color=#E1E4EC)<br>
shadow(color=#B4BBCF,direction=135)<br>
chroma(color=#E1E4EC)</b><br>
注意:字體的顏色由shadow決定,mask和chroma的顏色要相同,色彩任意。<br>
<br>
中間的代碼是:<br>
<b>FILTER: glow(strength=1)<br>
mask(color=#B4BBCF)<br>
chroma(color=#B4BBCF)</b><br>
注意:mask和chroma的顏色相同,這個顏色決定了字體的顏色。<br>
<br>
後者的代碼是:<br>
<b>FILTER: mask(color=#E1E4EC)<br>
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)<br>
chroma(color=#E1E4EC)</b><br>
注意:mask和chroma的顏色相同,色彩由dropshadow決定。</font></td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#E1E4EC">
<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr>
<td class="text">
<table height=150 cellspacing=0 cellpadding=0 width=480 align=center background="<a href="http://www.e-flowing.com/1/bg_1.jpg" target="_blank"></a>" border=0>
<tr>
<td style="FILTER: glow(strength=4)mask(color=#E1E4EC)" height=109 align="center" valign="middle"><font face="Verdana" color="#8C96B5" size="6"><i><b>WELCOME
TO<br>
<A HREF="<a href="http://WWW.E-FLOWING.COM" target="_blank">訪客無法瀏覽此圖片或連結,請先 註冊 或 登入會員 。</a></b></i></font></td>" TARGET=_blank>訪客無法瀏覽此圖片或連結,請先 註冊 或 登入會員 。</b></i></font></td></A>
</tr>
</table>
</td>
</tr>
<tr>
<td class="unnamed1"><font class="text">這個效果的代碼:<br>
<b>FILTER: glow(strength=4)mask(color=#E1E4EC)</b></font></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代碼" onClick= 'window.location = "view-source:" + window.location.href'></div> 4.中英文對齊引用:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>html-訪客無法瀏覽此圖片或連結,請先 註冊 或 登入會員 。</title>
</head>
<body>
英文對齊:<br>
<div style="font-size:12px;width:300;text-align:justify;text-justify:newspaper">‥Crepower‥ Brand Belts, Chains and other Transmission Parts are manufactured under ISO9001 certified quality-control system. With improved quality material and well-organized production procedures, ‥Crepower‥ power transmission products have noticeably fatigue strength and long-service life.We can supply all types and sizes according to the related standards and customers』 requirements and</div>
<br>
中文對齊:<br>
<div style="font-size:12px;width:300;text-align:justify; text-justify:inter-ideograph">
中央電視台廣告部「防非典病疫,倡文明新風」公益flash徵集
「非典」不僅是一種疾病,它還凸顯了國人許多陋習,如隨地吐痰、亂扔垃圾等。為倡導文明新風,中央電視台廣告部在網上開展「防非典病疫,倡文明新風」公益flash徵集賽。內容圍繞提倡講究衛生、保護環境、強身健體,提倡分餐、關愛他人、關心社會等新風氣,批評國人在衛生等方面的陋習(大家也可自定主題)。表現形式要生動活潑,避免簡單說教,要積極向上,讓大家樂於接受,動畫時長限一分鐘以內。在創作時一定要考慮到在電視中播出的包括口徑、技術指標在內的各項要求。比賽的部分得獎作品將在中央電視台公益廣告時段播出。
本次活動設獎項如下:
一等獎1名,獎勵現金6000元整;
二等獎2名,各獎勵現金4000元整;
徵集截止日期為6月10日,應徵者請將聯絡信息發至ad@mail.cctv.com,歡迎參與。
(與此同時,相關主題的電視公益廣告的製作正在展開,歡迎網友提供線索及建議。)
</div>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代碼" onClick= 'window.location = "view-source:" + window.location.href'></div> 5.不錯的按鈕引用:<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>按鈕樣式-訪客無法瀏覽此圖片或連結,請先 註冊 或 登入會員 。</title>
<style>
body,input{font:menu}
.button4 {
BACKGROUND-COLOR: #e87132; BORDER-BOTTOM: #a1052a 1px solid; BORDER-LEFT: #f89764 1px solid; BORDER-RIGHT: #a1052a 1px solid; BORDER-TOP: #f89764 1px solid; COLOR: #333333; HEIGHT: 20px}
</style>
</head>
<body>
<input type=button value="不錯的按鈕" class=button4>
</body>
</html>
<div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand">
<input type="button" name="Button" value="查看源代碼" onClick= 'window.location = "view-source:" + window.location.href'></div>
|