设为首页收藏本站
网站公告 | 这是第一条公告
     

 找回密码
 立即注册
缓存时间21 现在时间21 缓存数据 时间是一只藏在黑暗中的温柔的手,在你一出神一恍惚之间,物走星移。晚安!

时间是一只藏在黑暗中的温柔的手,在你一出神一恍惚之间,物走星移。晚安!

查看: 1574|回复: 5

dreamweaver 怎么在网页中使用div展示图片效果?

[复制链接]

  离线 

TA的专栏

  • 打卡等级:即来则安
  • 打卡总天数:26
  • 打卡月天数:0
  • 打卡总奖励:349
  • 最近打卡:2025-03-19 03:48:50
等级头衔

等級:晓枫资讯-上等兵

在线时间
0 小时

积分成就
威望
0
贡献
381
主题
363
精华
0
金钱
1500
积分
800
注册时间
2023-2-10
最后登录
2025-3-19

发表于 2023-2-14 08:14:38 | 显示全部楼层 |阅读模式
在网页制作过程中,图片的布局直接影响到网页的整体效果,那么如何使图片布局整齐划一呢?其实使用div就可以做到,现在就自己制作的过程跟大家交流一下,同时分享制作的步骤和截图,希望对你有所帮助。
091532so6foiuikikflog6.gif
Adobe Dreamweaver CS5 简体中文绿色版

  • 类型:网页设计
  • 大小:86MB
  • 语言:简体中文
  • 时间:2012-06-06
查看详情
091532xtnppduuondizx8d.jpeg

1、启动dreamweaver cs5,执行文件-新建命令,在弹出的新建文档对话框选择html文件,点击创建按钮
091533qh55mzeh828825nn.jpeg

2、在标签<title>无标题文档</title>中修改名称为<title>div布局图片效果</title>。
091533sux1dvwkh7ykzkhd.jpeg

3、在<title>标签下方输入<style>相关的代码,定义网页的整体样式,样式直接影响着网页的美观程度。
091533xp8kpp5d9aq1fdq8.jpeg

4、接着在<body>中输入div标签三个,并分别设置他们所属于的类,最外边的div设置类为db,中间两个分别为zpxc1和zpxc,在下方就会看到基本的框架效果。
091533fb7nn7n2jn9nfqj5.jpeg

5、外部的框架设计好之后,接着设计使用div布局图片,书写相应的代码,设置div的尺寸大小和相关属性,同时设计图片的相关属性。
代码为:
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;}
091533zzr91ucl11pjn1cs.jpeg

6、在类为zpxc1的div中建立新的四个div,并设置img的 src属性值,对图片进行正确的链接。
091534bcp0iwkzbxc4rf4j.jpeg

7、按f12进行在浏览器中进行预览效果,出现提醒信息“是否将改动保存到”,直接点击是,找一个合适的位置进行保存。
091534t3u332knnkk2e742.jpeg

091534lk7w2v1k79vpv1ok.jpeg

8、接着在类为zpxc的div中输入“作品展示”四个字,再次才看效果,如果不合适可进行再次修改。
091534yt16l14jsil61gzs.jpeg

9、如果图片过多,可以修改类zpxc1和db的高度,反复修改直至合适为止,重复步骤6、7采用同样的方法建立多个图片div。
091535b277cwep6gpwee77.jpeg

10、如果对“作品展示”四个字不满意的话,可以使用图片进行替换,达到满意为止,再次按f12进行在浏览器中进行查看效果,
091535iw2wa2nfx2fzeatm.jpeg

11、执行文件-另存为命令,在弹出的对话框中输入名称为“div布局图片”,找到一个合适的位置进行保存即可。
091535l7ppjphqm6z666dz.jpeg

相关推荐:
dreamweaver中怎么将文字放到图片上?
怎么使用Dreamweaver给网站图片添加alt标签?
dreamweaver cs5怎么给网页制作图片的挤压效果?

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
晓枫资讯-科技资讯社区-免责声明
免责声明:以上内容为本网站转自其它媒体,相关信息仅为传递更多信息之目的,不代表本网观点,亦不代表本网站赞同其观点或证实其内容的真实性。
      1、注册用户在本社区发表、转载的任何作品仅代表其个人观点,不代表本社区认同其观点。
      2、管理员及版主有权在不事先通知或不经作者准许的情况下删除其在本社区所发表的文章。
      3、本社区的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,举报反馈:点击这里给我发消息进行删除处理。
      4、本社区一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
      5、以上声明内容的最终解释权归《晓枫资讯-科技资讯社区》所有。
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
20
积分
20
注册时间
2022-12-25
最后登录
2022-12-25

发表于 2023-7-10 09:24:13 | 显示全部楼层
感谢分享~~~~学习学习~~~~~
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
16
积分
12
注册时间
2022-12-29
最后登录
2022-12-29

发表于 2024-3-5 12:18:42 | 显示全部楼层
感谢楼主,顶。
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
19
积分
18
注册时间
2022-12-26
最后登录
2022-12-26

发表于 2024-5-24 10:36:50 | 显示全部楼层
顶顶更健康!!!
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
20
积分
20
注册时间
2022-12-29
最后登录
2022-12-29

发表于 2024-8-12 22:15:51 | 显示全部楼层
感谢楼主分享。
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~

  离线 

TA的专栏

等级头衔

等級:晓枫资讯-列兵

在线时间
0 小时

积分成就
威望
0
贡献
0
主题
0
精华
0
金钱
15
积分
10
注册时间
2023-8-20
最后登录
2023-8-20

发表于 2024-10-31 18:44:18 | 显示全部楼层
路过,支持一下
http://bbs.yzwlo.com 晓枫资讯--游戏IT新闻资讯~~~
严禁发布广告,淫秽、色情、赌博、暴力、凶杀、恐怖、间谍及其他违反国家法律法规的内容。!晓枫资讯-社区
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1楼
2楼
3楼
4楼
5楼
6楼

手机版|晓枫资讯--科技资讯社区 本站已运行

CopyRight © 2022-2025 晓枫资讯--科技资讯社区 ( BBS.yzwlo.com ) . All Rights Reserved .

晓枫资讯--科技资讯社区

本站内容由用户自主分享和转载自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。

如有侵权、违反国家法律政策行为,请联系我们,我们会第一时间及时清除和处理! 举报反馈邮箱:点击这里给我发消息

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表