|
这个制作很简单的,是我很早欢迎颦儿时做的.
有些小技巧觉的还可延伸的,故发在这里大家探讨.
◆ <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
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
显身卡
楼主![](\"http://up1.googletounion.com/data/bbs/10/96/1096/a/08/27/20080705_c6ab997d17b1f39162f96xhPm639VWxR.gif\")
发表于 2008-7-6 01:24
[s:3]![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}