HTML(超文本标记语言)是用于构造网页和格式化内容的标准标记语言。 HTML在语义上描述了网站的结构以及用于表示的提示,使其成为标记语言,而不是编程语言。 HTML主要与CSS和JavaScript结合使用,为页面添加样式和行为。 HTML规范的最新修订版是HTML5.2。
我正在尝试使用 html 和 CSS 来扩展网格,但它们不适合
我正在尝试使用 HTML 和 CSS 获得一个可扩展按钮以适应网格,但它们不适合。我对 HTML 和 CSS 还是很陌生,所以我不确定我做错了什么。我...
我的网格项目没有按照预期的方式跨越,我不确定如何修复它。 我将发布我目前拥有的代码,但到目前为止我已经尝试了很多不同的东西,但没有一个......
我想在页面滚动上创建一个 CSS 动画。箭头将移动到页面滚动上的蛇形路径,如果可能的话,还要更改每个新部分的图标。 我举几个例子: 代码...
如何在 HTML 中隐藏 Anchor 标签的 href 链接?
试图阻止网络抓取工具/爬虫抓取位于锚标记中的此 URL。我不想从页面本身隐藏图标,只是从 HTML 中隐藏。 试图阻止网络抓取工具/爬虫抓取位于锚标记中的此 URL。我不想从页面本身隐藏图标,只是从 HTML 中隐藏。 <a class="link" href="/hide_this_link_from_html"><img src="printIcon.jpg"/></a>
我想在 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...
我是网络抓取的新手,我想做的是从以下网站的下拉列表中打印出所有公交路线:https://tmweb.pacebus.com/TMWebWatch/LiveDepartureTimes 我
我想在酒店没有图片时显示默认图片。这是我的代码: 酒店.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'">
我目前正在学习html和css。在我的代码中,我使用网格框作为组织布局的主要方法。我认为可以将 grid 和 flex box 混合在一起。当我去
我需要帮助在 div 框上悬停/退出的简单过渡效果,以将第一张图像 .image-main 更改为第二张图像悬停。 它现在工作正常,但我不知道如何添加 mouseOn/mouseOut 效果(si ...
Writing an Object-Based Storage System in PHP,我无法让 PHP 在同一目录中创建文件。 显示文件选择字段...
带有 Bootstrap 5 的 iPhone 上的网站响应问题
我正在处理的网站的响应速度存在问题,尤其是在 iPhone 上。该网站是使用 Bootstrap 5 构建的,并且在 Android 手机上似乎可以正常运行
HTML 页面有 3 个(或至少 2 个)按钮(以及一些指示它的音频信号)。我想知道一种方法可以让人们不用眼睛就可以使用它,或者通过关闭屏幕来节省电力。 它有...
我在 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 但看起来
对于我的应用程序,我正在创建一个具有非标准部分边界的注册页面。你可以在这里看到我想要达到的效果: 这不是一个简单的弧线——它有两条直线,还有一个弧线……