讲师中心 微信公众号
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机游戏
最近更新
首页 > web前端 > html教程 > 正文

想问一下，网页中的这种效果怎么做出来_html/css_WEB-ITnose

php中文网
发布： 2016-06-21 09:43:13
原创
968人浏览过

想问一下，网页中的这种效果怎么做出来

回复讨论(解决方案)

这个框应该设置为空或是隐藏起来了，调用的时候才设置document.getElementsByTagName('body')[0].style.overflow = 'hidden';并填入内容或设置框为可见。

动态创建一个div  在这个div里在创建文本框啊  按钮啊之类的  最后append到body上试试

你这个问题牵涉到
document操作
样式的设置
js的代码


简单的说就是 一个div absolute在页面的指定位置上 可以是动态建立 也可以是预先有的但是隐藏着

最后，因为框里面内容是登录，还涉及ajax

但是他那个框为什么能够挪动呢？

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：如何让一张带有链接的图片横竖都居中，显示在页面最中央_html/css_WEB-ITnose 下一篇：如何将input设置和td一样大且不改变样式_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
jimdo如何添加html5表单_jimdo表单html5代码嵌入与字段设置【实操】 可通过嵌入HTML5表单代码、启用字段验证属性、添加CSS样式反馈及替换提交按钮并绑定JS事件四种方式在Jimdo实现自定义表单行为。
2025-12-23 20:14:41
902
html5怎么写备注_HT5用给代码添加注释说明【备注】 HTML5注释需用，script内用//或//，style内用//，禁在属性值中写HTML注释，编辑器可识别折叠代码。
2025-12-23 20:14:02
928
响应式HTML5按钮适配不同屏幕方法【方法】 实现响应式HTML5按钮需五种方法：一、CSS媒体查询按max-width断点调整样式；二、用rem/vw等相对单位替代px；三、Flexbox控制容器与按钮伸缩；四、CSS变量配合requestAnimationFrame优化的JS动态适配；五、Tailwind等框架的响应式工具类。
2025-12-23 20:11:32
612
jimdo能否添加html5弹窗_jimdo弹窗html5代码实现与触发条件【技巧】 可在Jimdo实现HTML5弹窗的四种方法：一、用内置“弹窗链接”模块；二、通过HTML区块注入精简dialog结构（需配合内联CSS）；三、外部托管HTML+iframe嵌入；四、纯CSS:target伪类无JS方案。
2025-12-23 20:09:09
831
html5怎么跳出页面_HT5用location.href或a标签实现页面跳转跳出【跳出】 HTML5页面跳转有五种方法：一、location.href直接跳转并替换历史；二、location.replace()跳转且不保留当前页历史；三、a标签href跳转，支持新窗口及历史回退；四、a标签+JavaScript事件控制条件跳转；五、metarefresh实现定时自动跳转。
2025-12-23 20:06:03
553
html5文件运行不出来怎么回事_析html5文件运行失败原因【解析】 首先检查文件扩展名和编码格式，确保为.html且使用UTF-8编码；接着验证HTML5结构完整性，包含及正确闭合的标签；然后排查外部资源路径是否正确，利用开发者工具查看404错误；排除浏览器兼容性问题，优先在现代浏览器中测试并避免未广泛支持的API；检查JavaScript语法错误与执行顺序，确保脚本无报错并在DOM加载后运行；最后确认是否需本地服务器环境，对AJAX等功能使用Python等工具启动HTTP服务测试。
2025-12-23 20:04:02
375
html5空行怎么表示_HTML5用换行或p标签占位表示空行分隔【表示】 HTML5中空行通过块级元素默认外边距或显式空白结构实现：一、用空标签；二、用带margin的；三、用配合line-height；四、用CSS伪元素生成装饰性空行。
2025-12-23 20:01:02
137
html5怎么设置月份_HTML5用input type="month"让用户选择年月月份【设置】 HTML5的inputtype="month"提供原生年月选择器，格式为“YYYY-MM”，支持value默认值、min/max范围限制、name表单提交，并需JavaScript降级兼容旧浏览器。
2025-12-23 20:00:13
475
html5怎么打包运行_HT5用Webpack或Gulp打包后浏览器打开运行【打包】 应通过HTTP服务运行打包后的HTML5页面，而非双击打开：一、Webpack配webpack-dev-server启动本地服务；二、Gulp配BrowserSync提供实时重载；三、用Python/Node.js轻量HTTP工具托管dist目录；四、仅当必须双击运行时，才配置publicPath为‘./’并手动管理资源路径。
2025-12-23 19:49:02
176
Html5如何监听蓝牙_Html5蓝牙监听实现方法【硬件交互】 需通过WebBluetoothAPI实现蓝牙数据实时监听：一、用CharacteristicValueChanged事件监听支持Notify/Indicate的特征；二、轮询readValue()应对不支持通知的特征；三、监听GATT连接状态确保链路稳定；四、统一管理多特征订阅防内存泄漏。
2025-12-23 19:44:37
602
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部