css 相关问题

Tailwind CSS - 固定位置的溢出页脚

我是 Tailwind CSS 的新手，一直在尝试使用 Tailwind 文档中的可用代码示例制作一个简单的投资组合页面。 当容器类用 ... 包装页面上的所有内容时

CSS 隔离 asp net mvc 不工作，文件 {ASSEMBLY NAME}.styles.css 未找到 (404)

我正在使用 ASP NET MVC 和 .NET 8 版本开发一个项目 我的 asp net mvc 项目第一次遇到错误文件 {ASSEMBLY NAME}.styles.css not found (404)。 我已经做了好几个

如何让这些卡片在 Flexbox CSS 中并排放置

我一直在尝试很多配置来让这 3 张卡片在使用 Flexbox 时并排显示。我已经调整了宽度和列/行。我哪里出错了？ Flexbox 是最好的方法吗...

如何在没有额外间距的情况下使用角度材质复选框？

我目前正在使用 Angular Material，想知道是否有办法在没有默认间距的情况下使用复选框。我注意到 Angular Material 的复选框被一些

如何使用基于嵌套子类的CSS相邻选择器？

我可以像这样使用相邻选择器： /* 当c和c相邻时，将第二个c涂成红色 */ .c + .c { 背景颜色：红色； } 但是当“.c”不存在时如何做同样的事情......

Tailwind CSS：如何使图像从 div 中弹出

这是我的组件的视图： 这是我的组件的视图： <section className="embla p-6 lg:p-8 flex flex-col gap-4"> <div className="embla__viewport" ref={emblaRef}> <div className="embla__container"> {slides.map((item: ProductCollectionWithPreviews) => ( <div className="embla__slide p-5" key={item.products[0].title}> <div className="h-[300px] aspect-video bg-gray-400 rounded-md backdrop-blur-xl bg-opacity-5 flex flex-col overflow-visible"> <div className="h-[150px] flex items-center justify-center overflow-visible"> <div className="relative z-10"> <Image src={item.products[0].thumbnail} width={300} height={300} alt="Picture of the product" className="skew-y-2 drop-shadow-2xl" /> </div> </div> <div className="h-[150px] flex items-center p-8"> <div className="flex flex-col"> <span className="text-xl text-white">{item.products[0].title}</span> <span className="text-sm text-slate-200">{item.products[0].title}</span> </div> </div> </div> </div> ))} </div> </div> </section> 我试图让图像从 div 中“弹出”，但我得到的只是一张剪切图像。这是现在的样子： 具有 div 类的 embla__viewport 有 overflow: hidden。也许它正在损害你的形象。但我相信您无法删除 overflow: hidden，因为这会隐藏轮播中的项目，我建议您添加 padding-top 为 embla__viewport 上的图像腾出空间。

我尝试使用按钮更改文本样式，但无法使其适用于具有相同 id 的多个

我正在尝试制作一个按钮，可以添加和删除网站某些部分的样式，在本例中更改元素的背景颜色。 尽管按钮在...时工作正常

如何从API获取数据并在网页无响应的情况下显示？

我正在构建一个用 React 和“artsy.api”构建的猜谜游戏。单击按钮即可通过我的索引页访问猜谜游戏。 ...

a 的不透明度过渡：悬停不起作用

我希望所有链接元素都显示一致的行为。 a:悬停{ 不透明度: 0.5; } 这适用于 IE 和 Firefox，但不透明度（以及相关的 CSS 过渡）未正确应用于...

顺风宽度不起作用

在下图中，该导航器上有一个导航栏，有一张卡片，我想增加该卡片的宽度，以便我看起来像预期结果图像 代码输出图像 在下图中，该导航器上有一个导航栏，有一张卡片，我想增加该卡片的宽度，以便我看起来像预期结果图像 代码输出图像 <div className=" z-10 bg-blue-100 "> <div className=" z-23 flex flex-row justify-center items-center h-10"> <div className=" -translate-y-32 z-30"> <div className="flex flex-row justify-center items-center mt-8 px-4 lg:px-6"> <div className="sm:mx-auto lg:mx-20 sm:text-center"> <div className=" w-full mx-auto p-2"> <div className="flex flex-col mt-32 sm:mt-20 sm:flex-row md:flex-row lg:flex-row items-center shadow-lg rounded-lg bg-white "> {/* <!-- Image Div --> */} <div className=""> <Image src="MainFooter.svg" alt="Image" width={360} height={100} /> </div> {/* <!-- Content Div --> */} <div className="px-8 py-6 text-left"> <h2 className="mb-2 text-2xl sm:text-3xl md:text-4xl lg:text-5xl text-gray-700 leading-relaxed font-extrabold"> Stay Updated With <br /> Financial Compliance </h2> <p className="mt-4 mb-6 max-w-md text-sm sm:text-base text-gray-700 font-light"> Subscribe to our newsletter for compliance updates and tips </p> <form action="#" className="mb-4"> <div className="flex flex-col sm:flex-row sm:justify-start"> <input className="block w-full sm:w-auto mb-2 sm:mb-0 sm:mr-2 px-4 py-3 text-sm text-gray-900 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-primary-500 focus:border-primary-500" type="email" placeholder="Enter email here" required /> <button type="submit" className="py-3 px-6 ml-2 mt-2 sm:mt-0 text-sm font-medium text-white rounded-md bg-orange-500 border border-orange-600 hover:bg-orange-600 focus:ring-2 focus:ring-orange-300" > Get Updates </button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> 预期结果 我想要我的导航栏卡宽度如上图所示，但我无法实现 我不确定这里的问题是什么，容器宽度似乎工作正常。我可以给你一些提示： “flex-row”是 flex-direction 的默认值，因此您不需要指定它（除非您在配置文件中将 flex-col 设置为默认值）。 如果设置断点，它的工作方式类似于最小宽度断点。例如，无需设置“flex-col sm:flex-row md:flex-row lg:flex-row”，您只需编写“flex-col sm:flex-row”即可，它适用于中型和中型大屏幕也是如此。 （文档链接） 要使图像像所需的结果一样溢出，您可以向容器 div 添加“相对”类，向图像 div 添加“绝对 left-0 Bottom-0”，并添加另一个与图像宽度相同的 div 以加宽容器，像这样： <div className="flex mt-32 sm:mt-20 items-center shadow-lg rounded-lg bg-white text-black relative"> {/* <!-- this div just widens the container--> */} <div className="w-[360px]"></div> {/* <!-- Image Div with absolute position--> */} <div className="absolute left-0 bottom-0"> <img src={pic} alt="Image" width={360} height={100} /> </div> {/* <!-- Content Div --> */} </div>

在 GitHub Pages (Jekyll) 中，如何更改网站的背景颜色？

我目前正在尝试更改使用 GitHub 页面创建的网站的背景颜色。该网站位于grassschool.github.io/，这是存储库。我正在努力改变...

如何根据 p 中的 br 和 span 标签层次结构设置样式

我在 p 内的相同位置有一个 br 跨度。我希望如果 br 位于 span 之前，则 span 具有不同的样式，但如果 span 位于 br 之后，则 span 具有另一种样式。 p：首先-

我可以获得有关网格布局的帮助吗？

我现在正在学习CSS，我正在努力让它按照我想要的方式工作，但我不明白为什么，这是代码： 我现在正在学习CSS，我正在努力让它按照我想要的方式工作，但我不明白为什么，这是代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test</title> <style> body { margin: 0px; padding: 0px; } header { display: grid; grid-template-columns: 1fr 11fr 1fr 1fr; grid-template-areas: "logo . btnusr btnlogoff"; } .logo { grid-area: "logo"; height: 35px; padding: 5px; } .btnusr { grid-area: "btnusr"; height: 35px; padding: 5px; } </style> </head> <body> <header> <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo"> <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr"> </header> </body> </html> 我正在尝试做到这一点，以便我在左上角获得徽标，11fr 的空白单元格，以及右侧的其他 2 个按钮。 我将网格区域定义到特定位置，但是无论我如何更改，对象都不会移动到所需位置。即使我将网格区域从徽标交换为 btnusr，徽标始终位于第一个，并且按钮始终放置在第二个单元格中，这是浏览器中网格视图的打印： 要使其按照您希望的方式运行，您需要具有与模板列中定义的相同数量的元素，如下所示： <header> <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo" /> <label style="visibility: hidden">DUMMY</label> <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" /> <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" /> </header> 但我宁愿使用显示柔性和之间的空间： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Test</title> <style> body { margin: 0px; padding: 0px; } header { display: flex; justify-content: space-between; } .logo { grid-area: "logo"; height: 35px; padding: 5px; } .btnusr { grid-area: "btnusr"; height: 35px; padding: 5px; } </style> </head> <body> <header> <img src="https://source.unsplash.com/random/921x222" alt="logo" class="logo" /> <div class="buttons"> <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" /> <img src="https://source.unsplash.com/random/400x400" alt="btnusr" class="btnusr" /> </div> </header> </body> </html>

jQuery 脚本未将引导类应用到我的表单

**为什么我的 jQuery 代码在满足条件时不为行着色（我将脚本的特定部分设为斜体）？ ** 投票的 HTML 代码： **为什么我的 jQuery 代码在满足条件时不会为行着色（我将脚本的特定部分设为斜体）？ ** 投票的 HTML 代码： <form id="pollForm" class="mb-4"> <div class="form-group"> <label for="pitanje1" >Koliko ste zadovoljni lokacijom FUTURA Shopping Centra?</label > <select id="pitanje1" name="pitanje1" class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="form-group"> <label for="pitanje2" >Koliko ste zadovoljni radnjama u FUTURA Shopping Centru?</label > <select id="pitanje2" name="pitanje2" class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <div class="form-group"> <label for="pitanje3" >Koliko ste zadovoljni izgledom FUTURA Shopping Centra?</label > <select id="pitanje3" name="pitanje3" class="form-control"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> <button type="button" class="btn btn-dark mt-2" onclick="saveAnswers()" > Pošalji </button> </form> <table class="table"> <thead> <tr> <th>Pitanja</th> <th>Prosečna ocena</th> </tr> </thead> <tbody id="resultsTableBody"> <tr id="row1"> <td>Koliko ste zadovoljni lokacijom FUTURA Shopping Centra?</td> <td id="prosecnaOcena1">0</td> </tr> <tr id="row2"> <td>Koliko ste zadovoljni radnjama u FUTURA Shopping Centru?</td> <td id="prosecnaOcena2">0</td> </tr> <tr id="row3"> <td>Koliko ste zadovoljni izgledom FUTURA Shopping Centra?</td> <td id="prosecnaOcena3">0</td> </tr> </tbody> </table> 使用逻辑代码导入 jQuery 和 bootstrap： <script src="js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script> const answersData = { pitanje1: { ukupnaOcena: 0, brOdgovora: 0 }, pitanje2: { ukupnaOcena: 0, brOdgovora: 0 }, pitanje3: { ukupnaOcena: 0, brOdgovora: 0 }, }; function saveAnswers() { const pitanje1 = parseInt($("#pitanje1").val()); const pitanje2 = parseInt($("#pitanje2").val()); const pitanje3 = parseInt($("#pitanje3").val()); updateAnswer("pitanje1", pitanje1); updateAnswer("pitanje2", pitanje2); updateAnswer("pitanje3", pitanje3); updateResultsTable(); } function updateAnswer(pitanje, vrednost) { answersData[pitanje].ukupnaOcena += vrednost; answersData[pitanje].brOdgovora++; } function updateResultsTable() { $.each(answersData, function (pitanje, podaci) { const srednjaVrednost = podaci.ukupnaOcena > 0 ? (podaci.ukupnaOcena / podaci.brOdgovora).toFixed(2) : 0; $(`#prosecnaOcena${pitanje.slice(-1)}`).text(srednjaVrednost); /*starting from here, until the end of updateResults function*/ const row = $(`#row${pitanje.slice(-1)}`); row.removeClass("bg-danger bg-warning bg-success"); if (srednjaVrednost < 2.5) { row.addClass("bg-danger"); } else if (srednjaVrednost >= 2.5 && srednjaVrednost <= 3.5) { row.addClass("bg-warning"); } else { row.addClass("bg-success"); } }); } $("#pollForm button").on("click", function (event) { event.preventDefault(); saveAnswers(); }); </script> 我尝试编写脚本来找出用户给出的平均成绩，除了背景给出的部分之外，它都有效。 有一个默认的引导类不断覆盖我尝试应用的 bg-success。最后为了摆脱那个默认类，我不得不在我的 style.css 中调用它： .table { --bs-table-bg: none; } 此后代码开始正常工作。

如何使用 CSS 仅定位 div 内的特定 <span> 标签？

我只想定位 div 内的第一级标签。这是我的代码： 客户信息 我只想定位 div 内的第一级标签。这是我的代码： <div class="main"> <span id="j_id0:j_id42"> <span>Customer Info</span> </span> <span id="j_id0:j_id4"> <span>Billing Address</span> <div>Text</div> </span> <span id="j_id0:j_id61"> <span id="j_id4:22df">Shipping Address</span> <div>Text</div> </span> 想要使用动态 ID 定位所有 Span 标签，而不是内部 Span 标签。也就是说，我想向主 div 中第一次出现的每个 span 标签（带有 id 的标签）添加一些特定的 css 属性。使用css可以吗？如果不是，如何使用 javascript 做到这一点？ 请注意，内部跨度标签内可能还有其他 id。只想瞄准<span id="j_id0:j_id42">、<span id="j_id0:j_id4">、<span id="j_id0:j_id61">。这只是 main div 内的 span 第一次出现。 最简单的就是使用>: .main > span{} 想要使用动态 ID 来定位所有 span 标签 如果我们考虑的话您可以将其更改为： .main span[id]{} 我想向主 div 中第一次出现的每个 span 标签（带有 id 的标签）添加一些特定的 css 属性 然后就可以使用它了： .main span[id]:first-child{} 您的最后编辑： 只想定位<span id="j_id0:j_id42">、<span id="j_id0:j_id4">、<span id="j_id0:j_id61">。 .main span[id] span{} .main span[id] span{color:red; font-weight:bold;} <div class="main"> <span id="j_id0:j_id42"> <span>Customer Info</span> </span> <span id="j_id0:j_id4"> <span>Billing Address</span> <div>Text</div> </span> <span id="j_id0:j_id61"> <span id-"id21">Shipping Address</span> <div>Text</div> </span> </div> 您可以使用属性包含某些单词的选择器：Link .main span[id~="j_id"] { ... } 你可以试试.main span[id^="j_id"] { ... } 对于所有具有动态 ID 的跨度标签： .main > span or span[id^="j_id0:j_"] 对于具有动态 ID 的特定跨度标签。 k 从 1..n .main > span:nth-child(k)

如何修复我的卡片组件以在 Flex 中显示

我目前正在学习react。我有一个 new_card_component.js 文件，用于显示从 data.js 文件读取的数据。但是在index.js 中提供的airbnb.js 文件中

如何淡出图像的两侧？

当您扩大浏览器时，您会注意到图像的右侧和左侧以黑色淡出。 我需要将相同的功能应用到我的画廊，但不知道。我找到了这个...

在活动类脚本中有一个自动突出显示的按钮

我有一个按钮列表，可以更改文本的字体系列。我想在选择某个选项时更改边框和文本颜色。 我的 JavaScript 运行良好，但是当...

单击鼠标隐藏表格列

我有一个表格，我想在双击某列时隐藏某列。 隐藏列的代码实际上遍布 Stack Overflow。我所需要的只是关于如何/在哪里添加 ondblclick e 的提示...

是否可以在 CSS 中将 :has 与 :first-of-type 或类似内容结合起来？

我正在寻找一种方法来选择第一个且仅第一个父元素，该元素包含另一个具有给定类的元素。 例如： <... 我正在寻找一种方法来选择第一个且仅第一个父元素，该元素包含另一个具有给定类的元素。 举个例子： <div class="wrapper"> <div class="item"> <div class="inner-element type-a"> </div> </div> <div class="item"> <!-- want to select this one --> <div class="inner-element type-b"> </div> </div> <div class="item"> <div class="inner-element type-b"> <!-- but not this one --> </div> </div> </div> 所以我可以使用 .wrapper .item:has(.inner-element.type-b) 选择 item div 中的 all，其中包含具有 type-b 类的元素，但我只想定位第一个。 我尝试了.wrapper .item:has(.inner-element.type-b):first-of-type，但这似乎没有正确定位该元素。单独使用 CSS 是否可以做到这一点，还是我的选择器组合有问题？ 一个可能的选择是应用您的第一个规则，然后将其“取消应用”到您不希望使用相邻同级选择器设置样式的后续元素~例如 .wrapper .item:has(.inner-element.type-b) { border: 1px solid red } .wrapper .item:has(.inner-element.type-b) ~ .item:has(.inner-element.type-b) { border: unset }