Sass（Syntactically Awesome Style Sheets）是CSS的扩展，添加了嵌套规则，变量，mixins和类扩展等功能。这使开发人员能够编写结构化，可管理且可重用的CSS。 Sass被编译成标准CSS。
文本应根据其所在位置改变颜色。例如，左边的角应该是橙色，右边的角应该是紫色。你可以看到中间有边框的清晰过渡...
其实我想了解一些关于sass的具体知识，因为我对sass一无所知。问题是。我是否必须将 scss 文件与我正在工作或...的不同 css 文件链接
Symfony Flex 错误：您配置了错误的 DNS 解析器
当我运行命令composer install或composer update时，它会显示以下内容 以下异常可能表明您的 DNS 解析器配置错误 ...
无法在 Angular 7 应用程序中覆盖 Bootstrap
在 Angular 应用程序中，我试图通过删除分隔线来覆盖我的面包屑样式。我使用 https://getbootstrap.com/docs/4.2/components/breadcrumb/#example。但它不起作用。 这是我的角度。
我有以下代码来对两种类型的相等数量的元素进行排序。然而，它们都聚集在一起。有没有办法将它们放入一个列中，一个来自这种类型，一个来自另一种类型？ ....
这是关于Air Datepicker的链接 http://t1m0n.name/air-datepicker/docs/ 然后，这是关于这个日期选择器的 github 页面。 https://github.com/t1m0n/air-datepicker 你能回答我吗...
我正在尝试在左侧创建一个可折叠的侧边栏。 我想将其设置得非常简单：2 列，其中包含 2 个弹性框，按下按钮时：左侧弹性框的宽度增加...
我有一个带有动画的：悬停效果。 在 :hover 中，动画完全按照我的需要运行。但是当我离开 :hover 时，我也需要动画运行，但以相反的方式运行。我使用 (:not(:hover))
我正在探索一种有效的方法来完成以下任务： 我的表格具有水平溢出滚动功能。我的目标是确保当您...
我有一张这样的桌子： 在大屏幕上 我有一张这样的桌子： <p>On large screens</p> <table> <tr> <td>1</td> <td>3</td> <td>5</td> </tr> <tr> <td>2</td> <td>4</td> <td>6</td> </tr> </table> 有没有办法纯粹用CSS修改成LOOK这样？ （单列，其中每个奇数项都来自第一行，每个偶数项来自第二行） <p>On small screens</p> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 我尝试使用 display: contents; 但显然，由于某种原因它不适用于 <tr>-s。关于我应该如何处理这个问题有什么想法吗？另外，我只能使用纯 (S)CSS。行数和列数是动态的。 使用 CSS 网格，如下所示 table { display: grid; } table > *, /* you need to target the "tbody" as well as "tr" */ table tr { display: contents; } td:nth-child(1) {order:1} td:nth-child(2) {order:2} td:nth-child(3) {order:3} <p>On large screens</p> <table> <tr> <td>1</td> <td>3</td> <td>5</td> </tr> <tr> <td>2</td> <td>4</td> <td>6</td> </tr> </table> 1 3 5
我正在开发一个简单的随机名称选择器网站，我想知道如何使三个文本位于每个插槽的顶部并同时在每个插槽中对齐中心。 当前图像...
我需要增加给定类选择器的类特异性。 例子： 。测试 { 颜色：#fff； } 目前我需要输入 .test.test 以增加特异性。 还有其他的方案吗...
我在无序列表元素中有几个锚标记，如下所示： 我在无序列表元素中有几个锚标记，如下所示： <ul class="d-flex justify-content-center flex-row unordered"> <li class="li-0" id="li-0"><a href="/NavigationSection/features.html">Features</a></li> <li class="li-1" id="li-1"><a href="/NavigationSection/pricing.html">Pricing</a></li> <li class="li-2" id="li-2"><a href="/NavigationSection/help.html">Help</a></li> <li class="li-3" id="li-3"><a href="/NavigationSection/blog.html">Blog</a></li> <li class="li-4" id="li-4"><a href="/NavigationSection/about.html">About Us</a></li> </ul> 但是经过测试，锚标签似乎不起作用。 我已经在谷歌上的开发工具中检查了控制台，锚标记也没有出现在源代码中的列表元素中。 一些预先回答： 是的，我有一个名为 NavigationSection 的文件夹，并且那些请求的 html 文件命名正确并且确实存在。 我尝试过添加 z 索引，但这似乎不起作用。 意外行为是由于 JavaScript 代码中的以下行造成的： $('.unordered').append($(`.li-${x}`)).text(listData[x]) .text()调用将<li>元素内的内容完全替换为文本。这还包括 <li> 元素中的任何 HTML，从而删除 <a> 元素。 您可以考虑完全删除 .text() 调用： // Create hamburger menu when screen is less than 776px or else return to original values const listData = [] for (var i=0; i<=4; i++){ listData.push($(`.li-${i}`).text()) } if ($(window).width() < 776){ $('.unordered').html('<i class="fa-solid fa-bars mt-2 dropdown"></i>').css("paddingLeft", "0px") } else { for (var x=0; x<=4; x++){ $('.unordered').append($(`.li-${x}`)) } } @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); * { margin: 0px; padding: 0px; font-family: "Poppins", monospace, sans-serif; } @keyframes phone-load { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @keyframes title-load { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @keyframes text-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes bg-load { 0% { opacity: 0; } 100% { opacity: 100; } } body { height: 100svh; width: 100vw; background: url("./Secondary Files/bg-image.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; } @media (max-width: 915px) { body { height: 120svh; } } body main { background-color: rgb(14, 13, 13); width: 80%; margin: 75px 0px; border-radius: 25px; animation: 1s ease-in-out 0s 1 bg-load; } body main nav { margin-top: 25px; column-gap: 30px; animation: 1s ease-out 0s 1 text-load; } @media (max-width: 882px) { body main nav { column-gap: 10px; } } body main nav .sections-container { color: rgb(154, 189, 169); } body main nav .sections-container ul { list-style: none; margin: 0px; column-gap: 30px; } @media (max-width: 1030px) { body main nav .sections-container ul { column-gap: 10px; } } body main nav .sections-container ul li { float: left; font-weight: 300; cursor: pointer; } body main nav .account-buttons .login-btn, body main nav .account-buttons .sign-up-btn { background-color: rgb(29, 120, 139); font-weight: 700; color: black; } body main nav .account-buttons .login-btn:hover, body main nav .account-buttons .sign-up-btn:hover { color: black; } body main .info-display { flex-direction: row; transform: translateY(30%); } @media (max-width: 915px) { body main .info-display { flex-direction: column; row-gap: 50px; margin-top: 25px; transform: translateY(0%); } } @media (max-height: 960px) { body main .info-display { transform: translateY(15%); } } @media (max-height: 854px) { body main .info-display { transform: translateY(5%); } } body main .info-display .info .information-details { animation: 1s ease-out 0s 1 title-load; } body main .info-display .info .information-details h1, body main .info-display .info .information-details h6 { color: rgb(154, 189, 169); } body main .info-display .info .information-details h1 { max-width: 15ch; } body main .info-display .info .information-details .download-btn { background-color: rgb(29, 120, 139); font-weight: 700; } body main .info-display .phone-display { width: 332px; height: 545px; background-color: rgb(27, 27, 27); border-radius: 10px; animation: 1s ease-out 0s 1 phone-load; } @media (max-width: 1052px) { body main .info-display .phone-display { width: 332px; margin-bottom: 25px; } } @media (max-width: 433px) { body main .info-display .phone-display { width: 100%; } } body main .info-display .phone-display .phone-background { margin-top: 2%; width: 97%; height: 531px; background-color: rgb(1, 22, 26); border-radius: 10px; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.158) inset; } body main .info-display .phone-display .phone-background .header-items { color: white; font-size: 15px; opacity: 0.65; } body main .info-display .phone-display .phone-background .card-container { background-image: url("./Secondary Files/card-bg.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 10px; } body main .info-display .phone-display .phone-background .card-container .card-info { font-size: 14px; color: rgb(154, 189, 169); } body main .info-display .phone-display .phone-background .card-container .card-info .cc-balance { font-weight: 700; } body main .info-display .phone-display .phone-background hr { width: 12%; border: dotted white 4px; border-bottom: none; } body main .info-display .phone-display .phone-background .spending-info .credit-limits, body main .info-display .phone-display .phone-background .spending-info .monthly-spend { background-color: rgb(29, 120, 139); border-radius: 10px; padding: 5px; width: 50%; } body main .info-display .phone-display .phone-background .spending-info .credit-limits p, body main .info-display .phone-display .phone-background .spending-info .monthly-spend p { font-size: 12px; margin-bottom: 5px; color: black; font-weight: 700; } body main .info-display .phone-display .phone-background .spending-info .credit-limits p span, body main .info-display .phone-display .phone-background .spending-info .monthly-spend p span { font-weight: 500; margin-right: 2px; } body main .info-display .phone-display .phone-background .spending-history { margin-top: 20px; width: 100%; color: rgb(154, 189, 169); } body main .info-display .phone-display .phone-background .spending-history h4 { margin: 20px 0px; font-size: 18px; } body main .info-display .phone-display .phone-background .spending-history .spends { width: 100%; } body main .info-display .phone-display .phone-background .spending-history .spends .location-time { font-size: 8px; } body main .info-display .phone-display .phone-background .spending-history .spends p { margin: 0px; } body main .info-display .phone-display .phone-background .spending-history .spends .spend-1, body main .info-display .phone-display .phone-background .spending-history .spends .spend-2, body main .info-display .phone-display .phone-background .spending-history .spends .spend-3 { font-size: 14px; width: 100%; row-gap: 24px; } body main .info-display .phone-display .phone-background .spending-history .spends .spend-1 .transaction-image, body main .info-display .phone-display .phone-background .spending-history .spends .spend-2 .transaction-image, body main .info-display .phone-display .phone-background .spending-history .spends .spend-3 .transaction-image { display: flex; flex-direction: row; background-color: rgb(29, 120, 139); padding: 2px 8px; height: 3svh; border-radius: 20px; text-align: center; justify-content: center; align-items: center; color: black; font-size: 16px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styless.css"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <title>Payment Landing Page</title> </head> <body> <main> <!--NavBar--> <nav class="container d-flex justify-content-between flex-row"> <div class="image-container"> <img src="./Secondary Files/monzo-logo.png" alt="Logo" class="img-fluid logo" width="60"> </div> <div class="sections-container"> <ul class="d-flex justify-content-center flex-row unordered"> <li class="li-0" id="li-0"><a href="/NavigationSection/features.html">Features</a></li> <li class="li-1" id="li-1"><a href="/NavigationSection/pricing.html">Pricing</a></li> <li class="li-2" id="li-2"><a href="/NavigationSection/help.html">Help</a></li> <li class="li-3" id="li-3"><a href="/NavigationSection/blog.html">Blog</a></li> <li class="li-4" id="li-4"><a href="/NavigationSection/about.html">About Us</a></li> </ul> </div> <div class="account-buttons d-flex flex-row column-gap-3"> <a href="/AccountSection/accounts.html"><button class="login-btn btn px-4"> Log In </button></a> <a href="/AccountSection/accounts.html"><button class="sign-up-btn btn px-4"> Sign Up </button></a> </div> </nav> <!--Info section--> <section class="info-display d-flex justify-content-around align-items-center"> <section class="info"> <div class="information-details container d-flex align-items-left flex-column row-gap-4"> <h6>START SAVING MONEY</h6> <h1>Smart Credit Card For Your Daily Life.</h1> <button class="download-btn btn"> Download <i class="fa-regular fa-circle-down"></i> </button> </div> </section> <!--Phone Display--> <section class="phone-display"> <div class="phone-holder px-0"> <div class="phone container-fluid px-0"> <!--Phone Main--> <div class="phone-background container-fluid"> <div class="header-items container px-0 d-flex justify-content-between flex-row py-3"> <i class="fa-solid fa-bars"></i> <p class="m-0">Welcome, Tom</p> <i class="fa-regular fa-bell"></i> </div> <div class="card-container container px-0"> <div class="card-info container px-0 d-flex flex-column ps-4 pt-2"> <p class="cc-title mb-2">Balance</p> <p class="cc-number mb-2">•••• •••• •••• 9207</p> <p class="cc-balance mb-2">£56,231</p> <div class="brand-expiry d-flex flex-row justify-content-between"> <p class="cc-expiry mb-0-2">09/26</p> <i class="fa-brands fa-cc-visa me-5 fs-4"></i> </div> </div> </div> <hr class="mt-3 mx-auto"> <div class="spending-info container px-0 d-flex justify-content-center flex-row column-gap-3 "> <div class="credit-limits"> <p>Credit Limits</p> <p><span>£</span>5,000</p> </div> <div class="monthly-spend"> <p>Monthly Spend</p> <p><span>£</span>2,240</p> </div> </div> <div class="spending-history container d-flex flex-column align-items-left col-xxl-1"> <h4>History</h4> <div class="spends container-fluid d-flex align-items-start flex-row px-0"> <div class="spend-1 d-flex align-items-end flex-column me-4"> <div class="transaction-image mb-2"><i class="fa-solid fa-arrow-up"></i></div> <div class="transaction-image mb-2"><i class="fa-solid fa-arrow-up"></i></div> <div class="transaction-image"><i class="fa-solid fa-arrow-up"></i></div> </div> <div class="spend-2 d-flex align-items-left flex-column px-0"> <div class="location mb-1"> <p>Amazon</p> <p class="location-time">Today</p> </div> <div class="location mb-1"> <p>Halfords</p> <p class="location-time">Yesterday</p> </div> <div class="location mb-1"> <p>McDonald's</p> <p class="location-time">Yesterday</p> </div> </div> <div class="spend-3 d-flex align-items-left flex-column px-0"> <p class="mb-3 price">£46.99</p> <p class="mb-3 price">£25</p> <p class="price">£9.99</p> </div> </div> </div> </div> </div> </div> </section> </section> </main> </body> </html>
我正在构建一组将从多个不同站点提供服务的网页，每个模板都包含一些特定于站点的内容。 它们本质上是相同的，但差异足以满足我的需要......
我有一个带有 tailwind 的项目和一个（正在进行中的）UI 库，我们希望逐步迁移到该库。 我像这样在我的 index.css 上导入样式 @tailwind基地； @tailwind组件； @ta...
图标未显示在具有 ngx-admin 主题的 ng2-smart-table 中
我正在使用 ngx-admin 主题在 Angular 项目中设置我的 ng2-smart-table 的样式。我已遵循文档中概述的配置步骤，包括安装必要的依赖项...
我应该使用一个自定义设计库，将样式 - 字体、字体粗细等导出为 js 对象。 我的代码库使用 scss 文件。有什么方法可以在我的 scss 文件中使用 js 对象吗？ 我有...
如这个小提琴所示，我有一个使用变换的自定义下划线：skew（-30deg）rotate（-2deg）;。 如何用使用宽度的公式替换 -2？ 例如。 [宽度（以像素为单位）] * .004 - 2.4 我
我在使用 SCSS 编写 CSS 文件时遇到错误 错误如下： 错误：参数 $green 中缺少 RGB 函数。 在 sass/c:\Users\User\Desktop\This PC\styl 第 116 行...
Webpack 5 中的 SVG 和 TTF 加载器在 SCSS 文件中不起作用
我已经为 scss、svg 和 ttf 文件类型尝试了许多不同的加载器组合，但我无法让 webpack 能够处理加载到 scss 文件中的 svg 或 ttf 文件。