欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Dreamweaver怎么制作手風琴圖片展示效果?

百度經(jīng)驗   發(fā)布時間：2018-12-02 10:23:04   作者：怒浪吼   我要評論
Dreamweaver怎么制作手風琴圖片展示效果？Dreamweaver中想要制作動態(tài)圖片，該怎么制作手風琴圖片展示效果的交互呢？請看下文詳細介紹，需要的朋友可以參考下

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

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

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

3、在body標簽內(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的文件路徑的圖片位置和圖片命名都要一一對應。

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制作手風琴圖片展示效果的教程，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。

相關(guān)推薦：

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

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

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

相關(guān)文章

  • Dreamweaver cc2018主題顏色怎么設(shè)置?

    Dreamweaver cc2018主題顏色怎么設(shè)置？Dreamweaver中想要設(shè)置主題顏色，該怎么設(shè)置呢？下面我們就來看看dw2018設(shè)置主題顏色的教程，需要的朋友可以參考下
    2018-09-28

  • Dreamweaver怎么制作虛線表格?

    Dreamweaver怎么制作虛線表格？Dreamweaver制作的表格是實線邊框的，想要制作虛線邊框，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-08-23

  • Dreamweaver怎么添加windows字體?

    Dreamweaver怎么添加windows字體？Dreamweaver設(shè)計網(wǎng)頁的時候，想要添加windows系統(tǒng)中的字體，該怎么添加呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-08-09

  • Dreamweaver中CSS怎么制作徑向圓形漸變?

    Dreamweaver中CSS怎么制作徑向圓形漸變？Dreamweaver中可以利用DIV+CSS制作圓形漸變效果，今天我們就來介紹五種簡單的制作方法，需要的朋友可以參考下
    2018-08-01

  • Dreamweaver圖片的亮度和對比度怎么設(shè)置?

    Dreamweaver圖片的亮度和對比度怎么設(shè)置？dw cs6中插入的圖片想要簡單的調(diào)節(jié)亮度和對比度，該怎么調(diào)節(jié)呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-07-31

  • Dreamweaver怎么設(shè)置div的背景顏色?

    Dreamweaver怎么設(shè)置div的背景顏色？dw cs6中想要設(shè)置div標簽的背景顏色，該怎么設(shè)置呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-07-25

  • Dreamweaver中div標簽怎么設(shè)置左右并排?

    Dreamweaver中div標簽怎么設(shè)置左右并排？Dreamweaver中div標簽默認是上下并排的，想要設(shè)置成左右并排，該怎么設(shè)置呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-07-17

  • Dreamweaver2018怎么插入項目列表?

    Dreamweaver2018項目列表怎么使用？Dreamweaver中的文本想要添加項目列表，看上去條理分明，該怎么添加項目列表呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-07-06

  • Dreamweaver2018怎么快速插入按鈕?

    Dreamweaver2018怎么快速插入按鈕？dw2018需要按鈕，該怎么快速插入按鈕，節(jié)省自己制作的時間呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-07-06

  • Dreamweaver2018怎么快速插入文本框?

    Dreamweaver2018怎么快速插入文本框？dw2018制作網(wǎng)頁的時候，想要插入文本框，該怎么插入文本框呢？下面我們就來看看詳細的教程，需要的朋友可以參考下
    2018-07-06

最新評論