溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
dreamweaver中怎么使用div展示圖片效果，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
1、啟動(dòng)dreamweaver cs5，執(zhí)行文件-新建命令，在彈出的新建文檔對(duì)話框選擇html文件，點(diǎn)擊創(chuàng)建按鈕。
2、在標(biāo)簽<title>無(wú)標(biāo)題文檔</title>中修改名稱為<title>div布局圖片效果</title>。
3、在<title>標(biāo)簽下方輸入<style>相關(guān)的代碼，定義網(wǎng)頁(yè)的整體樣式，樣式直接影響著網(wǎng)頁(yè)的美觀程度。
4、接著在<body>中輸入div標(biāo)簽三個(gè)，并分別設(shè)置他們所屬于的類(lèi)，最外邊的div設(shè)置類(lèi)為db，中間兩個(gè)分別為zpxc1和zpxc，在下方就會(huì)看到基本的框架效果。
5、外部的框架設(shè)計(jì)好之后，接著設(shè)計(jì)使用div布局圖片，書(shū)寫(xiě)相應(yīng)的代碼，設(shè)置div的尺寸大小和相關(guān)屬性，同時(shí)設(shè)計(jì)圖片的相關(guān)屬性。
代碼為：
div.pt img{margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid #333;}
div.pt{float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}
.pic{ float:right;}
6、在類(lèi)為zpxc1的div中建立新的四個(gè)div，并設(shè)置img的 src屬性值，對(duì)圖片進(jìn)行正確的鏈接。
7、按f12進(jìn)行在瀏覽器中進(jìn)行預(yù)覽效果，出現(xiàn)提醒信息“是否將改動(dòng)保存到”，直接點(diǎn)擊是，找一個(gè)合適的位置進(jìn)行保存。
8、接著在類(lèi)為zpxc的div中輸入“作品展示”四個(gè)字，再次才看效果，如果不合適可進(jìn)行再次修改。
9、如果圖片過(guò)多，可以修改類(lèi)zpxc1和db的高度，反復(fù)修改直至合適為止，重復(fù)步驟6、7采用同樣的方法建立多個(gè)圖片div。
10、如果對(duì)“作品展示”四個(gè)字不滿意的話，可以使用圖片進(jìn)行替換，達(dá)到滿意為止，再次按f12進(jìn)行在瀏覽器中進(jìn)行查看效果，
11、執(zhí)行文件-另存為命令，在彈出的對(duì)話框中輸入名稱為“div布局圖片”，找到一個(gè)合適的位置進(jìn)行保存即可。
看完上述內(nèi)容，你們掌握dreamweaver中怎么使用div展示圖片效果的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
