立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 890|回复: 2

[Html 教程] html当中div如何自适应增加滚动条的具体方法

[复制链接]

2061

主题

2256

帖子

1万

积分

论坛元老

Rank: 8Rank: 8

积分
18831

最佳新人活跃会员热心会员推广达人宣传达人突出贡献优秀版主

发表于 2018-1-6 02:50:39 | 显示全部楼层 |阅读模式
道勤网-数据www.daoqin.net

亲注册登录道勤网-可以查看更多帖子内容哦!(包涵精彩图片、文字详情等)请您及时注册登录-www.daoqin.net

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
今天道勤小编给一个来自马尔代夫的朋友回答了关于html当中滚动条的一个问题,顺便把解决的方法告诉大家,是一个如果让div自适应屏幕增加滚动条的方法。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

打开dw,新建一个html页面,进入html页面编辑。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

这是新建好以后的html代码,在代码的body中间编写一个div层。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

将这个新建好的html页面跟编写好的div利用快捷键“ctrl+s”另保存到我们知道的目录下,随便命名,这里小编命名为“ceshi.html”然后保存这个页面。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

我们点击dw的文件按钮,在弹出的下拉框中,我们选择“新建”。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

在新建的窗口中,我们找到“css”这一栏,点击“css”新建一个css样式。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

刚刚写好的代码中,class=“pingmu”所以,我们写样式用".pingmu{}"开始写,给它固定宽高,再添加背景色,让div自适应宽高,超过部分显示滚动条。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

将这个css样式保存到同级目录下,如ceshi.html在c盘,css样式也保存在c盘。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

保存以后,我们引入这个css样式,使用外部链接,把刚才写好的css样式引入。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

保存好样式后,双击这个ceshi.html页面,用浏览器打开后看到100像素宽高的黑块。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

测试超过div有滚动条
我们编写另一个超过原来div大小的div,class命名为content。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

为其编写的样式是宽高是150像素的,这样这个content的div就超过了原来的div,再添加上背景色。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法

保存样式跟页面后,双击ceshi.html页面,可以看到右边跟底部都多了滚动条,超过的部分可以利用滚动条拖动。

html当中div如何自适应增加滚动条的具体方法

html当中div如何自适应增加滚动条的具体方法



html当中关于滚动条的设置-让div内容超出后自动显示滚动条
http://www.daoqin.net/thread-4462-1-1.html




道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户,那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、15056962695免费电话、后台提交工单这些方式联系道勤主机客服! 如果您不是我们的客户也没问题,点击页面最右边的企业QQ在线咨询图标联系我们并购买后,我们为您免费进行无缝搬家服务,让您享受网站零访问延迟的迁移到道勤主机的服务!


7

主题

41

帖子

76

积分

大学一年级

Rank: 2

积分
76
发表于 2018-6-26 19:16:25 | 显示全部楼层
道勤网-数据www.daoqin.net
真是难得给力的帖子啊。

http://www.hunterbj.com/Article/nm.html
http://www.hunterbj.com/hydpzx/nm.html
http://www.hunterbj.com/hydpzx/hyl.html
http://www.hunterbj.com/qmdm/snqmq.html
http://www.hunterbj.com/qmdm/sldxtjt.html
http://www.hunterbj.com/qmdm/sldjt.html
http://www.hunterbj.com/qmdm/xxkjt.html
http://www.hunterbj.com/qmdm/yysnqm.html
 楼主| 发表于 2018-7-6 14:55:48 | 显示全部楼层
道勤网-数据www.daoqin.net
兴隆 发表于 2018-6-26 19:16
真是难得给力的帖子啊。

http://www.hunterbj.com/Article/nm.html

看到这帖子真是高兴!非常感谢道勤的老师,太感谢了
加入道勤网VIP-www.daoqin.net-享受建站指导服务!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

道勤网- 推荐内容!上一条 /2 下一条



 
 
技术支持
在线客服
点击这里给我发消息
点击这里给我发消息
道勤建站群:
3群建站-美工交流-道勤
道勤美工群:
3群建站-美工交流-道勤
工作时间:
8:00-18:00
客服热线:
15056962695
官方微信扫一扫
发布主题 上个主题 下个主题 快速回复 返回列表 联系我们 官方QQ群

关于我们|手机版|小黑屋|地图|【道勤网】-www.daoqin.net 软件视频自学教程|免费教程|自学电脑|3D教程|平面教程|影视动画教程|办公教程|机械设计教程|网站设计教程【道勤网】 ( 皖ICP备15000319号|赞助我们  

GMT+8, 2020-1-22 05:42

Powered by DaoQin! X3.2 © 2016-2063 Dao Qin & 道勤科技

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