网页设计19-相册1.ppt

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（19） CSS样式（14） ----电子相册2 知识技能目标 1、通过实训项目熟练掌握css样式设置的综合运用。 实训内容 实训一：电子相册 通过实例了解利用CSS实现电子相册的效果 1、菜单实例1 实训项目 课堂实践 2.（1）改变阵列模式 body{ margin:0.8em; padding:0px; } div.pic{ width:160px; height:160px; margin:6px; padding:0px; float:left; } div.pic img{ border:1px solid #82c3ff; } div.ls{ background:url(framels.jpg) no-repeat left; } div.pt{/* 竖直相片的背景 */ background:url(framept.jpg) no-repeat left; } div.ls img{ /* 水平相片 */ margin:0px; height:90px; width:135px; } div.pt img{/* 竖直相片 */ margin:0px; height:135px; width:90px; } div.ls a{ display:block; padding:34px 14px 36px 11px; } div.pt a{ display:block; /* 将超链接区域扩大到整个背景块 */ padding:11px 36px 14px 34px; } div.ls a:hover{ background:url(framels_hover.jpg) no-repeat center; } div.pt a:hover{ background:url(framept_hover.jpg) no-repeat center; } div.pic ul{ /* 设置相片信息的样式 */ display:none; } 课堂实践 2.（2）设置ul信息样式 div.pic ul{ /* 设置相片信息的样式 */ margin:-5px 0 0 0px; padding:0 0 0 0.5em; background:#dceeff; border:2px solid #a7d5ff; font-size:12px; list-style:none; font-family:Arial, Helvetica, sans-serif; } 课堂实践 3. 设置鼠标放上出现ul信息样式 div.hover ul{ display:block; position:absolute; } script type=text/javascript var divs = document.getElementsByTagName(div); for (var i=0;idivs.length;i++){ divs[i].onmouseover = function(){//鼠标在div上面的时候 this.className += ‘ hover; } divs[i].onmouseout = function(){//鼠标离开的时候 this.className=this.className.replace(/hover/,); } } /script 课堂实践 4.双向联动模式 （1）重设置ul样式 （2）给每个div加个id #p0 a{top:0px;left:0px;} #p1 a{top:0px;left:160px;} #p2 a{top:0px;left:320px;} #p3 a{top:0px;left:480px;} #p4 a{top:160px;left:0px;} #p5 a{top:160px;left:160px;} #p6 a{top:160px;left:320px;} #p7 a{top:160px;left:480px;} div.pic ul{ /* 设置相片信息的样式 */ border:2px solid #a7d5ff; font-size:12px; list-style:none; font-family:Arial, Helvetica, sans-serif; padding-top