html 相关问题

固定定位 div 中未设置高度时溢出不起作用

我有以下代码，我试图构建一个没有设置高度的模态，但确实有一个最大高度，因此它会根据其内容进行调整，但不会增长到超过特定限制。亲...

我可以从父页面验证 iFrame 页面吗？

我有一个简单的 HTML 页面，可以轮流显示在校园周围几台电视上的几个状态页面。我定期更新页面和链接。很多时候页面需要验证...

CSS - 转换

HTML \\\\ CSS .buttonFrame { 位置：相对； 宽度：55 像素； 身高... HTML \<div class="buttonFrame"\>\<div class="btn"\>\</div\>\</div\> CSS .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; z-index: 100px; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100% ); background-position: 0 0; transition: width 2s, height 2s; /* Added height transition */ } .buttonFrame:hover .btn { /* Changed to target .btn on hover of .buttonFrame */ width: 100%; /* Adjusted width for hover effect */ height: 100%; /* Adjusted height for hover effect */ background-position: 0 0; /* transform: scaleX(2); */ } 过渡效果是从左上角核心开始，但需要从左上角开始 我尝试了互联网和人工智能的几种方法，但没有任何效果。基本上我试图使它像一个小的加载栏，当我将鼠标悬停在块上时加载。 正如 A Haworth 在评论中提到的，仅在悬停和过渡时设置 height 会使其从 0 更改为 100%。您可以将其删除并将 height 添加到按钮。 另外，z-index没有计量单位，应该是z-index:100; 保留您的代码： .buttonFrame { position: relative; width: 55px; height: 20px; border-radius: 12px; border: 2px solid black; overflow: hidden; top: 30%; left: 45%; /* z-index: 100px; */ z-index: 100; } .btn { border-radius: 12px; width: 0%; height: 0%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); background-position: 0 0; /* transition: width 2s, height 2s; */ transition: width 2s; height: 100%; } .buttonFrame:hover .btn { width: 100%; /* height: 100%; */ /* background-position: 0 0; */ } <div class="buttonFrame"> <div class="btn"></div> </div> 请注意，您可以使用 after 用一个元素来制作它。这是仅包含所需属性的片段。 .btn { width: 55px; height: 20px; border: 2px solid black; overflow: hidden; } .btn, .btn:after { border-radius: 12px; } .btn:after { display: block; content: ""; width: 0%; transition: width 2s; height: 100%; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%); } .btn:hover:after { width: 100%; } <div class="btn"></div>

在opencart的期刊2主题中隐藏缺货产品

没有代码，下一页链接显示 https://i.sstatic.net/0Oniu.jpg 使用代码，下一页链接不显示 https://i.sstatic.net/ljtmr.jpg 代码由 ainosilva 编写 http://forum.open...

使用javascript获取用户和密码身份验证

我正在学习前端开发，目前正在与其他 5 名同事一起开发一个项目。我必须实现登录页面。我们还必须实现注册和注销页面。这是...

Iframe 调整 CORS 大小

是否可以将我的 tumblr 网站上的 iframe 大小调整为 100%？ 我已经尝试了很多选项，但仅使用 jQuery 我遇到了 CORS 问题，还尝试了以下插件： https://github.com/Sly777/Iframe-Height-Jq...

将边框半径应用于 HTML 表格行时，可以看到额外的背景

我正在使用 HTML 表格，在其中将颜色应用于表格单元格。表格单元格具有边框半径属性。 但是，应用边框半径后可以看到额外的背景。哈...

我的循环、自动播放（无控件/按钮）音频不起作用有什么原因吗？ HTML5

我所看到的我想要的，没有按钮的循环自动播放，应该是： 然而，这是行不通的。目前，我正在上“编程”课程，以及到目前为止我修改过的游戏...

如何在 DataTable Apache Wicket 中添加多项选择

我目前正在尝试向数据表中的每一行添加一个复选框，这样我以后就可以选择多行来执行某些操作（现在不重要） 目前我尝试添加一个带有复选框的新列，例如...

高度等于 100% 不适用于 IFrame

接下来是 Stack Overflow 上的一些主题，例如： 全屏iframe高度为100% 如何给 iframe 100% 高度 [重复] 使 Iframe 适合容器剩余高度的 100%...

SVG 需要 100vh，但在大中型屏幕上超过它

我正在创建一个网站，我还使用 adobe illustrator 创建了一个 SVG，作为该网站的背景或整个图像。 问题是，当模拟手机或 ipad 时......

iText PdfHtml 删除 HTML 表 TD 中的空格

我正在使用itext7.pdfhtml将html转换为A4 PDF。该库工作得很好，但我在 html 表 TD 中的一些白色间距方面遇到了麻烦。请参阅随附的屏幕，空白是

悬停时交换图像而不影响布局

长话短说，我有一个下拉菜单，其中有 3 张图像作为香烟（250x34）。当我将鼠标悬停在它们上方时，它们会变成带有烟雾的香烟（250x222）。当思想悬停时，他们第二个图像推动......

afterSignInUrl 属性在 Clerk 中不起作用

在此输入图像描述 我尝试在我的项目中使用 afterSignInUrl="/learn" 属性，但它不起作用，软件包已安装，并且我已经搜索了文档...

悬停时触发弹出窗口

我有一个表单，我想在将鼠标悬停在信息 div 上时显示弹出帮助框： info div和popover如下（父div是position:relative）： 我有一个表单，我想在将鼠标悬停在信息 div 上时显示弹出帮助框： 信息 div 和弹出窗口如下（父 div 是 position: relative）： <div popovertarget="function-help" class="absolute cursor-help right-1 top-0 bottom-0 m-auto rounded-full border-2 border-cyan-400 text-cyan-400 w-1 h-1 p-2 flex justify-center items-center">i</div> <div id="function-help" popover>Here's how to input a function:</div> 我知道如何使用按钮或输入来完成此操作，但如何使用 div 和悬停来完成此操作？ 如何在用户将鼠标悬停在信息 div 上时显示弹出窗口，并在用户离开时隐藏它？ 提前致谢！ 根据我的理解，当用户将鼠标悬停在 div 上时，您尝试使用 i 显示工具提示。如果是这种情况，您可以根据您的要求使用 EventListener 显示/隐藏 div var targetElement = document.querySelector('.icon'); var tooltip = document.getElementById('tooltip'); targetElement.addEventListener('mouseenter', function() { tooltip.style.display = 'block'; }); targetElement.addEventListener('mouseleave', function() { tooltip.style.display = 'none'; }); .container { position: relative; display: inline-block; } .container input { padding-left: 30px; } .container .icon { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 15px; height: 15px; border-radius: 50%; background-color: #39a9db; color: #fff; display: flex; justify-content: center; align-items: center; cursor: help; } .tooltip { display: none; position: absolute; background-color: #333; color: #fff; padding: 5px; border-radius: 5px; font-size: 12px; z-index: 1; right: 0px; top: 25px } <div class="container"> <h3>f(x) = </h3> </div> <div class="container"> <input type="text"> <div class="icon">i</div> <div class="tooltip" id="tooltip">This is a tooltip</div> </div> 我意识到我的困惑。 Popover API 是一项实验性功能，不具有广泛的浏览器兼容性。 我的答案允许您在同一页面上有多个弹出窗口。 它使用 querySelectorAll 来查找所有 popovertarget 元素。然后它循环遍历每个生成一个变量来保存弹出框元素。然后在鼠标悬停时显示它，在鼠标移开时隐藏它。 我个人会使用一个模仿弹出窗口的插件，因为它将具有跨浏览器兼容性。 const popover = document.querySelectorAll("[popovertarget]"); popover.forEach((e) => { const target = document.querySelector("#" + e.getAttribute("popovertarget")); e.addEventListener("mouseover",()=>{ target.showPopover(); }); e.addEventListener("mouseout",()=>{ target.hidePopover(); }); }); <div popovertarget="function-help">popME</div> <div id="function-help" popover>Here's how to input a function:</div> 好的，感谢 @Sai Manoj 的有用回答，我知道我可以使用 div 的 mouseenter 和 mouseleave 方法来触发弹出窗口。 这是我的代码： document.getElementById('info-tooltip').onmouseenter = _ => document.getElementById('function-help').showPopover() document.getElementById('info-tooltip').onmouseleave = _ => document.getElementById('function-help').hidePopover() .wrapper { position: relative; width: max-content; } label { display: inline-block; width: 10 rem; } #info-tooltip { position: absolute; top: 0; bottom: 0; right: 4px; cursor: help; margin: auto; border-radius: 100px; border: 2px solid cyan; color: cyan; width: 16px; height: 16px; display: flex; justify-content: center; align-items: center; } #function-help:popover-open { position: absolute; bottom: 0; inset: unset; } <div class="wrapper"> <label for="inputFunction">f(x) = </label> <input type="text" id="inputFunction"> <div id="info-tooltip" popovertarget="function-help">i</div> <div id="function-help" popover>Here's how to use this function:</div> </div> 请注意，您可以进一步设置弹出窗口的样式，但您最有可能希望使用 position: absolute（因为默认为 position: fixed）和 inset: unset。

CSS 和图像中的样式未加载，但 GET 请求显示 200

我有一些疑问，为什么当我在 FireFox 中从本地主机调用 html 时，没有使用任何 CSS 样式以及图像没有显示。 我的 html 代码是这样的： 我有一些疑问，为什么当我在 FireFox 中从本地主机调用我的 html 时，没有使用任何 CSS 样式以及图像没有显示。 我的html代码是这样的： <!doctype html> <html lang="en"> <head> <!-- <base href="index.html"> --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./myCustomStyle.css" rel="stylesheet" type="text/css"> <title>Document's Special Title here!lala</title> </head> <body> This is HTML here! <p class="hometown"> Another line here! </p> <img src="check.png" alt="an image here" width="100" height="88"> <p id="para1"> Should be in Yellow color this line. Document.get </p> <p> <a href="https://www.Youtube.com/"> <img src="https://www.tutorialspoint.com/assets/questions/media/426142-1668760872.png" alt="not shown!" style="width:50px;height:50px;"> </a> </p> <h1 style ="color:blue"> A simple Chat Application</h1> <h2> a h2 here </h2> <p> a new paragraph!</p> <p> current module: __dirname</p> </body> </html> 我的 CSS 代码在这里： p.hometown { font-size: 35px; color: green; } h4 { background-color:blue; } h1 { color: maroon; margin-left: 20px; } #para1{ color: yellow; text-align: center; } #geeks { font-size: 25px; color: skyblue; } 它们都位于结构中的同一级别（它们关系的图片位于此处，index.html 和 myCustomStyle.css 位于层次结构中的“同一级别”）： 在此输入图片描述 但是，当我在本地主机中运行时，没有显示任何图像和样式，如下所示： 在此输入图片描述 有谁知道为什么当我使用本地主机运行 html 时没有加载我的图像和样式？ 我花了几个小时尝试解决问题，例如通过包含 .或 / 或 ./ 并检查 FireFox 中的 Web 开发人员工具，但到目前为止没有成功。 有人可以帮我一下吗？ 非常感谢 我还使用我的代码从 Vscode 运行服务器，端口号为 8080，如下所示，但这应该与当前的问题无关，但我只是在这里发布以供参考： 在此输入图片描述 当我在 Vscode 中使用 LiveServer 时，我能够正确获取 html： 在此输入图片描述 但是当我从 FireFox 或 Chrome 或 IE 浏览器运行 localhost:8080 时，没有加载任何图像和样式。 我尝试通过测试相对或直接链接来修复 href。但这些都还没有起作用。 VsCode 的 liveserver 还能够显示当图像和样式成功加载时我的 html 应如何显示。 试试这个 <link href="myCustomStyle.css" rel="stylesheet">

将点击（以及所有相关信息）从一个元素传递到另一个元素

也有人提出了类似的问题，但是他们和他们的答案实际上并没有传递所有信息。 例子 document.querySelector('#b').addEventListener('click', (e) => { 文档.querySe...

通过 GitHub 处理 http 请求是否容易/可能？

上下文：我正在尝试将数据从统一项目保存到公共网页。 我需要做的就是保存一个字符串，然后用另一台计算机拉它，我已经有一个解析该字符串的脚本......

如何按需在 HTML 中创建自定义元素？

我正在为内部框架添加一些自定义元素，但是我注意到我们正在获取索引文件上的所有元素以在 html 中使用它们。 你知道更好的方法吗...

Rails datagrid gem 的输入类型=“文本”的多个属性的 HTML 错误

在流行的 Rails gem 数据网格中，指定范围过滤器（对于整数）会生成如下 HTML： 在流行的 Rails gem datagrid 中，指定范围过滤器（对于整数）会生成如下 HTML： <form class="datagrid-form artists_grid" id="new_artists_grid" action="/en/artists" accept-charset="UTF-8" method="get"> <div class="datagrid-filter filter"> <label for="artists_grid_birth_year">Year</label> <input class="birth_year integer_filter from" multiple="multiple" value="" type="text" name="artists_grid[birth_year][]"> <span class="separator integer"> - </span> <input class="birth_year integer_filter to" multiple="multiple" value="" type="text" name="artists_grid[birth_year][]"> </div> W3C 验证器抱怨 HTML，告诉 此时元素输入不允许使用多个属性。 事实上，W3C 网站上的 HTML Living Standard 的 input 元素的 汇总表确实表明，multiple属性仅适用于 file 和 email 类型。 但是，似乎 Firefox 和 Chrome 浏览器至少按照 datagrid 的预期处理上述表单，并为 multiple-text-input 字段返回一个数组。 我的问题是 此错误（“元素输入上不允许使用属性多个，类型为“文本””）仅适用于 HTML 5 还是其他错误？在以前的 HTML 中实际上允许它吗？（只是我的猜测） 大多数主流浏览器是否将 input type="text" multiple="multiple" 字段解释为多个字段并返回数组？ 如果没有，是否有任何有效的方法可以在 HTML 表单中指定具有公共标签的一对（或列表）文本字段？ 有什么方法可以绕过这个问题，强制 datagrid 生成 HTML5 有效的 HTML？ 上述示例的具体情况 这里详细介绍了上述 HTML 是如何生成的。 我在 datagrid 上为 Artist 模型的索引表指定了以下过滤器，该模型具有列（属性）birth_year： filter(:birth_year, :integer, range: true, header: 'Year') 输入1960年和2010年两个值 生成以下带有 GET 参数的 URI 字符串： http://localhost:3000/en/artists?artists_grid%5Bbirth_year%5D%5B%5D=1960&artists_grid%5Bbirth_year%5D%5B%5D=2010&commit=Apply 或者，如果解码， http://localhost:3000/en/artists?artists_grid[birth_year][]=1960&artists_grid[birth_year][]=2010&commit=Apply 因此，浏览器（Firefox 或 Chrome）确实将这两个字段解释为公共标签的多个输入字段。 multiple 只是 Rails 表单助手工作方式的副作用。 通常，重复的键会被最后一个键覆盖： >> Rack::Utils.parse_nested_query("a=1&a=2") => {"a"=>"2"} 但是如果输入名称以 [] 结尾，它将被解析为数组： >> Rack::Utils.parse_nested_query("a[]=1&a[]=2") => {"a"=>["1", "2"]} 获取输入名称 [] 的一个简单方法是添加 multiple: true，这就是 datagrid 正在做的事情： <%= text_field :artists_grid, :birth_year, multiple: true %> #=> <input multiple="multiple" type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year"> # ^^ 做同样的事情但没有 multiple 属性有点尴尬： <%= text_field_tag "artists_grid[birth_year][]" %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year_"> <%= text_field "artists_grid[birth_year]", nil %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year_"> <%= form_with url: "/", method: :get, scope: :artists_grid do |f| %> <%= f.fields_for :birth_year do |fff| %> <%= fff.text_field nil %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year_"> <% end %> <% end %> 要真正修复它，必须在 Rails 中完成，位于此处： https://github.com/rails/rails/blob/v7.1.3.3/actionview/lib/action_view/helpers/tags/text_field.rb#L17 diff --git a/actionview/lib/action_view/helpers/tags/text_field.rb b/actionview/lib/action_view/helpers/tags/text_field.rb index c579e9e79f..fe9c1a8d49 100644 --- a/actionview/lib/action_view/helpers/tags/text_field.rb +++ b/actionview/lib/action_view/helpers/tags/text_field.rb @@ -14,6 +14,7 @@ def render options["type"] ||= field_type options["value"] = options.fetch("value") { value_before_type_cast } unless field_type == "file" add_default_name_and_id(options) + options.delete("multiple") tag("input", options) end <%= form_with url: "/", method: :get, scope: :artists_grid do |f| %> <%= f.text_field :birth_year, multiple: true %> #=> <input type="text" name="artists_grid[birth_year][]" id="artists_grid_birth_year"> <% end %>