css 相关问题

CSS（层叠样式表）是一种表示样式表语言，用于描述HTML（超文本标记语言），XML（可扩展标记语言）文档和SVG元素的外观和格式，包括（但不限于）颜色，布局，字体和动画。它还描述了元素应如何在屏幕上，纸上，语音或其他媒体上呈现。

即使我最小化屏幕，如何完全修复 HTML/CSS 中的文本

所以现在我正在尝试应用我在前端 Web 开发中学到的知识，但我遇到了这样的问题：文本在较小的视口中没有保持应有的状态。身体 { 字体家族...

html css

回答 3 投票 0

内容溢出和滚动造成圆角问题

我正在尝试创建卡片布局。这是我的样式代码，在 div 中使用。 .card-container-grid-2 { 填充：1rem；间隙：1rem；显示：网格；网格模板列：重复（自动调整，minmax（cal...

html css scrollview overflow

回答 0 投票 0

跨域分割请求——阻碍过度的安全性

遵循 Steve (YSlow) Souder 的布道，我的网站 (LibraryThing.com) 将请求跨域拆分以促进并行加载。我们做 CSS、JS 和图像；你也可以做Flash等。我们...

javascript css security optimization

回答 3 投票 0

</desc> <question vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="87f3e6eeebf0eee9e3e4f4f4c7b5a9b7a9b7">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-slate-600"> <nav class="bg-white text-black h-12 flex items-center justify-between px-4"> <div class="text-lg font-semibold">ABC Enterprises</div> <ul class="flex items-center space-x-4"> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Solutions</a> <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a> </div> </li> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Industries</a> <div class="dropdown-content absolute bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a> </div> </li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li> </ul> </nav> </body> </html> </code></pre> </div> </div> <p></p> <p>对于大多数人来说，我面临的问题很容易，我在过去的 6-7 个小时里都被困在上面。所以我也尝试了 group-hover:block ，但当我将鼠标悬停在解决方案和资源上时，它仍然没有显示下拉菜单，请帮助我，这很紧急！！！</p> </question> <answer tick="false" vote="0"> <p>2.0.0版本中没有任何类定义<pre><code>group-hover:block</code></pre>，您需要在Tailwind上升级到新版本。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-slate-600"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Front Page</title> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="f08491999c87999e94938383b0c2dec0dec0">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="bg-slate-600"> <nav class="bg-white text-black h-12 flex items-center justify-between px-4"> <div class="text-lg font-semibold">ABC Enterprises</div> <ul class="flex items-center space-x-4"> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Solutions</a> <div class="dropdown-content absolute hidden bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG & Sustainability Reporting & Management</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Carbon Accounting & GHG Measurement</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Sustainable Procurement & Sourcing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Portfolio Management For Investors</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">ESG Consulting</a> </div> </li> <li class="relative group"> <a href="#" class="text-black hover:text-gray-300 px-3 py-2 font-bold rounded-md">Industries</a> <div class="dropdown-content absolute bg-white text-black py-2 rounded shadow-lg min-w-max top-full mt-1 hidden group-hover:block"> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Manufacturing</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Agri-business & Forestry</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Retail & Hospitality</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Health & Education</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Infrastructure</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Financial Institutions & Funds</a> <a href="#" class="block px-4 py-1 hover:bg-gray-100">Real Estate & Construction</a> </div> </li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Contact Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">About Us</a></li> <li><a href="#" class="text-black hover:text-gray-300 px-3 py-2 rounded-md font-bold">Sign In</a></li> </ul> </nav> </body> </html> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

html css header tailwind-css navbar

回答 0 投票 0

触发手柄一次仅单击地图中的一项

我正在开发一个应用程序，允许用户从列表中选择车辆。我目前遇到的问题是，当我尝试将车辆映射到列表并选择单个车辆时...

javascript css reactjs react-hooks

回答 1 投票 0

从 spécifique mat-option 中删除 mat-pseudo-checkbox

在角度材质中，mat-select 具有元素 mat-pseudo-checkbox，它在 mat-option 中显示复选图标。我有多个垫选择，我想删除或隐藏此元素。和 ::ng-深.mat-

css angular angular-material

回答 1 投票 0

为什么background-filter:blur()不能正常工作？

我正在尝试实现这个图像：其中，带有文本“Dog”的 div 部分覆盖并模糊了图像。所以我尝试了这个：。轮廓 { 背景图片：url(https://

html css blur

回答 3 投票 0

为什么对象适合会影响我的图像质量以及如何避免它

使用 object-fit: cover 对我的图像质量有不好的影响。我们可以看到，当元素使用 object-fit: cover 时，图像中的头发会像素化。这是我的代码的演示：https://codepe...

html css object-fit

回答 2 投票 0

响应式图像裁剪

我一直在尝试裁剪宽度低于 768 像素的屏幕尺寸的图像。图像应从左侧和右侧均匀裁剪。这是全尺寸图像的示例（尺寸...

jquery html css responsive-design

回答 3 投票 0

img 上带有图标的角标签

我在 HTML 中有一个图像，当用户单击该图像时，我想在该图像上添加带有图标的角标签。有人可以帮我创建一个 css 类吗，我可以将其添加到上...

html css

回答 1 投票 0

我怎样才能让这个boostrap5.3下拉菜单居中并占据页面的所有宽度？

我需要将下拉菜单设置为没有内容的页面，占据页面的所有宽度。我还需要将菜单的所有“lorem”链接放在导航栏中的中央。我……

javascript html css bootstrap-4 bootstrap-5

回答 1 投票 0

带有很长标签的引导复选框

这个CSS 输入[类型='复选框'] { 变换：缩放（2）；右边距：1.5em；边框：1.5px 纯黑； } 超文本标记语言这个CSS input[type='checkbox'] { transform: scale( 2 ); margin-right: 1.5em; border: 1.5px solid black; } HTML <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="mChkCustomer"> <label class="form-check-label" for="mChkCustomer"> This is just a test for a very llllllooooonnnnngggggg label .................. </label> </div> 结果在宽屏幕上看起来不错但是当屏幕变窄时，就会发生这种情况问题：如何正确对齐复选框和标签？尝试移动标签而不是复选框 CSS input[type='checkbox'] { transform: scale( 2 ); /*margin-right: 1.5em;*/ border: 1.5px solid black; } .form-check-label { margin-left: 1.5em; }

html css bootstrap-5

回答 1 投票 0

HTML 列显示不正确

我有两个问题，都与 gmail 上显示的列有关。 1.我有两列彼此相邻，但它们显示在彼此之上。 1/3 列，但也显示错误...

html css multiple-columns

回答 1 投票 0

SVG CSS 悬停隐藏阴影

我需要的是 SVG 消失，但阴影保持悬停。我得到的是 SVG 和阴影都消失了。 div > svg { 颜色：黑色; 过滤器：滴-...

css svg dropshadow onhover

回答 1 投票 0

在 JS 函数和 CSS 属性之间传递值

var 系数 = 1；函数放大（值）{ 系数=值； } document.getElementById('shadow').addEventListener('mouseover',扩大(2)); document.getElementById('shadow').addEventListener('mo...

javascript css

回答 1 投票 0

如何使用适当的特异性来设计 :root 而不 !important

在自定义元素内，因为边框颜色是在父页面上设置的，所以如果不求助于 !important 就无法使边框颜色起作用 :主机([玩家=“O”]) { 颜色：var(--color2); 乙...

css web-component custom-element css-specificity

回答 3 投票 0

旋转后变换比例

我有一个问题。我正在将 div 旋转 45 度。然后我想在新的 y 轴 http://jsfiddle.net/P37g5/2/ 上缩放它 - 而不是现在 45 度的 y 轴？

css

回答 2 投票 0

将背景图像保留在底部

我一直在研究将图像保留在底部页面的解决方案。我目前得到的代码是：。页脚 { 背景图像: url('images/footer.png'); 背景重复：重复 x...