|
這個制作很簡單的,是我很早歡迎顰兒時做的.
有些小技巧覺的還可延伸的,故發在這里大家探討.
◆ <DIV style=\"position:relative; top:200px; left:-120px; width:800px; height:590px;overflow: hidden;\">
設定一個空間:
寬800,高590;
這個空間離頂200,離左邊-120.
以下內容都做在這個空間里.
別忘了最后的收尾</DIV> 忘了后果嚴重.
注意:全部代碼就這里用了CSS相對定位代碼 position:relative;
其它都是絕對定位代碼 position: absolute;絕對定位代碼最好不要單獨使用.
overflow: hidden;溢出屬性,值 hidden;意思指溢出這個框架(800X590)的部分不可見.
◆ <div style=\"position: absolute; top: 10px; left: 10px; width:600px; height:200px;overflow: hidden;background-color:#222222;border:16px #999999 ridge;\"></div>
這是最下層帶框的背景,
邊框用了CSS風格邊框: border:16px #999999 ridge;
背景色: background-color:#222222;
效果如下:
◆ <div style=\"position: absolute; top: 14px; left: 14px; width:608px; height:208px;overflow: hidden;border:8px #3a3937 double;\"></div>
由于上面的脊柱邊框(ridge)有些單調,再加個雙線框(double)上去.
雙線框效果如下,加上去效果如一樓.
◆ <div style=\"position: absolute; top: 36px; left: 36px\">
<marquee behavior=scroll width=580 height=180 scrolldelay=30 scrollamount=8>
<FONT id=font1 style=\"FONT-SIZE: 130pt\" face=黑體 color=#0000FF><B>歡迎大家來到學堂 - 學堂有你們更精彩</B><?import namespace = t urn = \"urn:schemas-microsoft-com:time\" implementation = \"#default#time2\" declareNamespace /><t:animateColor id=color1 attributeName = \"color\" calcMode = \"paced\" targetElement = \"font1\" values = \"#00ff00;;#FFFF00;;#FF00FF;;red;\" autoReverse = \"true\" begin = \"0;b4.click\" dur = \"12\" repeatCount = \"100\"></t:animateColor></FONT> <img src=http://up1.googletounion.com/data/bbs/10/96/1096/a/forumid_27181/012820_NyWTKvZKgBew.gif height=138>
</marquee>
</div>
這是做的移動字和圖,
效果如下:
◆ <div style=\"position: absolute; top: 26px; left: 26px;width:600px; height:200px;overflow: hidden;\">
<TABLE style=\"position: absolute; top: -10px; left: 3px; width:630; height:290;\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><TR><TD style=\"FILTER: chroma(color=#3A393d);\" bgcolor=#222200>
<FONT style=\"FONT-SIZE:8pt;line-height:5pt;letter-spacing:2px;\" color=#3A393d> ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
...................................
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
</FONT>
</TD></TR></TABLE>
</div>
這段文字都是點,它的顏色是 color=#3A393d 表格中 FILTER: chroma(color=#3A393d); 設定這些點為透明.再用背景色 bgcolor=#222200 罩上去.
style=\"FONT-SIZE:8pt;line-height:5pt;letter-spacing:2px;\"
CSS語言:
FONT-SIZE:8pt; 字體大小,這里是點.
line-height:5pt; 行距
letter-spacing:2px; 字距.
效果如下 這些點都是透明的)
| ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● |
框的背景色 background-color:#222222
遮罩色 bgcolor=#222200
故意有點色差,以顯出點.
好了,全部的關鍵在于定尺寸和定位置.
可以變通的地方也很多.
下面改變了邊框,背景和遮罩都換了圖片.點換成了心形.
代碼:
<DIV style=\"LEFT: 0px; OVERFLOW: hidden; WIDTH: 800px; POSITION: relative; TOP: 200px; HEIGHT: 790px\">
<div style=\"BORDER: #ff33ff 16px dotted; LEFT: 10px; OVERFLOW: hidden; WIDTH: 500px; POSITION: absolute; TOP: 10px; HEIGHT: 500px;background-color:#ffccff;\">
<img src=http://up1.googletounion.com/data/aa/76/94/5/a/08/27/20080702_f76c21df3cadee56645epELBNnSihJdV.jpg WIDTH=390 style=\"LEFT: 26px; OVERFLOW: hidden; POSITION: absolute; TOP: 39px;\">
</div>
<div style=\"LEFT: 26px; OVERFLOW: hidden; WIDTH: 500px; POSITION: absolute; TOP: 26px; HEIGHT: 500px\">
<table style=\"LEFT: 0px; WIDTH: 630px; POSITION: absolute; TOP: 0px; HEIGHT: 500px\" cellSpacing=0 cellPadding=0 border=0>
<tr>
<td style=\"FILTER: chroma(color=#3A393d)glow(color:#ff0000;strength:6);\" background=
http://up1.googletounion.com/data/bbs/10/96/1096/a/08/27/20080702_245c14052e0ea295aaf4uCotHLjltZI5.jpg align=top>
<marquee behavior=alternate scrollamount=3 direction=up height=370>
<marquee behavior=alternate scrollamount=3 width=390>
<FONT style=\"FONT-SIZE: 258pt;\" color=#3a393d face=\"Webdings\">Y</FONT></marquee></marquee>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</td></tr></table>
</div>
<div style=\"BORDER: #cc0000 8px double; LEFT: 14px; OVERFLOW: hidden; WIDTH: 508px; POSITION: absolute; TOP: 14px; HEIGHT: 508px\">
</div>
</DIV>
| 
窺視卡
雷達卡
鮮花(
雞蛋(
發表于 2008-7-6 01:10
QQ好友和群
QQ空間
收藏
分享
淘帖
提升卡
置頂卡
沉默卡
喧囂卡
變色卡
搶沙發
顯身卡
樓主![](\"http://up1.googletounion.com/data/bbs/10/96/1096/a/08/27/20080705_c6ab997d17b1f39162f96xhPm639VWxR.gif\")
發表于 2008-7-6 01:24
[s:3]
/1 
![http://up1.googletounion.com/data/bbs/10/96/1096/a/08/27/20080702_245c14052e0ea295aaf4uCotHLjltZI5.jpg](\"http://up1.googletounion.com/data/bbs/10/96/1096/a/08/27/20080702_245c14052e0ea295aaf4uCotHLjltZI5.jpg\"){kind=link}