网页设计19-20相册.ppt

改进 内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（18） CSS样式（13） ----电子相册 知识技能目标 1、通过实训项目熟练掌握css样式设置的综合运用。 实训内容 实训一：电子相册 通过实例了解利用CSS实现电子相册的效果 1、菜单实例1 实训项目 课堂实践 插入图像 列向图像和横向图像的定义和应用 a href=photo/01.jpg img src=photo/thumb/01.jpg/a ul li class=title鸣沙山/li li class=catnoTrip01/li li class=price￥79.9/li /ul (1)搭建页面框架 课堂实践 (2) 阵列模式 对pic整体结构设计 课堂实践 (3)用两张底片给图片增加背景边框 课堂实践 （4）设置水平和竖直照片的大小，并隐藏照片的信息 课堂实践 （5）照片居中，并把超链接设置为块元素 课堂实践 （6）鼠标经过时变换照片背景 script type=text/javascript var divs = document.getElementsByTagName(div); for (var i=0;idivs.length;i++){ divs[i].onmouseover = function(){ //鼠标在div上面的时候 this.className += pichover; } divs[i].onmouseout = function(){ //鼠标离开的时候 this.className=this.className.replace(/hover/,); } } /script div.pichover ul{ display:block; position:absolute; } 课后作业 1. 完成课本P291-297的案例 To Be Continue…… Take A Lest 课堂实践 2.单列模式P298 （1）取消信息列表的隐藏属性和div.pic 的左浮动 （2）将照片的超链接设置左浮动 课堂实践 （3）设置信息列表的样式P299 课堂实践 （4）设置列表项目P300 3.改进阵列模式P301 课堂实践 4.双向联动模式 （1）给每个div加个id （2）图像定位，P307 课堂实践 （3）设置信息列表的样式P307 课堂实践 （4）设置鼠标经过时双向联动P310 （5）IE兼容 定义伪类的类别选择器 div.ls:hover a,div.lshover a { background-image: url(framels_hover.jpg); } div.pt:hover a,div.pthover a { background-image: url(framels_hover.jpg); } div.pic:hover ul,div.pichover ul { background-color: #ccc; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #FF0000; border-bottom-color: #FF0000; } 课堂实践 加JavaScript代码 script language=javascript var divs = document.getElementsByTagName(div); for (var i=0;idivs.length;i++){ divs[i].onmouseover = function(){ //鼠标在行上面的时候 if(this.className.indexof(Is)!=-1) this.className+=Ishover; else this.className+=pthover; this.className+=pichover; } divs[i].onmouseout = function(){ //鼠标在行上面的时候 this.className=this.className,replace(/Ishover/,); this.className=this.className,replace(/pt