網(wǎng)頁設(shè)計與制作（18）CSS樣式（13）

----電子相冊

知識技能目標1、通過實訓(xùn)項目熟練掌握css樣式設(shè)置的綜合運用。

實訓(xùn)內(nèi)容實訓(xùn)一：電子相冊通過實例了解利用CSS實現(xiàn)電子相冊的效果1、菜單實例1

實訓(xùn)項目課堂實踐插入圖像列向圖像和橫向圖像的定義和應(yīng)用<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整體結(jié)構(gòu)設(shè)計課堂實踐(3)用兩張底片給圖片增加背景邊框

課堂實踐（4）設(shè)置水平和豎直照片的大小，并隱藏照片的信息課堂實踐（5）照片居中，并把超鏈接設(shè)置為塊元素課堂實踐（6）鼠標經(jīng)過時變換照片背景改進<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;}課后作業(yè)

1.完成課本P291-297的案例ToBeContinue……TakeALest課堂實踐2.單列模式P298（1）取消信息列表的隱藏屬性和div.pic的左浮動（2）將照片的超鏈接設(shè)置左浮動課堂實踐（3）設(shè)置信息列表的樣式P299課堂實踐（4）設(shè)置列表項目P3003.改進陣列模式P301課堂實踐4.雙向聯(lián)動模式（1）給每個div加個id（2）圖像定位，P307課堂實踐（3）設(shè)置信息列表的樣式P307課堂實踐（4）設(shè)置鼠標經(jīng)過時雙向聯(lián)動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