Dreamweaver制作網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)網(wǎng)頁(yè)的瀏覽交互效果會(huì)使人感到爽心悅目的感覺，該怎么制作呢？下面我們就來(lái)看看Dreamweaver何展現(xiàn)手風(fēng)琴圖片的交互效果的教程。

1、打開Dreamweaver cc  2014軟件，選擇建立html界面，里面自動(dòng)生成一些必要代碼的代碼格式，節(jié)省時(shí)間。

2、先保存代碼到一個(gè)建好的文件夾里，里面的已有準(zhǔn)備好的將要做效果的圖片的文件夾。

3、在body標(biāo)簽內(nèi)輸入：

<ul>  <li><img src="images/ad1.jpg" alt="圖片"></li>  <li><img src="images/ad2.jpg" alt="圖片"></li>  <li><img src="images/ad3.jpg" alt="圖片"></li>  <li><img src="images/ad4.jpg" alt="圖片"></li>  <li><img src="images/ad5.jpg" alt="圖片"></li>  <li><img src="images/ad6.jpg" alt="圖片"></li></ul>

注意：src的文件路徑的圖片位置和圖片命名都要一一對(duì)應(yīng)。

4、在body標(biāo)簽前面位置，輸入：

<style> ul,li{list-style:none; padding:0; margin:0;} ul{width:960px; height:300px; margin:100px auto; border:1px solid #000; overflow:hidden;} ul li{width:160px;height:300px;float:left;background-color:red;transition-property:width;transition-duration:1s;}ul:hover li{width:58px;}ul li:hover{width:670px} </style>；

輸入完后，摁F12鍵，彈出頁(yè)面，可以看到圖片。

5、彈出頁(yè)面后，鼠標(biāo)移到圖片上面左右移動(dòng)，就可以看到圖片滑動(dòng)效果。

以上就是dw制作手風(fēng)琴圖片展示效果的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注武林網(wǎng)。

相關(guān)推薦：

DW怎么設(shè)置網(wǎng)站的背景圖像?

dreamweaver中怎么將文字放到圖片上?

dreamweaver中怎么交互圖像? dw制作鼠標(biāo)經(jīng)過圖像換圖的教程