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

創(chuàng)新互聯(lián)建站成立與2013年，先為東鄉(xiāng)族等服務(wù)建站，東鄉(xiāng)族等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為東鄉(xiāng)族企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

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

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

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的文件路徑的圖片位置和圖片命名都要一一對應(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)移到圖片上面左右移動，就可以看到圖片滑動效果。

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

網(wǎng)頁名稱：Dreamweaver如何制作手風(fēng)琴圖片展示效果
URL地址：http://www.chinadenli.net/article4/igpcie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站導(dǎo)航、網(wǎng)站策劃、動態(tài)網(wǎng)站、網(wǎng)站收錄、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)