Dreamweaver怎么制作手風(fēng)琴圖片展示效果?
百度經(jīng)驗(yàn) 發(fā)布時(shí)間：2018-12-02 10:23:04 作者：怒浪吼 
我要評(píng)論
我要評(píng)論Dreamweaver怎么制作手風(fēng)琴圖片展示效果？Dreamweaver中想要制作動(dòng)態(tài)圖片，該怎么制作手風(fēng)琴圖片展示效果的交互呢？請(qǐng)看下文詳細(xì)介紹，需要的朋友可以參考下
Dreamweaver制作網(wǎng)頁(yè)的時(shí)候，發(fā)現(xiàn)網(wǎng)頁(yè)的瀏覽交互效果會(huì)使人感到爽心悅目的感覺(jué)，該怎么制作呢？下面我們就來(lái)看看Dreamweaver何展現(xiàn)手風(fēng)琴圖片的交互效果的教程。
adobe dreamweaver cc 2014 中文安裝版 32&64位
- 類型：網(wǎng)頁(yè)設(shè)計(jì)
- 大?。?/span>320MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2014-06-25
1、打開(kāi)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鍵，彈出頁(yè)面，可以看到圖片。
5、彈出頁(yè)面后，鼠標(biāo)移到圖片上面左右移動(dòng)，就可以看到圖片滑動(dòng)效果。
以上就是dw制作手風(fēng)琴圖片展示效果的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
dreamweaver中怎么交互圖像? dw制作鼠標(biāo)經(jīng)過(guò)圖像換圖的教程
相關(guān)文章
Dreamweaver cc2018主題顏色怎么設(shè)置?
Dreamweaver cc2018主題顏色怎么設(shè)置？Dreamweaver中想要設(shè)置主題顏色，該怎么設(shè)置呢？下面我們就來(lái)看看dw2018設(shè)置主題顏色的教程，需要的朋友可以參考下2018-09-28
Dreamweaver怎么制作虛線表格？Dreamweaver制作的表格是實(shí)線邊框的，想要制作虛線邊框，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-08-23
Dreamweaver怎么添加windows字體？Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，想要添加windows系統(tǒng)中的字體，該怎么添加呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-08-09
Dreamweaver中CSS怎么制作徑向圓形漸變？Dreamweaver中可以利用DIV+CSS制作圓形漸變效果，今天我們就來(lái)介紹五種簡(jiǎn)單的制作方法，需要的朋友可以參考下2018-08-01
Dreamweaver圖片的亮度和對(duì)比度怎么設(shè)置?
Dreamweaver圖片的亮度和對(duì)比度怎么設(shè)置？dw cs6中插入的圖片想要簡(jiǎn)單的調(diào)節(jié)亮度和對(duì)比度，該怎么調(diào)節(jié)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-31
Dreamweaver怎么設(shè)置div的背景顏色？dw cs6中想要設(shè)置div標(biāo)簽的背景顏色，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-25
Dreamweaver中div標(biāo)簽怎么設(shè)置左右并排?
Dreamweaver中div標(biāo)簽怎么設(shè)置左右并排？Dreamweaver中div標(biāo)簽?zāi)J(rèn)是上下并排的，想要設(shè)置成左右并排，該怎么設(shè)置呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-17
Dreamweaver2018怎么插入項(xiàng)目列表?
Dreamweaver2018項(xiàng)目列表怎么使用？Dreamweaver中的文本想要添加項(xiàng)目列表，看上去條理分明，該怎么添加項(xiàng)目列表呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-06
Dreamweaver2018怎么快速插入按鈕？dw2018需要按鈕，該怎么快速插入按鈕，節(jié)省自己制作的時(shí)間呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-06
Dreamweaver2018怎么快速插入文本框？dw2018制作網(wǎng)頁(yè)的時(shí)候，想要插入文本框，該怎么插入文本框呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-06
