Dreamweaver制作網頁的時候，發現網頁的瀏覽交互效果會使人感到爽心悅目的感覺，該怎么制作呢？下面我們就來看看Dreamweaver何展現手風琴圖片的交互效果的教程。
1、打開Dreamweaver cc 2014軟件，選擇建立html界面，里面自動生成一些必要代碼的代碼格式，節省時間。
2、先保存代碼到一個建好的文件夾里，里面的已有準備好的將要做效果的圖片的文件夾。
3、在body標簽內輸入：
<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的文件路徑的圖片位置和圖片命名都要一一對應。
4、在body標簽前面位置，輸入：
<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鍵，彈出頁面，可以看到圖片。
5、彈出頁面后，鼠標移到圖片上面左右移動，就可以看到圖片滑動效果。
以上就是dw制作手風琴圖片展示效果的教程，希望大家喜歡，請繼續關注武林網。
相關推薦：
DW怎么設置網站的背景圖像?
dreamweaver中怎么將文字放到圖片上?
dreamweaver中怎么交互圖像? dw制作鼠標經過圖像換圖的教程
新聞熱點
疑難解答
