Dreamweaver如何制作手風(fēng)琴圖片展示效果

這篇文章主要介紹了Dreamweaver如何制作手風(fēng)琴圖片展示效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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鍵，彈出頁面，可以看到圖片。

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Dreamweaver如何制作手風(fēng)琴圖片展示效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!