我设置了一个 ScrollView，如下所示： ScrollView(.vertical) { // ... } .scrollDismissesKeyboard(.interactively) .safeAreaInset(边缘: .bottom, 间距: 0) { TextInputCellView（带有：颜色（十六进制：0xf5f...

仅在页面底部添加边距

我有一个始终固定在视图底部的 cookie 部分。啦啦啦啦我有一个始终固定在视图底部的 cookie 部分。 <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section> #cookie-section { min-height: 50px; width: 100%; position: fixed; display: flex; bottom: 0; background-color: rgba(38, 38, 38, 0.9); } 但是当你滚动并到达页面底部时，我想为其添加 50px 的 margin-bottom 。我该怎么做？当你只是添加 margin-bottom: 50px; 到它时，它已经在开始时获得了我不想要的边距。仅当您滚动到达页面底部时。可以使用滚动驱动动画，但支持还不好。您可以使用 Google Chrome 测试以下内容 #cookie-section { min-height: 50px; inset: auto 0 0; position: fixed; display: flex; background-color: rgba(38, 38, 38, 0.9); color: #fff; animation: margin 2s; animation-timeline: scroll(root) } @keyframes margin { 0%,90% {margin-bottom:0;} 100% {margin-bottom:50px;} } body { min-height: 300vh; } <section id="cookie-section"> <span id="cookie-text">Bla bla bla</span> </section>

错误错误：需要未知模块“未定义”

当我尝试使用 @react-navigation/bottom-tabs 时，出现以下错误：错误：需要未知模块“未定义”。如果您确定该模块存在，请尝试重新启动 Metro。你可能...

标题标签的默认 CSS 样式是什么？（H1、h2、h3、h4、h5）

在 HTML 中，标题用 (1,2,3,4,5,6) 标签表示。我的问题是关于以下 HTML 代码：在 HTML 中，标题用 <H>(1,2,3,4,5,6) 标签表示。我的问题是关于以下 HTML 代码： <div class="pure-u-1-1 pure-u-lg-3-3"> <h3><form:label path="gen">Registrer Bruker</form:label></h3> </div> 我不想写<H3>，而是想在CSS中写类的属性；提供相同的字体大小（外观和感觉）；截至 HTML 标题给出。 CSS 中是否也有相同的预定义属性？答案是否定的，但是您可能会修改样式。大多数浏览器都会尝试使用这些样式（摘自：w3schools） h1 { display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } h4 { display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } CSS 中是否有相同的预定义属性；其外观和感觉与 H 相同？没有。标题的默认样式（在大多数浏览器中）正是：不同 CSS 规则的集合加上Hn选择器（并存储在浏览器样式表中）。没有一种（纯 CSS）方法可以自动复制所有这些规则。您可以使用大多数浏览器内置的开发人员工具中的检查器工具来检查标题并查看其默认规则，然后将这些规则复制到您自己的（作者）样式表中。浏览器之间可能存在一些差异，因此您通常也需要明确设置 Hn 规则。 Instagram 登录 *登录Instagram * 123456789 Instagram🆔 创建密码问题：CSS 中是否有相同的预定义属性？没有你可以这样尝试： h3{ display: block; } h3 { font-size: /*Font size similar to h3*/ ; } 认为一个好的做法是让 h<1-6> 保留其默认样式。然后添加一个类来添加额外的样式。对我来说似乎更干净，而且你并没有破坏“大师风格”。我确定优点和缺点。你好CSS

带有边框半径和粘性标题的 HTML 表格

我有一个 HTML ，带有边框半径和使用位置的粘性标题：sticky，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用滚动时我有一个带有 <table> 的 HTML border-radius 和使用 position: sticky 的粘性标题，如下所示： https://codepen.io/muhammadrehansaeed/pen/OJpeeKP 但是，当使用粘性标题滚动时，表格行会伸出粘性标题的圆角所在的位置。请参阅此图片的左上角：有没有办法可以在使用粘性标题向下滚动时保持圆角，或者在标题变得粘性并从原始位置向下移动时删除粘性标题？理想情况下，我想要一个CSS解决方案。您可以使用伪元素隐藏边框的某些部分： table thead th:first-child::before, table thead th:last-child::after { width: 1px; height: 5px; background: white; content: ""; display: block; position: absolute; top: 0px; } table thead th:first-child::before { left: -1px; } table thead th:last-child::after { right: -1px; } 正如Ivan建议的那样，似乎使用伪元素来覆盖标题下方不需要的边框是（令人惊讶的）唯一可行的选择。我建议使用伪不仅用于覆盖“外部”区域，而且还用于绘制弧线和填充“内部”区域。可以使用堆叠背景来做到这一点。应用于原始代码： /* § Additions / Changes */ table thead th { position: relative; } /* Pseudos exceeding header boundary by border width; with rectangle covering half circle and rest of height */ table thead th:last-child::after, table thead th:first-child::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--global-border-width-1)); width: var(--global-border-radius); background-image: linear-gradient(to bottom, transparent var(--global-border-radius), var(--global-title-color) 0), radial-gradient(circle at var(--global-border-radius) var(--global-border-radius), var(--global-title-color) var(--global-border-radius), var(--global-content-background-color) 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); background-repeat: no-repeat; } table thead th:last-child::after { left: auto; right: calc(-1 * var(--global-border-width-1)); background-position: top right; } /* § Declarations and original style */ html { --global-content-background-color: white; --global-title-color: black; --global-background-color: lightblue; --global-border-color: black; --global-border-radius: 20px; --global-border-width-1: 10px; --global-space-fixed-2: 10px; --global-space-fixed-3: 15px; --global-border-diameter: calc(2 * var(--global-border-radius)); background-color: var(--global-content-background-color); } table { color: var(--global-title-color); background-color: var(--global-content-background-color); border-collapse: separate; border-color: var(--global-title-color); border-style: solid; border-radius: var(--global-border-radius); border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1); border-spacing: 0; width: 100%; } table thead { position: sticky; top: 0; z-index: 10; } table thead th { color: var(--global-background-color); background-color: var(--global-title-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: bottom; } table tbody td { border-top: var(--global-border-width-1) solid var(--global-border-color); padding: var(--global-space-fixed-2) var(--global-space-fixed-3); vertical-align: top; } table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--global-border-radius); } table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--global-border-radius); } /* § Unrelated / demo */ * { scroll-margin-top: calc(var(--global-space-fixed-2) * 4 + 1rem); /* = height of sticky thead + top padding of cell, provided text in thead does not wrap */ scroll-margin-bottom: 1em; } td { height: 60vh; } td a { float: right } tr:last-child td { vertical-align: bottom; } a[name]:empty::before { content: attr(name); } th:not(#\0):hover::before { background-image: linear-gradient(to bottom, transparent var(--global-border-radius), #0F08 0), radial-gradient(circle at center, #00F8 var(--global-border-radius), #F2F4 0); background-position: top left; background-size: var(--global-border-diameter) 100%, var(--global-border-diameter) var(--global-border-diameter); } <table> <thead> <tr> <th>Fake non-transparent "border-radius"</th> </tr> </thead> <tbody> <tr> <td> <a href="#⬆️" name="⬇️"></a> For fixed header</td> </tr> <tr> <td> <a href="#⬇️" name="⬆️"></a> Using CSS stacked background images in pseudo elements</td> </tr> </tbody> </table> 只需从表格中删除边框，并为表格主体中的第一个和最后一个表格单元格添加左右边框： tbody td:first-child { border-left: 1px solid black; } tbody td:last-child { border-right: 1px solid black; } tbody tr:last-child td{ border-bottom: 1px solid black; } tbody tr:last-child td:first-child { border-bottom-left-radius: 2px; } tbody tr:last-child td:last-child { border-bottom-right-radius: 2px; } 当然是使用适当的缩进、嵌套和变量！使用许多伪选择器看起来样式相当丑陋，但似乎可以解决您的问题。有一个更紧凑的解决方案。只需将具有背景颜色的框阴影添加到第一个 < th > 和最后一个 < th > 即可隐藏元素。在此示例中，在右侧，您可以看到表格行由于边框半径而可见。在左边，我应用了盒子阴影。盒子阴影：0 -2.1rem 0 .6rem #E5E7EB；在这里，它是灰色的，以便您可以看到它的工作原理，但您只需使用与背景相同的颜色即可使其完全不可见。这是最终结果以及我正在使用的代码： th:第一个孩子 { 边界半径：0.75rem 0 0 0；左边框：.1rem 实心 $color-gray-200；框阴影：0 -2.1rem 0 .6rem $color-gray-200； } th：最后一个孩子{ 边界半径：0 0.75rem 0 0；右边框：.1rem 实心 $color-gray-200；盒子阴影：1rem -2.1rem 0 .6rem $颜色白色； } 可能需要调整框阴影以隐藏基于所选边框半径的行。不确定你是否熟悉jquery，如果熟悉的话你可以在滚动内容时动态更改 border-top-left-radius: 等于粘性标题的半径，但这对于新手来说有点棘手jquery/JS。其次，您可以将粘性标题封闭到父级（例如class="parent")），并将父级背景设置为白色，没有边框。并保持粘性标题的边框半径不变。因此，当您滚动内容时将位于该父级下方（例如 class="parent"）。为了确保父级出现在该行上方，您可以给出 z-index: 10

Angular Material 2：修复多行错误消息

我在我的角度应用程序中使用角度材料2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片：这是代码：我在我的角度应用程序中使用角度材料 2。当我的表单输入字段错误消息超过一行时，我遇到了问题。这是照片：这是代码： <md-error *ngIf="password.touched && password.invalid"> <span *ngIf="password.errors.required"> {{'PASSWORD_RECOVERY.FIELD_REQUIRED' | translate}} </span> <span *ngIf="password.errors.minlength || password.errors.maxlength"> {{'PASSWORD_RECOVERY.PASSWORD_LENGTH' | translate}} </span> <span *ngIf="password.errors.pattern"> {{'PASSWORD_RECOVERY.FOR_A_SECURE_PASSWORD' | translate}} </span> </md-error> 我通过阅读 github 了解到，这是 Angular 2 材料中的一个错误。有人通过自定义解决方法成功解决了这个问题吗？问题是类为 .mat-form-field-subscript-wrapper 的元素是 position: absolute，所以它不占用实际空间。按照 xumepadismal 在 github 上关于此问题的建议，您可以添加此 scss 作为解决我的问题的解决方法： // Workaround for https://github.com/angular/material2/issues/4580. mat-form-field .mat-form-field { &-underline { position: relative; bottom: auto; } &-subscript-wrapper { position: static; } } 它会转换静态 div 中的 .mat-form-field-subscript-wrapper 节点，并将 .mat-form-field-unterline 重新定位在输入字段之后。正如材料 15 中在 github 讨论中提到的，可以通过将 subscriptSizing="dynamic" 添加到 mat-form-field 来解决问题。要更改默认行为，您必须使用以下选项更新 angular.module.ts 提供程序： providers: [ { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { subscriptSizing: 'dynamic' } } ] 这也可以在材料文档中找到使用@mattia.corci提出的解决方案会导致错误消息被推到底部太多，从而在顶部留下不必要的空白空间。使用 Tailwind CSS，这个解决方案对我来说适用于最新的 Angular 17： .mat-mdc-form-field { @apply w-full self-start; .mat-mdc-form-field-subscript-wrapper { @apply flex; .mat-mdc-form-field-error-wrapper { @apply static; } } } mat-form-field.ng-invalid.ng-touched { animation: example; animation-duration: 0.3s; margin-bottom: 20px; } @keyframes example { from { margin-bottom: 0; } to { margin-bottom: 20px; } } 它对我有用。

为什么 .className = .... 不起作用，而 classList.add() 却起作用？

.youtube-文本{ 字体系列：Arial；字体大小：更大； } .订阅按钮{ 字体系列...</desc> <question vote="0"> <pre><code><!DOCTYPE html> <html> <head> <style> .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: 'Arial Narrow Bold'; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: 'Arial Narrow Bold'; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } </style> <title> </title> </head> <body> <p2>Youtube Subscribe Button</p2><br><Br> <button class = 'subscribe-button' onclick=" subscribeButton(); ">Subscribe</button> <script async> function subscribeButton() { const subButton = document.querySelector('.subscribe-button'); if (subButton.innerHTML === 'Subscribe'){ subButton.innerHTML = 'Subscribed'; subButton.classList.add('is-subscribed'); } else { subButton.innerHTML = 'Subscribe'; subButton.classList.remove('is-subscribed'); } } </script> </body> </html> </code></pre> <pre><code><!DOCTYPE html> <html> <head> <style> .youtube-text { font-family: Arial; font-size: larger; } .subscribe-button { font-family: 'Arial Narrow Bold'; font-size: large; color: white; background-color: black; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } .is-subscribed { font-family: 'Arial Narrow Bold'; font-size: large; color: black; background-color: white; padding-left: 12px; padding-top: 12px ; padding-bottom: 12px ; padding-right: 12px; border-radius: 20px; } </style> <title> </title> </head> <body> <p2>Youtube Subscribe Button</p2><br><Br> <button class = 'subscribe-button' onclick=" subscribeButton(); ">Subscribe</button> <script async> function subscribeButton() { const subButton = document.querySelector('.subscribe-button'); if (subButton.innerHTML === 'Subscribe'){ subButton.innerHTML = 'Subscribed'; subButton.className = 'is-subscribed'; } else { subButton.innerHTML = 'Subscribe'; subButton.className = 'subscribe-button'; } } </script> </body> </html> </code></pre> <p>你好，我刚刚开始使用 JS，想知道我遇到的这个问题。顶部的代码有效，底部的代码无效，第一次单击时，它确实将类更改为已订阅，但是当我按下按钮，它给出了一个错误，并且不再改变它，我只是想知道为什么会这样。</p> </question> <answer tick="false" vote="0"> <p>默认的 DOM elemnt 对象没有名为 <pre><code>className</code></pre> 的属性。将 classList 属性与 <pre><code>.add()</code></pre> 和 <pre><code>.remove()</code></pre> 方法结合使用。</p> </answer> <answer tick="false" vote="0"> <blockquote> <p>但是当我按下按钮时，它给出了一个错误并且不再改变它</p> </blockquote> <p>当您按下按钮时，代码会按类查找元素：</p> <pre><code>const subButton = document.querySelector('.subscribe-button'); </code></pre> <p>但是该类没有这样的元素。当您设置 <em><code>className</code></em> 时，您<pre>删除了</pre>该类：</p> <pre><code>subButton.className = 'is-subscribed'; </code></pre> <p>这<em>用</em><code>class</code><pre>替换了</pre>整个<pre><code>is-subscribed</code></pre>，而不是<em>添加</em>到类列表中。</p> </answer> </body></html>

如何将 Div 布局转换为基于 CSS 样式的 HTML 表格？

我正在开发一个项目，需要使用、、、和将使用元素设计的复杂布局转换为 HTML 表格我正在开发一个项目，需要将使用 <div> 元素设计的复杂布局转换为使用 <table>、<tr>、<td>、<colspan> 和 <rowspan> 标签的 HTML 表格。布局当前使用 CSS 进行样式设置，我希望在将其转换为表格格式时保留相同的结构和外观。输入：我有一系列 <div> 元素，以表格格式表示标题和数据单元格。每个 <div> 都有多个类属性，对应于定义其位置和大小的特定 CSS 样式。这是当前基于 div 的布局的片段： <div class="c x1b y41 wf h14">Project</div> <div class="c x20 y43 w10 h6">2023</div> <div class="c x21 y43 w11 h6">2022</div> <div class="c x23 y43 w12 h6">2021</div> <div class="c x1e y43 w13 h6">2020</div> <div class="c x20 y41 w14 h9">Amount</div> <div class="c x26 y41 w15 h9">Ratio</div> <div class="c x21 y41 w16 h9">Amount</div> <div class="c x28 y41 w17 h9">Ratio</div> <div class="c x23 y41 w18 h9">Amount</div> <div class="c x29 y41 w19 h9">Ratio</div> <div class="c x1e y41 w1a h9">Amount</div> <div class="c x2a y41 w1b h9">Ratio</div> <div class="c x1b y44 wf h6">Income</div> <div class="c x20 y44 w14 h6">9.6</div> <div class="c x26 y44 w15 h6">100.00</div> <div class="c x21 y44 w16 h6">377.78</div> <div class="c x28 y44 w17 h6">100.00</div> <div class="c x23 y44 w18 h6">293.47</div> <div class="c x29 y44 w19 h6">100.00</div> <div class="c x1e y44 w1a h6">210.66</div> <div class="c x2a y44 w1b h6">100.00</div> CSS 样式：布局由这些 CSS 样式控制，它们规定了 div 的尺寸和位置： .h14 {height: 41.215200px;} .h6 {height: 20.280000px;} .h9 {height: 20.311200px;} .w10 {width: 116.095200px;} .w11 {width: 116.251200px;} .w12 {width: 116.376000px;} .w13 {width: 122.959200px;} .w14 {width: 55.099200px;} .w15 {width: 60.216000px;} .w16 {width: 58.188000px;} .w17 {width: 57.283200px;} .w18 {width: 61.152000px;} .w19 {width: 54.600000px;} .w1a {width: 61.963200px;} .w1b {width: 60.372000px;} .wf {width: 73.008000px;} .x1b {left: 112.450000px;} .x1e {left: 537.830800px;} .x20 {left: 186.914000px;} .x21 {left: 303.641000px;} .x23 {left: 420.511000px;} .x26 {left: 242.801000px;} .x28 {left: 362.609000px;} .x29 {left: 482.287000px;} .x2a {left: 600.262000px;} .y41 {bottom: 490.373000px;} .y43 {bottom: 511.303000px;} .y44 {bottom: 469.313000px;} 预期结果：我想将此布局转换为 HTML 表格。预期的表结构应类似于以下内容： <table border="1"> <tr> <td rowspan="2">Project</td> <td colspan="2">2023</td> <td colspan="2">2022</td> <td colspan="2">2021</td> <td colspan="2">2020</td> </tr> <tr> <td>Amount</td> <td>Ratio</td> <td>Amount</td> <td>Ratio</td> <td>Amount</td> <td>Ratio</td> <td>Amount</td> <td>Ratio</td> </tr> <tr> <td>Income</td> <td>9.6</div></td> <td>100.00</td> <td>377.78</td> <td>100.00</td> <td>293.47</td> <td>100.00</td> <td>210.66</td> <td>100.00</td> </tr> </table> 尝试：我尝试了多种方法来解析 div 并应用它们的样式来创建表格，但没有一种方法有效。我已经尝试使用 JavaScript 动态读取 CSS 属性并将它们作为属性应用到表格单元格，但我在维护布局完整性方面遇到了问题，尤其是在跨越行和列时。问题：任何人都可以提供有关如何考虑 CSS 样式以编程方式将这种基于 div 的布局转换为 HTML 表格的指导或解决方案吗？如果您能帮助解析 CSS 以定义表中适当的 <colspan> 和 <rowspan> 值，我们将不胜感激。如果您只想让它看起来像表格而不是语义。您可以尝试使用网格和固定数量的列来执行此操作，例如使用grid-template-columns: repeat(10, 1fr)。

Tailwind 和 CSS 动画环偏移缩小

<div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px]" src="/images/Avatar1.png" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 如何为任何 css/tailwind 解决方案的偏移环的过渡设置动画？例如，这 2 个缩略图，左边的缩略图悬停在其上，右边的缩略图是初始状态。我希望它在缩略图悬停时有一个缩小的动画，而不是我当前的动画，因为它非常突然您可以考虑应用包含 transition-property 的 box-shadow CSS 值，例如 transition 或 transition-all Tailwind 类，以及非 0 transition-duration，上述类名也设置了： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div> 否则，您可以考虑通过 transition-property: box-shadow Tailwind 类应用 transition-duration: 150ms; 和 transition-[box-shadow]（以及其他属性）以仅转换 box-shadow： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div class="flex flex-col items-center justify-center rounded-xl bg-[#101638] px-5 pb-8 pt-7"> <div class="relative mb-5 cursor-pointer"> <img class="mx-auto max-w-[90px] rounded-full p-1 ring ring-offset-8 ring-offset-[#101638] hover:ring-offset-0 ring-[#133e8d] md:max-w-[114px] transition-[box-shadow]" src="https://picsum.photos/90/90" alt="Bordered avatar"> <div class="absolute bottom-1 right-2 rounded-full bg-blue-600 px-2 py-1 ring-4 ring-[#0d1129]"> <svg class="svg-inline--fa fa-message-dots text-white" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="message-dots" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path class="" fill="currentColor" d="M0 64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L185.6 508.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V416H64c-35.3 0-64-28.7-64-64V64zM128 240a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm128 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm160-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"></path> </svg> </div> </div> <div> <h1 class="font-bold">First Name</h1> </div> <div> <h1>Name</h1> </div> <div> <h1 class="text-[#636da8]">Project Mngr</h1> </div> </div>

更改垫输入的波纹颜色

我现在一直在努力了解如何手动更改元素的波纹颜色，但我似乎无法让它以任何方式工作。我现在一直在努力研究如何手动更改 <mat-input> 元素的波纹颜色，但我似乎无法让它以任何方式工作。 <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> 我已经尝试了CSS中我能想到的一切，.mat-form-field-underline，.mat-form-field-ripple，包括我使用::after和::before选择器从另一个SO问题/答案中无耻地撕掉的一大块类，尝试使用 ::ng-deep、!important，但似乎没有任何东西可以改变从 @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"; 导入的蓝色波纹的颜色编辑：只需更好地阅读 API，所以我发现波纹后出现的边框颜色来自 <mat-form-field> 元素，该元素有一个颜色选择器。但是，该颜色选择器只能具有“primary”、“accent”和“warn”值。所以现在我想知道如何插入自定义颜色。设法弄清楚了，原来如此 ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after { border-bottom-color: *X* !important; }

React CSS 导入

在我的 Home.js 中我有以下代码从“反应”导入反应；导入'./Home.css'; 常量文本变体 = {...} 常量主页 = () => { 返回（ ... 在我的 Home.js 中，我有以下代码 import React from 'react'; import './Home.css'; const textVariants = {...} const Home = () => { return ( <div id='home' className='page'> <motion.div className='text-wrapper' variants={textVariants} initial='initial' animate='animate'> <motion.div className='text-container' variants={textVariants}> <motion.h1 variants={textVariants}>NAME</motion.h1> <motion.h2 variants={textVariants}>An enthusiatic university student</motion.h2> </motion.div> </div> ); }; export default Home; 在 Home.css 中， .text-wrapper { max-width: 1366px; height: 100%; } .text-container { height: 100%; width: 50%; padding-left: 10%; h1 { letter-spacing: 10px; font-size: 50px; margin-bottom: -5%; } h2 { font-size: 80px; } } 我有 About.js 和 About.css 以及以下内容， import './About.css'; const About = () => { return ( <div id='about' className='page'> <div className='text-container'> <h1>About Me</h1> </div> </div> ); }; 但是 About.js 应用了 Home.css 中的内容，即 .text-container。我该如何避免这种情况？我不知道为什么 Home.css 被应用到 About.js 即使我没有导入它。在React js中，任何根组件中导入的css文件适用于整个项目。 css 类可以在项目层次结构中的任何位置访问。我们无法避免这种情况，因为文件被应用于根目录。您必须为不同的组件使用特定的类名称。专业提示：创建可重用的组件，以便您可以将相同的类应用于每个相同的组件..

ng-bootstrap 滚动间谍在没有高度的情况下无法工作？

我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下：我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。我的代码如下： <div> <div class="sticky-top"> <ul class="nav menu-sidebar"> <li > <a [ngbScrollSpyItem]="[spy, 'about']">About</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a> </li> </ul> </div> <div ngbScrollSpy #spy="ngbScrollSpy" > <section ngbScrollSpyFragment="about"> <h3>About</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="schedule"> <h3>Schedule</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="hotel"> <h3>Information about the hotel</h3> <p>{{some long long text and content}}</p> </section> </div> </div> 我在这个 stackoverflow 问题中看到，我的问题是我没有向我的 div 提供 height，这是事实。但我的滚动间谍部分遍布整个页面，而不是一个小 div，（导航本身是 sticky-top）。所以我不能给它高度。我知道有替代方法 - 刷新窗口滚动上的滚动间谍，但我没有找到可以帮助我的正确代码。你能解决我的问题吗？为我提供刷新滚动间谍的代码/给我有关高度的提示/帮助我找到另一个相应的元素。非常感谢！附上 stackblitz 演示的链接注意：我使用来自 @ng-bootstrap/ng-bootstrap 的 NgbScrollSpy （我想它是非常相似的库）我做什么：我将所有内容（包括导航）包装在中 <div class="wrapper" ngbScrollSpy #spy="ngbScrollSpy" rootMargin="2px" [threshold]="1.0" > <div class="sticky-top pt-4 pb-4 bg-white"> ..here the navigation... </div> ..here the sections... <section ngbScrollSpyFragment="about"> </section> //the last I use margin-bottom:2rem; <section ngbScrollSpyFragment="hotel" style="margin-bottom:10rem" </section> </div> 见“门槛”。这表明“更改”活动片段应该可见的百分比（1 是 100%）包装类 .wrapper{ height:100%; position: absolute; top:0; } 我使用强制链接的类别 //remove all the class for the link a{ color:black; text-decoration:none; padding:8px 16px; } a.custom-active{ color:white; background-color:royalblue } 以及我使用的每个链接 <a [class.custom-active]="spy.active=='about'">About</a> 嗯，问题是如何“滚动到”。 “链接”应该作为链接使用。第一个是指示“路由器”应该考虑“碎片” 如果我们的组件是独立组件，我们需要使用提供者，provideRouter bootstrapApplication(App, { providers: [ provideRouter([], withInMemoryScrolling({anchorScrolling:'enabled'})), ] }) 然后，我们需要考虑到我们的页面确实没有滚动，div“包装器”是谁拥有滚动。因此，我们订阅 router.events，当事件有“锚点”时，我们滚动“包装器”div constructor(router: Router) { router.events.pipe(filter((e:any) => e.anchor)).subscribe((e: any) => { (document.getElementById('wrapper') as any).scrollTop+= (document.getElementById(e.anchor)?.getBoundingClientRect().top||0) -72; //<--this is the offset }); } 在这个stactblitz中你有一个有效的例子

选中/取消选中 mat-checkbox 未正确返回 true 或 false

我正在使用 Angular 15 和 Angular Material 14，下面是我用来显示复选框列表的 HTML 代码我正在 Angular 15 和 Angular Material 14 工作，下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时，在这个 onCheckedChange 函数中，control.value 始终返回 false。哪里出了问题？无法理解.. 这是一个工作版本，复选框逻辑工作正常，希望有帮助！我们需要使用control.value获取表单组，但我们还需要访问内部表单控件，然后获取复选框值！ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战

脚本无法在我的引导模式中工作

希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html 希望这不是一个愚蠢的问题，但我已经没有主意了...... 所以我有这个模式： 1.scala.html <div class="feat" id="cor" data-toggle="tooltip" data-placement="bottom" title="add conference role"><div data-toggle="modal" data-target="#conf-role-menu-modal">Conference Role</div></div> <div class="modal fade" id="conf-role-menu-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body-conf-role-menu"> <script type="text/javascript"> $(function(){ $(".modal-body-conf-role-menu").load("@routes.Application.areaConferenceRole(id,idenv)"); }); </script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 使用模态主体中的脚本，我尝试加载此页面： 2.scala.html @(id:String, idenv:String) @Main("Add area") { <form action="@routes.Application.areaPostConferenceRole(id,idenv)" method="POST"> First Name: <input type="text" name="first_name" id="first" class="form-control"> Last Name : <input name="last_name" class="form-control"> <script type="text/javascript"> $( document ).ready(function() { // Handler for .ready() called. $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); }); </script> </form> } 页面加载正常。我在我的模态中看到它...... 问题是我的页面 2.scala.html 中的脚本无法运行。我不明白为什么......如果我从我尝试在模态中加载的页面之外尝试它们，它们就会起作用...... $( document ).ready(function(){}); 永远不会在模态中到达，因为加载页面时已经触发了此事件（模态在之后加载...）尝试直接插入脚本，如下所示： <script type="text/javascript"> $( "#first" ).focus(function() { alert( "Handler for .focus() called." ); }); </script> 当引导模式弹出时，shown.bs.modal事件将被触发。这是例子。 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) Full documentation. https://getbootstrap.com/docs/4.0/components/modal/ 试试这个我已经准备好这个功能了 $('#myModal').on('shown.bs.modal', function () { // Your script here }); $(document).on('shown.bs.modal', '#myModal', function () { // Your script here });

如何在webview中加载html字符串？

我有一个包含以下内容的html字符串：我有一个包含以下内容的html字符串： <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="spanish press" content="spain, spanish newspaper, news,economy,politics,sports"> <title></title> </head> <body id="body">  <script src="http://www.myscript.com/a"></script> </body> </html> 我需要将该网站显示到 Android 中的网络视图中。我尝试过这一切： webView.loadDataWithBaseURL(null, txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("x-data://base", txt, "text/html", "UTF-8", null); webView.loadDataWithBaseURL("notreal/", txt, "text/htm", "utf-8",null); 我还尝试删除 DOCTYPE 标签： txt=txt.replace("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">", ""); 这些人都没有工作。我刚刚实现了将字符串显示到 webview（html 代码）中，但不是必须使用该 html 代码创建的网站。出了什么问题？在 WebView 中加载数据。调用WebView的loadData()方法 wv.loadData(yourData, "text/html", "UTF-8"); 你可以查看这个例子 http://developer.android.com/reference/android/webkit/WebView.html [编辑1] 您应该在 -- " 之前添加 -- \ -- 例如 --> name=\"spanish press\" 下面的字符串对我有用 String webData = "<!DOCTYPE html><head> <meta http-equiv=\"Content-Type\" " + "content=\"text/html; charset=utf-8\"> <html><head><meta http-equiv=\"content-type\" content=\"text/html; charset=windows-1250\">"+ "<meta name=\"spanish press\" content=\"spain, spanish newspaper, news,economy,politics,sports\"><title></title></head><body id=\"body\">"+ "<script src=\"http://www.myscript.com/a\"></script>şlkasşldkasşdksaşdkaşskdşk</body></html>"; 你也可以试试这个 final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); 从资产 html 文件中读取 ViewGroup webGroup; String content = readContent("content/ganji.html"); final WebView webView = new WebView(this); webView.loadDataWithBaseURL(null, content, "text/html", "UTF-8", null); webGroup.addView(webView); 我有同样的要求，我是按照以下方式完成的。你也可以试试这个。使用loadData方法 web.loadData(""" <p style='text-align:center'> <img class='aligncenter size-full wp-image-1607' title='' src="+movImage+" alt='' width='240px' height='180px' /> </p> <p> <center> <U> <H2>"+movName+"("+movYear+")</H2> </U> </center> </p> <p><strong>Director : </strong>"+movDirector+"</p> <p><strong>Producer : </strong>"+movProducer+"</p> <p><strong>Character : </strong>"+movActedAs+"</p> <p><strong>Summary : </strong>"+movAnecdotes+"</p> <p><strong>Synopsis : </strong>"+movSynopsis+"</p> """, "text/html", "UTF-8" ); movDirector movProducer 都是我的字符串变量。简而言之，我保留了 URL 的自定义样式。如果您正在 JetpackCompose 中寻找某些内容，这可以帮助您： @Composable fun HtmlTextVisualizerComponent(textFromData: String) { val mimeType = "text/html" val encoding = "UTF-8" LazyColumn( modifier = Modifier .padding( start = 24.dp, end = 24.dp, top = 16.dp, bottom = 24.dp, ), ) { items(1) { val state = rememberWebViewState( url = "data:$mimeType;$encoding,$textFromData", ) val navigator = rememberWebViewNavigator() WebView( state = state, modifier = Modifier.fillMaxSize(), navigator = navigator, onCreated = { it.settings.javaScriptEnabled = true }, ) } } } 一定不要忘记在你的 gradle 中添加依赖项： implementation "com.google.accompanist:accompanist-webview:0.30.1"

如何以 Svelte 方式设置导出和开槽零件的样式？

Svelte slot 的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。在 html/js 中我可以这样做：身体{颜色：红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样（我似乎无法让它工作）。</p> <p>在 html/js 中我可以做：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色，标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色，插入 <pre><code>slot="body"</code></pre> 的内容从内部（shadow dom）设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种（受控）跨界样式？（例如，当使用 <pre><code>AppShell::part(content)</code></pre> 时，我收到错误：</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | <style> 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后，您使用该组件：</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test>  <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>

bottom-up 相关问题

最新问题