CSS(层叠样式表)所学内容
- 格式：doc
- 大小：219.00 KB
- 文档页数：19
文字效果图片效果用CSS设置网页中的背景说明：以上5点是用在网页背景处理的时候，{}前写的是body，也可以用在表格或单元格背景的处理，那{}前写的是.A ,之后调用就写<table class=A><td class=A > 用CSS设置导航栏和超链接A:link 超链接的普通样式,即正常浏览状态的样式A:visited 被点击过的超链接的样式A:hover 鼠标指针经过超链接上时的样式A:active 在超链接上单击时,即”当前激活”时,超链接的样式用CSS设置photoshop滤镜效果（12种效果）(1）一打开网页出现个对话框，框上提示文字是“欢迎来到我的花店！”代码如下：应用在其中可放在网页代码任意位置<script language="javascript">alert("欢迎来到我的花店！");</script>（2）网页上同一位置的5张图片是以幻灯片方式出现。
代码如下：应用在其中，可放在网页代码任意位置<style>.A{filter:RevealTrans(Duration=3,Transition=21);WIDTH=700;HEIGHT=150}--></style><script language="javascript">function img2(x){this.length=x;}jname=new img2(5);jname[0]="06.jpg";jname[1]="07.jpg";jname[2]="08.jpg";jname[3]="09.jpg";jname[4]="10.jpg";var j=0;function play2(){if (j==4){ j=0; }else{ j++; }tp2.filters[0].apply();tp2.src=jname[j];tp2.filters[0].play();mytimeout=setTimeout("play2()",4000);}</script><table cellpadding="0" cellspacing="0" align=center ><tr><td><img src="06.jpg" name="tp2" CLASS=A></TD></tr><script language="javascript">play2();</script>（3）若同一个网页中有两处或多处有使用到幻灯片效果：<STYLE>.A{filter:RevealTrans(Duration=3,Transition=21);WIDTH=700;HEIGHT=150}.V{filter:RevealTrans(Duration=1,Transition=2);WIDTH=700;HEIGHT=150} //这是用在另一个幻灯片上的切换效果……--></style><script language="javascript">function img2(x){this.length=x;}jname=new img2(4);jname[0]="BANNER.jpg";jname[1]="11.GIF";jname[2]="flower4.jpg";jname[3]="flower3.jpg";……要切换的图片全部放在这var j=0;S=0;function play2(){if (j==1){ j=0; }else{ j++; }tp2.filters[0].apply();tp2.src=jname[j];tp2.filters[0].play();mytimeout=setTimeout("play2()",4000); //这是两张间切换if (S==1){ S=0; }else{ S++; }tp3.filters[0].apply();tp3.src=jname[S+2];tp3.filters[0].play();mytimeout=setTimeout("play2()",4000); //这是另外两张在其他地方的切换}</script><img src="BANNER.jpg" name="tp2" CLASS=A><img src="flower4.jpg" name="tp3" CLASS=V>以下内容供参考：（可以改成以下自己满意的任意一种切换方式）RevealTrans滤镜只有两个参数，Duration：是切换时间，以秒为单位；Transition：是切(3)用区块内容来定义，用块定义可以任意定义块内容，随意放在网页任意位置（块中也可以有表格，这样表格在块内也可以任意设置位置）<style>.DIV1{position=absolute;left=140px;Top=195px;padding-left=10px;width=180;color=red;BACKGROUND=URL(login.jpg) NO-REPEAT WHITE} </style><DIV CLASS=DIV1>……（这里面自己补充完整）</div>Position属性一共有4个值，分别为static、absolute、relative和fixedZ-index属性用于调整定位时重叠块的上下位置（4）<SPAN>也可以定义块，不同在于而<span>仅仅是一个行内元素，在它的前后不会换行。
鼠标特效：1）鼠标文字"★画圈圈诅咒你幸福!"跟随（标明红色处可自定义改变，其他照搬）<style type="text/css">.spanstyle {COLOR: #000FFF; FONT-FAMIL Y: 宋体; FONT-SIZE: 15pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible}</style><script>var x,yvar step=18var flag=0var message="★画圈圈诅咒你幸福!"message=message.split("")var xpos=new Array()for (i=0;i<=message.length-1;i++) {xpos[i]=-50}var ypos=new Array()for (i=0;i<=message.length-1;i++) {ypos[i]=-200}function handlerMM(e){x = (yers) ? e.pageX : document.body.scrollLeft+event.clientXy = (yers) ? e.pageY : document.body.scrollTop+event.clientYflag=1}function www1_xise_cn() {if (flag==1 && document.all) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("span"+(i)+".style")thisspan.posLeft=xpos[i]thisspan.posTop=ypos[i]}}else if (flag==1 && yers) {for (i=message.length-1; i>=1; i--) {xpos[i]=xpos[i-1]+stepypos[i]=ypos[i-1]}xpos[0]=x+stepypos[0]=yfor (i=0; i<message.length-1; i++) {var thisspan = eval("document.span"+i)thisspan.left=xpos[i]thisspan.top=ypos[i]}}var timer=setTimeout("www1_xise_cn()",30)}for (i=0;i<=message.length-1;i++) {document.write("<span id='span"+i+"' class='spanstyle'>")document.write(message[i])document.write("</span>")}if (yers){document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = handlerMM;www1_xise_cn();// --></script>2）鼠标图片跟随（标明红色处可自定义改变，其他照搬）<script language="JavaScript"><!--var images='2.gif';//Put your image name here!!var amount=7;//Number of images here. Do not alter for this script!! var speed=1;var RunTime = 0;var cntr=0;var xcntr=100;var pulse=25;var Xpos = 0;var Ypos = 0;var _y;var temp;/*If you use an image larger or smaller than the one I've usedthe cursor will be off center.Alter the 2 variables below to center it.*/ var UpDown=-10;var LeftRight=-5;if (document.all){document.write('<div id="ieDiv" style="position:absolute;top:0px;left:0px">');document.write('<div id="c" style="position:relative">');for (n=0; n < amount; n++)document.write('<img src="'+images+'" style="position:absolute;top:0px;left:0px;visibility:hidden">'); document.write('</div>');document.write('</div>');function FollowMouse(){Xpos = document.body.scrollLeft+event.x+UpDown;Ypos = document.body.scrollTop+event.y+LeftRight;}document.onmousemove = FollowMouse;}else if (yers){window.captureEvents(Event.MOUSEMOVE);function xFollowMouse(evnt){Xpos = evnt.pageX+UpDown;Ypos = evnt.pageY+LeftRight;}window.onMouseMove = xFollowMouse;for (ns=0; ns < amount; ns++)document.write("<LAYER NAME='n"+ns+"' LEFT=0 TOP=0 VISIBILITY=HIDE><IMG SRC='"+images+"'></LAYER>");}function msi(){if (yers){for ( i = 0 ; i < ns ; i++ ){temp="n"+iyers[0].visibility='show';yers[0].top = Ypos+cntr*Math.cos((RunTime+i*4.5)/5); yers[0].left =Xpos+cntr*Math.sin((RunTime+i*4.5)/5);}cntr+=1;RunTime+=speed;stp=setTimeout('msi()',10);if (cntr>=100){cntr=100;speed=2.5;for ( i = 0 ; i < ns ; i++ ){temp="n"+iyers[temp].visibility='show';yers[temp].top=Ypos+cntr*Math.cos((RunTime-100)*i/90);yers[temp].left=Xpos+cntr*Math.sin((RunTime-100)*i/90); }}if (RunTime>182){speed=0.5;for ( i = 0 ; i < ns ; i++ ){temp="n"+iyers[temp].top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5)/5 );yers[temp].left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/ 5)*Math.cos((RunTime-182)/5);}}}else if (document.all){for (i=0;i<ieDiv.all.c.all.length;i++){ieDiv.all.c.all[0].style.visibility='visible';ieDiv.all.c.all[0].style.top=Ypos+cntr*Math.cos((RunTime+i*4.5)/5); ieDiv.all.c.all[0].style.left=Xpos+cntr*Math.sin((RunTime+i*4.5)/5); }cntr+=1;RunTime+=speed;stp=setTimeout('msi()',10);if (cntr>=100){cntr=100;speed=2.5;for (i=0;i<ieDiv.all.c.all.length;i++){ieDiv.all.c.all[i].style.visibility='visible';ieDiv.all.c.all[i].style.top=Ypos+cntr*Math.cos((RunTime-100)*i/90); ieDiv.all.c.all[i].style.left=Xpos+cntr*Math.sin((RunTime-100)*i/90); }}if (RunTime>182){speed=0.5;for (i=0;i<ieDiv.all.c.all.length;i++){ieDiv.all.c.all[i].style.top=Ypos+xcntr*Math.cos(((RunTime-182)+i*4.5 )/5);ieDiv.all.c.all[i].style.left=Xpos+xcntr*Math.sin(((RunTime-182)+i*4.5)/5)*Math.cos((RunTime-182)/5);}}}if (RunTime>210){xcntr-=10;}if (yers)_y=-window.innerWidth-90;else if (document.all)_y=-document.body.clientWidth-90;if (xcntr <= _y){RunTime=0;speed=1;cntr=0;xcntr=100;}}msi()//--></script>3）鼠标萤火虫跟随（标明红色处可自定义改变，其他照搬）<script language="JavaScript">if (document.all){colours=newArray('00ffff','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')amount=colours.length;YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;document.write('<div id="ie"style="position:absolute;top:0;left:0;"><divstyle="position:relative">');for (i=0; i < amount; i++)document.write('<div id="iestars"style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:CourierNew;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>');document.write('</div></div>');ini=1;gstep=1;function iMouse(){my=event.y;mx=event.x;}document.onmousemove=iMousefunction dim(){ini-=gstep;dt=setTimeout('dim()',10);if (ini < 2){clearTimeout(dt);glow();}}function glow(){ini+=gstep;gt=setTimeout('glow()',10);if (ini > 14){clearTimeout(gt);dim();}}function stars(){ie.style.top=document.body.scrollTop;for (i=0; i < amount; i++){var layer=iestars[i].style;layer.filter='glow(color='+colours[i]+', strength='+ini+')'; layer.top=Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10); }currStep+=step;}function delay(){Ydelay = YgetDelay+=(my-YgetDelay)*1/20; Xdelay = XgetDelay+=(mx-XgetDelay)*1/20; stars();setTimeout('delay()',10);}delay();glow();}</script>（6）滚动条外观设置：/* 页面滚动条*/<style>body{scrollbar-3dlight-color=red;scrollbar-arrow-color=blue;scrollbar-darkshadow-color=yellow;scrollbar-face-color=pink;scrollbar-highlight-color=orange;scrollbar-shadow-color=purple;scrollbar-base-color=green; /* 基调颜色*/ }/* 文本框滚动条*/.largetext {scrollbar-3dlight-color=yellow;scrollbar-arrow-color=red;scrollbar-darkshadow-color=blue;scrollbar-face-color=green;scrollbar-highlight-color=yellow;scrollbar-shadow-color=purple;scrollbar-base-color=black}</style><textarea rows=9 cols=40 class=largetext>。
