网页设计19-20相册

网页设计与制作（18）CSS样式（13）

----电子相册

知识技能目标1、通过实训项目熟练掌握css样式设置的综合运用。

实训内容实训一：电子相册通过实例了解利用CSS实现电子相册的效果1、菜单实例1

实训项目课堂实践插入图像列向图像和横向图像的定义和应用<ahref="photo/01.jpg"><imgsrc="photo/thumb/01.jpg"></a> <ul> <liclass="title">鸣沙山</li> <liclass="catno">Trip01</li> <liclass="price">￥79.9</li> </ul>(1)搭建页面框架课堂实践(2)阵列模式对pic整体结构设计课堂实践(3)用两张底片给图片增加背景边框

课堂实践（4）设置水平和竖直照片的大小，并隐藏照片的信息课堂实践（5）照片居中，并把超链接设置为块元素课堂实践（6）鼠标经过时变换照片背景改进<scripttype="text/javascript">vardivs=document.getElementsByTagName('div');for(vari=0;i<divs.length;i++){ divs[i].onmouseover=function(){ //鼠标在div上面的时候

this.className+='pichover'; } divs[i].onmouseout=function(){ //鼠标离开的时候

this.className=this.className.replace(/hover/,''); } }</script>div.pichoverul{display:block; position:absolute;}课后作业

1.完成课本P291-297的案例ToBeContinue……TakeALest课堂实践2.单列模式P298（1）取消信息列表的隐藏属性和div.pic的左浮动（2）将照片的超链接设置左浮动课堂实践（3）设置信息列表的样式P299课堂实践（4）设置列表项目P3003.改进阵列模式P301课堂实践4.双向联动模式（1）给每个div加个id（2）图像定位，P307课堂实践（3）设置信息列表的样式P307课堂实践（4）设置鼠标经过时双向联动P310（5）IE兼容定义伪类的类别选择器div.ls:hovera,div.lshovera{ background-image:url(framels_hover.jpg);}div.pt:hovera,div.pthovera{ background-image:url(framels_hover.jpg);}div.pic:hoverul,div.pichoverul{ 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代码<scriptlanguage="javascript">vardivs=document.getElementsByTagName('div');for(vari=0;i<divs.length;i++){ divs[i].onmouseover=function(){ //鼠标在行上面的时候

if(this.className.indexof('Is')!=-1) this.className+='Ishover'; elsethis.className+='pthover'; this.className+='pichover'; } divs[i].onmouseout=function(){ //鼠标在行上面的时候

this.className=this.className,replace(/Ishover/,''); this.className=this.className,replace(/pthover/,''); this.className=t