<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>作业</TITLE>
<LINK rel="stylesheet" href="image/style.css" type="text/css">
<STYLE type="text/css">
/*等级样式*/
/*background-position:0px -30px；分别指图片相对于层的左方及下方距离*/
.star{
/* 背景图star.jpg，在X轴方向上延伸，高30px，宽150px */
background-image: url(image/starbg.jpg);
background-repeat:repeat-x;
background-position:0px 0px;
width: 100px;
height: 20px;
}
.one-stars{
/* 背景图star.jpg，在X轴方向上延伸，高30px，宽90px */
background-image: url(image/starbg.jpg);
background-repeat:repeat-x;
background-position:0px -20px;
height: 20px;
width:10px;
}.two-stars{
/* 背景图star.jpg，在X轴方向上延伸，高30px，宽90px */
background-image: url(image/starbg.jpg);
background-repeat:repeat-x;
background-position:0px -20px;
height: 20px;
width:40px;
}
.three-stars{
/* 背景图star.jpg，在X轴方向上延伸，高30px，宽90px */
background-image: url(image/starbg.jpg);
background-repeat:repeat-x;
background-position:0px -20px;
height: 20px;
width:60px;
}
.four-stars{
/* 背景图star.jpg，在X轴方向上延伸，高30px，宽90px */
background-image: url(image/starbg.jpg);
background-repeat:repeat-x;
background-position:0px -20px;
height: 20px;
width:80px;
}
.five-stars{
/* 背景图star.jpg，在X轴方向上延伸，高30px，宽90px */
background-image: url(image/starbg.jpg);
background-repeat:repeat-x;
background-position:0px -20px;
height: 20px;
width:100px;
}
/*标题渐变背景*/
.bg{filter:progid:DXimageTransform.Microsoft.Gradient(startColorStr=#FFFFFF, endColorStr=#26B027, gradientType=0);
border-bottom:1 #1fa51f solid;
border-top:1 #e4fae4 solid;
height:30px;
font-size:13px;font-weight:bold;color:#FFFFFF;
padding-left:15px;
padding-top:8px;
margin-top:3px;
}
/*CSS论坛 >> 滤镜/样式特效链接效果*/
.daohang{color:#9a4416;
font-size:13px;
font-weight:bold;
padding-left:15px;
margin-top:10px;
margin-bottom:5px;
}
/*菜单样式*/
.test{height:30px;margin-bottom:5px;margin-top:1px;;background:#CCCCCC;}
.test ul{list-style:none;}
.test li{float:left;width:80px;
background:#CCCCCC;margin-left:1px;line-height:30px;
}
.test a{display:block;text-align:center;height:30px;color:#666666;
background:url(image/arrow_off.gif) #CCCCCC no-repeat 5px 9px;text-decoration:none;
}
.test a:hover{color:#FFFFFF; font-weight:bold;text-decoration:none;
background:url(image/arrow_on.gif) #57B06C no-repeat 5px 9px;
}
/*表格样式*/
.line-lb{border-left:1 #CCCCCC solid;
border-bottom:1 #CCCCCC solid;
padding:5px 5px 5px 10px;
width:140px;
}
.line-lbr{border-left:1 #CCCCCC solid;
border-right:1 #CCCCCC solid;
border-bottom:1 #CCCCCC solid;
}
.padd{padding:5px 5px 5px 10px;}
/*昵称样式*/
.nc{filter:glow(color=#03700E,strength=3);
width:70%;color:#FFFFFF;font-size:13px;font-weight:bold;
line-height:30px;}
/*小标题样式*/
.shadow{filter:shadow(color=#9a4416,direction=135);width:80%;color:FFFFFF;font-size:14px;font-weight:bold;}
/*雾化效果*/
.alpha{filter:alpha(opacity=100,style=2)}
/*波浪效果*/
.wave{filter:wave(add=0,lightstrength=40,strength=8,freq=6,phrase=60)}
/*动感模糊*/
.blur{filter:blur(add=1,direction=60,strength=15);width:100%;
font-size:50px;font-weight:bold;color:#9a4416;line-height:80px;
}
/*动感模糊及倒影效果*/
.bf{filter:flipV() blur(add=1,direction=240,strength=15);
width:100%;
font-size:50px;font-weight:bold;color:#9a4416;line-height:80px;
}
.hide{display:none;}
.show{display:block;cursor:hand; }
<!--CSS实现层的显示隐藏-->
.sh{ width:180px;}
.sh ul{list-style: url(image/arrow.jpg);float:left;padding-top:10px;}
.sh li{color:#9a4416;font-size:16px;font-weight:bold;line-height:30px; cursor:hand; width:160px;}
.shhs{border:1 #009933 dashed;
border-left:1 #009933 dashed;
position:relative;
left:0px;
top:10px;
height:200px;
width:350px;
padding:6px 10px;
display:none;
}
</STYLE>
</HEAD>
<BODY leftmargin="2" topmargin="0">
<DIV style="width:835px;">
<!--头部-->
<DIV><IMG src="image/zytop.jpg"></DIV>
<!--网站菜单-->
<DIV class="test"><UL>
<LI><A href="#">网站首页</A></LI>
<LI><A href="#">CSS论坛</A></LI>
<LI><A href="#">会员注册</A></LI>
<LI><A href="#">会员登录</A></LI>
<LI><A href="#">社区主页</A></LI>
<LI><A href="#">论坛管理</A></LI>
<LI><A href="#">联系我们</A></LI>
</UL>
</DIV>
<!--论坛标题-->
<DIV class="daohang"><A href="#" class="daohang">CSS论坛</A> >> <A href="#" class="daohang">滤镜/样式特效</A> >> CSS常用滤镜及样式特效在网页中的例子</DIV>
<DIV align="right"><A href="#"><IMG src="image/postnew.gif" hspace="8" border="0"></A><A href="#"><IMG src="image/mreply.gif" hspace="8" border="0"></A></DIV>
<DIV class="bg">标题：CSS常用滤镜及样式特效在网页中的例子</DIV>
<!--论坛正文-->
<DIV><TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD class="line-lb" valign="top">昵称：<SPAN class="nc">飞雪</SPAN><BR><IMG src="image/BBS0.jpg"><BR>
等级：侠之大侠
<DIV class="star"><DIV class="five-stars"></DIV></DIV>
头衔：版主<BR>
主题：266 <BR>
回复：3214 <BR>
时间：2007-10-15</TD>
<TD class="line-lbr" valign="top"><TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD style="border-bottom:1 #CCCCCC solid;" class="padd">小标题：<SPAN class="shadow">图片的波浪效果和雾化效果</SPAN></TD>
</TR>
<TR>
<TD class="padd">下面图片是利用CSS滤镜效果实现的图片雾化效果，这种效果在网上经常用到，现在把鼠标移动图片上看看有什么变化，然后再把鼠标移开图片，看看图片是不是又恢复原来的样子了？<BR><SPAN style="text-align:center"><IMG src="image/zy01.jpg" class="alpha"onMouseMove="this.className='wave'" onMouseOut="this.className='alpha'"></SPAN></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD class="line-lb" valign="top">昵称：<SPAN class="nc">bluerlily</SPAN><BR><IMG src="image/BBS1.jpg"><BR>
等级：新手上路
<DIV class="star"><DIV class="one-stars"></DIV></DIV>
头衔：VC泡腾片<BR>
主题：2 <BR>
回复：6 <BR>
时间：2007-10-15</TD>
<TD class="line-lbr" valign="top"><TABLE width="100%" border="0" cellspacing="0" cellpadding="0">
<TR>
<TD style="border-bottom:1 #CCCCCC solid;" class="padd">小标题：<SPAN class="shadow">CSS实现层的显示隐藏</SPAN></TD>
</TR>
<TR>
<TD class="padd"><DIV class="sh"><UL>
<LI onMouseMove="document.all.d1.style.display='block'" onMouseOut="document.all.d1.style.display='none'">白天炒股 晚上炒汇</LI>
<LI onMouseMove="document.all.d2.style.display='block'" onMouseOut="document.all.d2.style.display='none'">《奋斗》剧中人物</LI>
<LI onMouseMove="document.all.d3.style.display='block'" onMouseOut="document.all.d3.style.display='none'">丁俊晖再度无缘16强</LI>
</UL><DIV class="shhs" id="d1"> 外汇市场是一个双向交易的市场，无论熊市还是牛市，投资者都有机会获利。由于外汇市场的波动比较频繁，很多短线交易者往往利用汇市每日的波动，频繁进出市场，从而使得投资者能在一天内多次获利，而这一切完全都归功于外汇市场的作空机制。<BR> 外汇市场是一个24小时永不停滞的全球市场，市场交易每天从悉尼开始，随着地球的转动，全球每个金融中心的营业日将依次开始。 这使得外汇交易者可以根据自己的生活习惯安排交易...... </DIV>
<DIV class="shhs" id="d2"><IMG src="image/zy03.jpg" hspace="4" align="left">昨晚，《奋斗》在北京电视台播出大结局。该剧虽然在黄金周期间开播，但收视率一路走高，单集收视率突破11个点，该剧吸引了横跨上世纪60、70、80、90各年代的观众。其实早在北京地区播出前，《奋斗》就已经是碟片市场上的畅销品了，电视台的开播只是使酝酿已久...
</DIV>
<DIV class="shhs" id="d3"><IMG src="image/zy04.jpg" hspace="4" align="left"> 2007年10月15日，斯诺克皇家钟表大奖赛在苏格兰阿伯丁继续展开争夺，在小组赛中取得两胜两负的中国选手丁俊晖背水一战，迎来小组至关重要的与墨菲的最后一战，丁俊晖若想小组出线，必须4-0完胜墨菲，与此同时，还要看同组其他选手的胜负关系。最终丁俊晖3
JS-HTML-CSS-zuoye.rar （72个子文件） 
作业 image 
menu-bg.jpg 1KB filter4.jpg 2KB BBS0.JPG 14KB zy02.jpg 7KB contentpic.jpg 902KB zyt02.JPG 9KB arrow.jpg 393B
arrow_on.gif 53B menu2.jpg 10KB zy01.jpg 30KB star.jpg 847B zy03.jpg 14KB filter0.jpg 53KB BBS1.jpg 7KB arrow_off.gif 53B zytop.jpg 36KB filter2.jpg 4KB postnew.gif 2KB adv.jpg 23KB
open.swf 10KB zyt03.JPG 17KB mreply.gif 2KB
Thumbs.db 97KB zy04.jpg 4KB button.jpg 10KB starbg.jpg 599B BBS4.jpg 3KB filter1.jpg 23KB zyt01.JPG 7KB sohu.jpg 510KB filter3.jpg 3KB BBS3.jpg 8KB menu1.jpg 10KB style.css 390B BBS2.jpg 5KB color.jpg 20KB
作业.html 10KB 北京银行 images title_bg_line.gif 48B menu_5.gif 1KB bobinv_tilet.gif 535B footer_bg_line.gif 54B logon_button_tel.gif 15KB bg_place.gif 169B menu_1.gif 732B head_inv.swf 93KB menu_bg.gif 159B report.jpg 17KB menu_4.gif 2KB bobinv_tilet3.gif 476B head.jpg 107KB menu_3.gif 2KB bobinv_tilet4.gif 490B menu_6.gif 1KB foot.jpg 45KB register_submit.gif 3KB head_column_bg.jpg 337B menu_2.gif 2KB Thumbs.db 19KB notice.jpg 17KB logon_button_p.gif 15KB button_search.gif 187B menu_7.gif 791B logon_button_cp.gif 15KB relation.jpg 17KB logon_bg.jpg 15KB top.jpg 10KB index.html 5KB Scripts AC_RunActiveContent.js 8KB register.html 3KB style.css 3KB
北京银行.png 189KB 作业.png 1.1MB
评论0