黑马

个人主页 | 个人论坛 | 网页素材 | 互联网指南

社区：文学·两性情感·影视·同学录·游戏工会

　　弹出窗口的字体，背景
　　http://self.heima.com曾用的过一个弹出窗口的页面代码，后来被很多黑马用户争相使用。在这里，以这段代码为例，做详细的解释，希望大家能做出自己具有个性特色的弹出窗口来。

　　首先看看弹出窗口效果。里面用到背景图片，滚动条颜色设置，透明FLASH，图片代码，透明表格，字体设置，特效字体设置。

　　该弹出窗口代码如下

　　在下面依依做各个代码的相关解释：

透明FLASH代码：

篮字部分 value="transparent" 是设置FLASH为透明的关键
红字部分 http://www.heima.com/user/31/42175/freehand/f.swf 是FLASH的网络地址，有两处，必填
绿字部分 width="371" height="400" 是FLASH的宽和高，必须设置。

根据自己的FLASH情况，把其中红色和绿色的字的代码替换掉。

CSS样式表 ：

<style>
BODY {cursor:url('http://www.heima.com/user/31/42175/freehand/1.ani');
FONT-SIZE: 9pt;COLOR: #ffffff;
background-color: #0B0E2F;

scrollbar-face-color: #0B0E2F;
scrollbar-highlight-color: #0B0E2F;
scrollbar-3dlight-color: #0B0E2F;
scrollbar-darkshadow-color: #0B0E2F;
scrollbar-shadow-color: #003366;
scrollbar-arrow-color: #003366;
scrollbar-track-color: #0B0E2F;}

A {COLOR: #ffffff; TEXT-DECORATION: none ;}
A:visited {COLOR: #ffffff; TEXT-DECORATION: none}
A:active {COLOR: #ffffff; TEXT-DECORATION: none}
A:hover {cursor:url('http://www.heima.com/user/31/42175/freehand/2.ani');
color:#000000;
background-color: #ffffff;
text-decoration: none;border:solid 0px;}

td {FONT-SIZE: 9pt; FONT-FAMILY: "verdana"; color:#ffffff;letter-spacing : 1pt ;line-height :14pt}

.f{letter-spacing : 2pt;
FILTER: dropshadow(color=#0B0E2F, offx=2, offy=1, positive=1);
BORDER-BOTTOM:#ffffff 1px dotted; }
</style>

CSS样式表的作用是控制网站的字体样式，色彩样式，鼠标样式

是以 <style> 开头， </style> 结束的形式。

其中紫色代码
cursor:url('http://www.heima.com/user/31/42175/freehand/1.ani'
cursor:url('http://www.heima.com/user/31/42175/freehand/2.ani'
是鼠标样式改变。 http://www.heima.com/user/31/42175/freehand/2.ani 这样的是鼠标图片地址

其中绿色代码
scrollbar-face-color: #0B0E2F;
scrollbar-highlight-color: #0B0E2F;
scrollbar-3dlight-color: #0B0E2F;
scrollbar-darkshadow-color: #0B0E2F;
scrollbar-shadow-color: #003366;
scrollbar-arrow-color: #003366;
scrollbar-track-color: #0B0E2F;
是滚动条的色彩配置，“#0B0E2F”是色彩的三原色代码，可以自己随意调色，替换成不同的颜色。

其中粉色代码全是字体的设置。可以根据自己的需求，随意调色，替换成不同的颜色。

内容部分代码：

<table width="371" height="400" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="0B0E2F" style="BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://www.heima.com/user/31/42175/freehand/g.jpg);
BACKGROUND-POSITION:right bottom; BACKGROUND-REPEAT: no-repeat;">
<tr>
<td><br>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="10" bgcolor="#003366"
style="FILTER: alpha(opacity=75) cellpadding='2'"><tr>
<td class="f"><div align="center">偶实在是无意的！</div></td></tr>
<tr> <td><p>最近N多朋友责备偶盗用张MM的PP，实在是冤枉啊～～<br>
<br>偶纯粹是为了试试软件，同时答应给黑马做一个用户示例才采用了张MM的PP以及蓝色伊人MM的一些图图。<br><br><br>
因为她们是“名人”想来应该不会被误会，不过还是被误会了，甚至还被％￥％※％￥＃◎％。。。。。。。真委屈～～<br><br><br>
大多数朋友还是真诚的。我会做一些网页，但是也不是特别厉害，我愿意把我知道的东东都告诉给大家，让咱们一起来建设美丽的网上家园！有问题请“
<a href="http://www.heima.com/web/board5.srf?userid=42175&columnno=6" target="_blank">给我留言</a>” *^_^*<br><div align="right"><img src="http://www.heima.com/user/31/42751/freehand/dog.gif" border="0" > </div></td>
</tr></table></td></tr>
</table>

篮字部分 style="FILTER: alpha(opacity=75) cellpadding='2'" 是设置一个表格为75％的透明度

红字部分 style="BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://www.heima.com/user/31/42175/freehand/g.jpg);
BACKGROUND-POSITION:right bottom; BACKGROUND-REPEAT: no-repeat;"> 是设置背景图片的代码。该段代码设置了一个固定的（BACKGROUND-ATTACHMENT: fixed; ），不重复出现的（BACKGROUND-REPEAT: no-repeat;），位于右下脚的（BACKGROUND-POSITION:right bottom;），背景图片（BACKGROUND-IMAGE: url(http://www.heima.com/user/31/42175/freehand/g.jpg);）

绿字部分 <a href="http://www.heima.com/web/board5.srf?userid=42175&columnno=6" target="_blank">给我留言</a> 是链接字的设置，点击“我的留言”将弹出一个链接地址页面

紫字部分 <img src="http://www.heima.com/user/31/42751/freehand/dog.gif" border="0" > 是图片代码

总的代码如下：

.f{letter-spacing : 2pt;
FILTER: dropshadow(color=#0B0E2F, offx=2, offy=1, positive=1);
BORDER-BOTTOM:#ffffff 1px dotted; }
</style>

<table width="371" height="400" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="0B0E2F" style="BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(http://www.heima.com/user/31/42175/freehand/g.jpg);
BACKGROUND-POSITION:right bottom; BACKGROUND-REPEAT: no-repeat;">
<tr> <td><br>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="10" bgcolor="#003366"
style="FILTER: alpha(opacity=75) cellpadding='2'"><tr>
<td class="f"><div align="center">偶实在是无意的！</div></td></tr>
<tr> <td><p>最近N多朋友责备偶盗用张MM的PP，实在是冤枉啊～～<br><br>
偶纯粹是为了试试软件，同时答应给黑马做一个用户示例才采用了张MM的PP以及蓝色伊人MM的一些图图。<br><br><br>
因为她们是“名人”想来应该不会被误会，不过还是被误会了，甚至还被％￥％※％￥＃◎％。。。。。。。真委屈～～<br><br><br>
大多数朋友还是真诚的。我会做一些网页，但是也不是特别厉害，我愿意把我知道的东东都告诉给大家，让咱们一起来建设美丽的网上家园！有问题请“
<a href="http://www.heima.com/web/board5.srf?userid=42175&columnno=6" target="_blank">给我留言</a>” *^_^*<br>
<div align="right"><img src="http://www.heima.com/user/31/42751/freehand/dog.gif" border="0" >
</div></td></tr></table></td></tr>
</table>