‹‹ 上一主題 | 下一主題 ››
發新話題

《資訊》 網頁設計的一些代碼

蔡逸竹

孤獨者 - 心在黑暗裡旅行 ...... ...

至尊會員

Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

遊蕩的過客 - 枉入紅塵若許年 .. ...

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>

TOP

‹‹ 上一主題 | 下一主題 ››
發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。