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、彈出頁面后，鼠標移到圖片上面左右移動，就可以看到圖片滑動效果。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Dreamweaver如何制作手風琴圖片展示效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!