html 相关问题

我正在尝试使用 html 和 CSS 来扩展网格，但它们不适合

我正在尝试使用 HTML 和 CSS 获得一个可扩展按钮以适应网格，但它们不适合。我对 HTML 和 CSS 还是很陌生，所以我不确定我做错了什么。我...

不跨越两列的网格项目

我的网格项目没有按照预期的方式跨越，我不确定如何修复它。 我将发布我目前拥有的代码，但到目前为止我已经尝试了很多不同的东西，但没有一个......

CSS动画将页面上的图标滚动到路径

我想在页面滚动上创建一个 CSS 动画。箭头将移动到页面滚动上的蛇形路径，如果可能的话，还要更改每个新部分的图标。 我举几个例子： 代码...

如何在 HTML 中隐藏 Anchor 标签的 href 链接？

试图阻止网络抓取工具/爬虫抓取位于锚标记中的此 URL。我不想从页面本身隐藏图标，只是从 HTML 中隐藏。 试图阻止网络抓取工具/爬虫抓取位于锚标记中的此 URL。我不想从页面本身隐藏图标，只是从 HTML 中隐藏。 <a class="link" href="/hide_this_link_from_html"><img src="printIcon.jpg"/></a>

如何使用 CSS 中的位置属性定位伪选择器

我想在 div 左侧放置一个伪选择器（第一个字母） 我尝试给父 DIV 位置 Relative 和 pseduo 选择器 ( div::first-letter ) position absolute 并且它没有工作...

盲人或 Android 上无电源屏幕的 HTML js 输入可访问性

HTML 页面有 3 个（或至少 2 个）按钮（以及一些指示它的音频信号）。我想知道一种方法可以让人们不用眼睛就可以使用它，或者通过关闭屏幕来节省电力。仅...

扩展卡

@import url('https://fonts.googleapis.com/css2?family=Muli&display=swap'); * { 框大小：边框框； } 身体 { font-family: 'Muli', sans-serif; 显示：弹性； 对齐项目：居中； j...

尝试 Webscrape 动态网站以获取下拉项目

我是网络抓取的新手，我想做的是从以下网站的下拉列表中打印出所有公交路线：https://tmweb.pacebus.com/TMWebWatch/LiveDepartureTimes 我

字符串插值在 Angular 模板中不起作用

我想在酒店没有图片时显示默认图片。这是我的代码： 酒店.component.html ： 我想在酒店没有图片的时候显示默认图片。这是我的代码： 酒店.component.html : <img [src]="hotel.image!='' ? '{{cdn}}/{{hotel.image}}.jpg' : '{{cdn}}/images/no-image.png'"> 酒店.component.ts ： ... export class HotelsComponent { hotel!: HotelViewModel; cdn!:string; ngOnInit(): void { this.cdn='http://cdn.example.com'; } } 输出是 <img src="{{cdn}}/images/no-image.png"> 但是我想要 <img src="http://cdn.example.com/images/no-image.png"> 您不需要在属性绑定中使用字符串插值 ({{}}) 您可以直接在绑定表达式中使用属性值。当酒店没有图片时显示默认图片 <img [src]="hotel.image !== '' ? cdn + '/' + hotel.image + '.jpg' : cdn + '/images/no-image.png'">

有没有办法在一个CSS样式表中同时使用网格和弹性框

我目前正在学习html和css。在我的代码中，我使用网格框作为组织布局的主要方法。我认为可以将 grid 和 flex box 混合在一起。当我去

使用 Jquery 对图像更改（添加/删除类）的过渡效果

我需要帮助在 div 框上悬停/退出的简单过渡效果，以将第一张图像 .image-main 更改为第二张图像悬停。 它现在工作正常，但我不知道如何添加 mouseOn/mouseOut 效果（si ...

PHP 中基于对象的存储

Writing an Object-Based Storage System in PHP，我无法让 PHP 在同一目录中创建文件。 显示文件选择字段...

带有 Bootstrap 5 的 iPhone 上的网站响应问题

我正在处理的网站的响应速度存在问题，尤其是在 iPhone 上。该网站是使用 Bootstrap 5 构建的，并且在 Android 手机上似乎可以正常运行

盲人或无电源屏幕的 HTML js 输入可访问性

HTML 页面有 3 个（或至少 2 个）按钮（以及一些指示它的音频信号）。我想知道一种方法可以让人们不用眼睛就可以使用它，或者通过关闭屏幕来节省电力。 它有...

如何使用 CSS 或 HTML 消除多余空格的问题？

我在 Nuxt/Vue 中开发应用程序，我的文本来自 i18n，一些文本里面有正则表达式换行符 如果我想正确显示它，我不得不使用 CSS white-

媒体查询问题：字体大小在手机上不变

我正在做一个页面，电脑桌面的字体大小为 16px，小型设备（如 iphone 和其他小型手机）的字体大小为 36px。我设置了 我正在做一个页面，电脑桌面字体大小为 16px，小型设备（如 iphone 和其他小型手机）字体大小为 36px。我设置了 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 在头部区域和使用风格： @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ p.Description { font-size: 36px; } } @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ p.Description { font-size: 16px; } } @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ p.Description { font-size: 16px; } } @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops and desktops */ p.Description { font-size: 16px; } } @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ p.Description { font-size: 26px; } } @media (min-width:1281px) { /* hi-res laptops and desktops */ p.Description { font-size: 16px; } } 现在我遇到了问题——它在电脑上运行良好，但在 iPhone 上运行不佳。 你们能帮帮我吗？有什么问题吗？ 只需删除以下媒体查询：- @media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ p.Description { font-size: 36px; } } 而不是这个，添加这个：- p.Description { font-size: 36px; } 这会将字体大小设置为 36px。当 screen width 达到 481px，然后由于 other media query 字体大小变为 16px. 总体更新的代码是：- /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ p.Description { font-size: 36px; } @media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ p.Description { font-size: 16px; } } @media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ p.Description { font-size: 16px; } } @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops and desktops */ p.Description { font-size: 16px; } } @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ p.Description { font-size: 26px; } } @media (min-width:1281px) { /* hi-res laptops and desktops */ p.Description { font-size: 16px; } }

元素不会占用剩余高度

我试图让 main 和 div#undermain 占据布局的剩余高度，但他们不会这样做。这是 HTML（使用 Tailwind 实用程序类）： 我试图让main和div#undermain占据布局的剩余高度，但他们不会这样做。这是 HTML（使用 Tailwind 实用程序类）： <body> <div class="min-h-screen w-screen overflow-auto bg-black"> <nav class="flex w-full items-center justify-start gap-3 border-b-2 border-b-gray-800 py-3 pr-6 pl-3" > <img src="./someurl.svg" /> <h1 class="text-2xl text-green-500">Delivert</h1> </nav> <main class="h-full w-full"> <div id="undermain" class="flex h-full w-full items-center justify-center"> <button class="bg-green-500"> sign in </button> </div> </main> </div> </body> 我知道 flexbox 是解决此类问题的一种简单方法，但我尝试过的唯一有效方法如下： 给最高的div（body下面的那个）display: flex和flex-direction: column 给mainflex-grow: 1和display: flex 从height: 100%中删除#undermain 但我觉得这个解决方案很奇怪，而不是 CSS-y。 这是一个沙箱。 正如您在问题中提到的，您已经通过使用flexbox达到了您的要求。如果您仍在寻找替代解决方案，您可以使用 table 和 table-rows tbh 我个人会选择 flexbox，我认为我的解决方案不比 flexbox 更多的 css-y。 这里是使用table的例子： <script src="https://cdn.tailwindcss.com"></script> <body> <div class="table min-h-screen w-screen overflow-auto bg-black"> <nav class="flex h-10 w-full items-center justify-start gap-3 border-b-2 border-b-gray-800 py-3 pl-3 pr-6"> <img src="./someurl.svg" /> <h1 class="text-2xl text-green-500">Delivert</h1> </nav> <main class="relative table-row h-full w-full"> <div id="undermain" class="table-cell h-full w-full"> <button class="bg-green-500">sign in</button> </div> </main> </div> </body> <nav> 的高度为 58px，包括内边距和边框，因此您可以在 calc 上使用 div#undermain 和最小高度。这里的关键值是min-h-[calc(100vh-58px)]. <div class="min-h-screen w-screen overflow-auto bg-black"> <nav class="flex w-full items-center justify-start gap-3 border-b-2 border-b-gray-800 py-3 pl-3 pr-6"> <img src="./someurl.svg" /> <h1 class="text-2xl text-green-500">Delivert</h1> </nav> <main class="w-full"> <div id="undermain" class="flex min-h-[calc(100vh-58px)] w-full items-center justify-center"> <button class="bg-green-500">sign in</button> </div> </main> </div> https://play.tailwindcss.com/KEIQnQSERc

从 span 中删除 <sup> 标签中的文本，同时抓取其余文本

我正在尝试用漂亮的汤抓取文本，我需要从具有特定类的跨度内获取文本，但丢弃具有不同类的同一跨度内的上标数字。我可以...

Chrome devtools 移动尺寸看起来比显示的屏幕小？

我正在尝试让我的页面移动响应。但是，我不确定为什么 devtools“屏幕”看起来比我的 elemnt 上列出的 px 大。例如我的 html 是 390x844 但看起来

如何使用 svg 或 css 创建混合直线/曲线截面边界？

对于我的应用程序，我正在创建一个具有非标准部分边界的注册页面。你可以在这里看到我想要达到的效果： 这不是一个简单的弧线——它有两条直线，还有一个弧线……