dreamweaver中怎么使用div展示图片效果
dreamweaver中怎么使用div展示图片效果，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
成都创新互联公司服务项目包括民和网站建设、民和网站制作、民和网页制作以及民和网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，民和网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到民和省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
1、启动dreamweaver cs5，执行文件-新建命令，在弹出的新建文档对话框选择html文件，点击创建按钮。
2、在标签
无标题文档中修改名称为
div布局图片效果。
.jpg)
3、在标签下方输入<style>相关的代码，</strong>定义网页的整体样式，样式直接影响着网页的美观程度。</p><p><img src="/upload/otherpic57/2621.jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>4、接着在<strong><body>中输入div标签三个，</strong>并分别设置他们所属于的类，<strong>最外边的div设置类为db，中间两个分别为zpxc1和zpxc，</strong>在下方就会看到基本的框架效果。</p><p><img src="/upload/otherpic57/2622(1).jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>5、外部的框架设计好之后，接着设计使用div布局图片，书写相应的代码，设置div的尺寸大小和相关属性，同时设计图片的相关属性。</p><p>代码为：</p><p><strong>div.pt img{margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid #333;}</strong></p><p><strong>div.pt{float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}</strong></p><p><strong>.pic{ float:right;}</strong></p><p><img src="/upload/otherpic57/2623.jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>6、在类为zpxc1的div中建立新的四个<strong>div，并设置img的 src属性值，</strong>对图片进行正确的链接。</p><p><img src="/upload/otherpic57/2624(1).jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>7、按f12进行在浏览器中进行预览效果，出现提醒信息<strong>“是否将改动保存到”，</strong>直接点击是，找一个合适的位置进行保存。</p><p><img src="/upload/otherpic57/2625.jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p><img src="/upload/otherpic57/2626.jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>8、接着在类为zpxc的div中输入“<strong>作品展示</strong>”四个字，再次才看效果，如果不合适可进行再次修改。</p><p><img src="/upload/otherpic57/2627(1).jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>9、如果图片过多，<strong>可以修改类zpxc1和db的高度</strong>，反复修改直至合适为止，重复步骤6、7采用同样的方法建立多个图片div。</p><p><img src="/upload/otherpic57/2628(1).jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>10、如果对“作品展示”四个字不满意的话，可以使用图片进行替换，达到满意为止，再次按f12进行在浏览器中进行查看效果，</p><p><img src="/upload/otherpic57/2629.jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>11、执行文件-另存为命令，在弹出的对话框中输入名称为<strong>“div布局图片</strong>”，找到一个合适的位置进行保存即可。</p><p><img src="/upload/otherpic57/2630.jpg" alt="dreamweaver中怎么使用div展示图片效果"></p><p>看完上述内容，你们掌握dreamweaver中怎么使用div展示图片效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！</p>
<br>
本文标题：dreamweaver中怎么使用div展示图片效果 <br>
URL链接：<a href="http://dzwzjz.com/article/ghgihc.html">http://dzwzjz.com/article/ghgihc.html</a>
</div>
</div>
<div class="othernews">
<h3>其他资讯</h3>
<div class="othernews_list">
<ul>
<li>
<a href="/article/hepdch.html">python中函数开平方 python如何开平方</a>
</li><li>
<a href="/article/hepdsg.html">函数跳出python c语言跳出函数</a>
</li><li>
<a href="/article/hepdee.html">Java适配器读卡器代码 java串口读卡</a>
</li><li>
<a href="/article/hepdge.html">刷windows系统教程的简单介绍</a>
</li><li>
<a href="/article/hepdse.html">windows山寨系统吗的简单介绍</a>
</li> </ul>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer_content">
<div class="footer_content_top clear">
<div class="content_top_share fl">
<div><img src="/Public/Home/img/logo.png"></div>
<div class="top_share_content">
<dd>分享至：</dd>
<dt class="bdsharebuttonbox clear" id="share">
<a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a>
</dt>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</div>
</div>
<div class="content_top_left fl clear">
<div class="top_left_list fl">
<dd><a href="/about/">关于我们</a></dd>
<dt>
<a href="/about/#gsjj">公司简介</a>
<a href="/about/#fzlc">发展历程</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/service/">服务项目</a></dd>
<dt>
<a href="/service/">高端网站建设</a>
<a href="/miniprogram/">小程序开发</a>
<a href="/service/app.html">APP开发</a>
<a href="/service/yingxiao.html">网络营销</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/jianzhan/">建站知识</a></dd>
<dt>
<a href="/jianzhan/">行业新闻</a>
<a href="/jianzhan/">建站学堂</a>
<a href="/jianzhan/">常见问题</a>
</dt>
</div>
<div class="top_left_list fl">
<dd><a href="/contact/">联系我们</a></dd>
<dt>
<a href="/contact/#lxwm">公司地址</a>
<a href="/contact/#rczp">人才招聘</a>
</dt>
</div>
</div>
<div class="content_top_right addressR fr">
<div class="top_right_title addressf_title">
<a href="javascript:;" class="on">成都</a>
<a href="javascript:;">达州</a>
</div>
<div class="top_right_content addressf">
<div class="right_content_li on">
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">电话：028-86922220</dt>
</div>
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt>
</div>
</div>
<div class="right_content_li">
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">电话：028-86922220</dt>
</div>
<div class="right_content_list clear">
<dd class="fl iconfont"></dd>
<dt class="fl">地址：达州市南岸区弹子石腾龙大道58号2栋21-6</dt>
</div>
</div>
</div>
</div>
</div>
<div class="link">
友情链接：
<a href="http://m.xwcx.net/" title="响应式建站" target="_blank">响应式建站</a> <a href="http://www.cdxwcx.cn/tuoguan/zigong.html" title="自贡主机托管" target="_blank">自贡主机托管</a> <a href="http://www.cxhljz.cn/" title="成都网站建设" target="_blank">成都网站建设</a> <a href="http://www.ncjbc.cn/" title="南充护栏钻孔机" target="_blank">南充护栏钻孔机</a> <a href="http://www.tjysf.cn/" title="郫县明安消防器材" target="_blank">郫县明安消防器材</a> <a href="http://www.lbtgc.cn/" title="力比特工程" target="_blank">力比特工程</a> <a href="https://www.cdxwcx.com/city/guanghan/" title="广汉做网站" target="_blank">广汉做网站</a> <a href="http://m.cdcxhl.com/" title="成都建网站" target="_blank">成都建网站</a> <a href="http://www.ncjierui.cn/" title="彭山网站制作" target="_blank">彭山网站制作</a> <a href="http://www.ghjinhua.cn/" title="广汉锦华橡塑" target="_blank">广汉锦华橡塑</a> </div>
</div>
<div class="footer_content_copyright clear">版权所有：青羊区大橙子信息咨询工作室
<a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2022028542号-14</a>
</div>
</div>
<!--浮窗-->
<div class="FloatingWindow clear">
<a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt><span>在线</span>咨询</dt>
</div>
</a>
<a href="javascript:;" class="FloatingWindow_list fr">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt>服务热线</dt>
</div>
<div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div>
</a>
<a href="javascript:;" class="FloatingWindow_list fr STop">
<div class="FloatingWindow_list_title">
<dd class="iconfont"></dd>
<dt>TOP</dt>
</div>
</a>
</div>
<script src="/Public/Home/js/jquery-1.8.3.min.js"></script>
<script src="/Public/Home/js/comm.js"></script>
<script src="/Public/Home/js/wow.js"></script>
<script src="/Public/Home/js/common.js"></script>
</body>
</html>
<script>
$(".cont img").each(function(){
var src = $(this).attr("src"); //获取图片地址
var str=new RegExp("http");
var result=str.test(src);
if(result==false){
var url = "https://www.cdcxhl.com"+src; //绝对路径
$(this).attr("src",url);
}
});
window.onload=function(){
document.oncontextmenu=function(){
return false;
}
}
</script>
达州做网站
