網(wǎng)頁設計20-相冊2

1、授課人：何蘊婷EMAIL：CSS樣式（樣式（13） -電子相冊電子相冊內(nèi)部培訓資料,不作任何宣傳用途1、通過實訓項目熟練掌握css樣式設置的綜合運用。內(nèi)部培訓資料,不作任何宣傳用途實訓一：電子相冊內(nèi)部培訓資料,不作任何宣傳用途 通過實例了解利用CSS實現(xiàn)電子相冊的效果1、菜單、菜單實例實例1內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐 插入圖像 列向圖像和橫向圖像的定義和應用 鳴沙山Trip01￥79.9(1)搭建頁面框架搭建頁面框架內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐(2) 陣列模式陣列模式對對pic整體結(jié)構(gòu)設計整體結(jié)構(gòu)設計內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐(3)用兩

2、張底片給圖片增加背景邊框用兩張底片給圖片增加背景邊框內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（4）設置水平和豎直照片的大小，并隱藏照片的信息）設置水平和豎直照片的大小，并隱藏照片的信息內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（5 5）照片居中，并把超鏈接設置為塊元素）照片居中，并把超鏈接設置為塊元素內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（6 6）鼠標經(jīng)過時變換照片背景）鼠標經(jīng)過時變換照片背景內(nèi)部培訓資料,不作任何宣傳用途課后作業(yè)課后作業(yè) 1. 1. 完成課本完成課本P291-297P291-297的案例的案例內(nèi)部培訓資料,不作任何宣傳用途To Be To Be Contin

3、ueContinue內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐2.單列模式單列模式P298（1）取消信息列表的隱藏屬性和）取消信息列表的隱藏屬性和div.pic 的的左浮動左浮動（2）將照片的超鏈接設置左浮動）將照片的超鏈接設置左浮動內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（3）設置信息列表的樣式）設置信息列表的樣式P299內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（4）設置列表項目）設置列表項目P3003.改進陣列模式改進陣列模式P301內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐4.雙向聯(lián)動模式雙向聯(lián)動模式（1）給每個）給每個div加個加個id（2）圖像定位，）圖像定位，P

4、307內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（3）設置信息列表的樣式）設置信息列表的樣式P307內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（4）設置鼠標經(jīng)過時雙向聯(lián)動）設置鼠標經(jīng)過時雙向聯(lián)動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.picho

5、ver 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;內(nèi)部培訓資料,不作任何宣傳用途課堂實踐課堂實踐 加JavaScript代碼var divs = document.getElementsByTagName(div);for (var i=0;idivs.length;i+)divsi

6、.onmouseover = function()/鼠標在行上面的時候if(this.className.indexof(Is)!=-1)this.className+=Ishover;else this.className+=pthover;this.className+=pichover;divsi.onmouseout = function()/鼠標在行上面的時候this.className=this.className,replace(/Ishover/,);this.className=this.className,replace(/pthover/,);this.className=this.className,replace(/pichov