網(wǎng)頁(yè)設(shè)計(jì)19-20相冊(cè)

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

----電子相冊(cè)

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

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

實(shí)訓(xùn)項(xiàng)目課堂實(shí)踐插入圖像列向圖像和橫向圖像的定義和應(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)搭建頁(yè)面框架課堂實(shí)踐(2)陣列模式對(duì)pic整體結(jié)構(gòu)設(shè)計(jì)課堂實(shí)踐(3)用兩張底片給圖片增加背景邊框

課堂實(shí)踐（4）設(shè)置水平和豎直照片的大小，并隱藏照片的信息課堂實(shí)踐（5）照片居中，并把超鏈接設(shè)置為塊元素課堂實(shí)踐（6）鼠標(biāo)經(jīng)過時(shí)變換照片背景改進(jìn)<scripttype="text/javascript">vardivs=document.getElementsByTagName('div');for(vari=0;i<divs.length;i++){ divs[i].onmouseover=function(){ //鼠標(biāo)在div上面的時(shí)候

this.className+='pichover'; } divs[i].onmouseout=function(){ //鼠標(biāo)離開的時(shí)候

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

1.完成課本P291-297的案例ToBeContinue……TakeALest課堂實(shí)踐2.單列模式P298（1）取消信息列表的隱藏屬性和div.pic的左浮動(dòng)（2）將照片的超鏈接設(shè)置左浮動(dòng)課堂實(shí)踐（3）設(shè)置信息列表的樣式P299課堂實(shí)踐（4）設(shè)置列表項(xiàng)目P3003.改進(jìn)陣列模式P301課堂實(shí)踐4.雙向聯(lián)動(dòng)模式（1）給每個(gè)div加個(gè)id（2）圖像定位，P307課堂實(shí)踐（3）設(shè)置信息列表的樣式P307課堂實(shí)踐（4）設(shè)置鼠標(biāo)經(jīng)過時(shí)雙向聯(lián)動(dòng)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; }課堂實(shí)踐加JavaScript代碼<scriptlanguage="javascript">vardivs=document.getElementsByTagName('div');for(vari=0;i<divs.length;i++){ divs[i].onmouseover=function(){ //鼠標(biāo)在行上面的時(shí)候

if(this.className.indexof('Is')!=-1) this.className+='Ishover'; elsethis.className+='pthover'; this.className+='pichover'; } divs[i].onmouseout=function(){ //鼠標(biāo)在行上面的時(shí)候

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