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

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

2、張底片給圖片增加背景邊框用兩張底片給圖片增加背景邊框內(nèi)部培訓(xùn)資料,不作任何宣傳用途課堂實(shí)踐課堂實(shí)踐（4）設(shè)置水平和豎直照片的大小，并隱藏照片的信息）設(shè)置水平和豎直照片的大小，并隱藏照片的信息內(nèi)部培訓(xùn)資料,不作任何宣傳用途課堂實(shí)踐課堂實(shí)踐（5 5）照片居中，并把超鏈接設(shè)置為塊元素）照片居中，并把超鏈接設(shè)置為塊元素內(nèi)部培訓(xùn)資料,不作任何宣傳用途課堂實(shí)踐課堂實(shí)踐（6 6）鼠標(biāo)經(jīng)過時變換照片背景）鼠標(biāo)經(jīng)過時變換照片背景內(nèi)部培訓(xùn)資料,不作任何宣傳用途改進(jìn)改進(jìn)var divs = document.getElementsByTagName(div);for (var i=0;idivs.length;i+

3、)divsi.onmouseover = function()/鼠標(biāo)在div上面的時候this.className += pichover;divsi.onmouseout = function()/鼠標(biāo)離開的時候this.className=this.className.replace(/hover/,);div.pichover ul display:block;position:absolute;內(nèi)部培訓(xùn)資料,不作任何宣傳用途課后作業(yè)課后作業(yè) 1. 1. 完成課本完成課本P291-297P291-297的案例的案例內(nèi)部培訓(xùn)資料,不作任何宣傳用途To Be To Be ContinueCo

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

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

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

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