html左右滑動(dòng)切換圖片代碼 怎樣用dreamweaver制作滑動(dòng)切換圖片效果?
怎樣用dreamweaver制作滑動(dòng)切換圖片效果? 在DreamWeaver中實(shí)現(xiàn)滑動(dòng)切換圖片效果,可以使用‘鼠標(biāo)經(jīng)過(guò)圖像’功能來(lái)實(shí)現(xiàn),也可以用CSS控制來(lái)實(shí)現(xiàn)?! ‖F(xiàn)在具體講一下CSS控制實(shí)現(xiàn)圖片
怎樣用dreamweaver制作滑動(dòng)切換圖片效果?
在DreamWeaver中實(shí)現(xiàn)滑動(dòng)切換圖片效果,可以使用‘鼠標(biāo)經(jīng)過(guò)圖像’功能來(lái)實(shí)現(xiàn),也可以用CSS控制來(lái)實(shí)現(xiàn)?! ‖F(xiàn)在具體講一下CSS控制實(shí)現(xiàn)圖片切換效果! 首先制作一個(gè)ID為abc的div寬度50px高度50px在abc里面隨便打一個(gè)字設(shè)置一個(gè)空鏈接?! ∪缓蠖xabc寬度50px高度50pxa標(biāo)簽的塊形式代碼如下: <style type="text/css"> <!-- #abc a { height: 50px width: 50px display: block } --> </style> <!--注意上面才是CSS代碼,下面是div--> <divid="abc"><href="#">字體</a></div> 然后設(shè)置div的背景圖片比如圖片名為bj.gif CSS代碼變?yōu)椋骸 ?ltstyle type="text/css"> <!-- #abc a { background-image: url(bj.gif) height: 50px width: 50px display: block } --> </style> 最后設(shè)置鼠標(biāo)經(jīng)過(guò)的樣式比如鼠標(biāo)經(jīng)過(guò)圖片為bjj.gif CSS代碼變?yōu)槿缦拢骸 ?ltstyle type="text/css"> <!-- #abc a { background-image: url(bj.gif) height: 50px width: 50px display: block } #abc a:hover { background-image: url(bjj.gif) } --> </style>