css 相关问题

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

我目前正在尝试实现一个基于shadcn的Timeline React组件。该组件是社区贡献的组件，我承认它只是从 GitHub 复制粘贴的。我只是测试...

css reactjs astrojs shadcnui

回答 1 投票 0

我有一个父div和一个子div。例如，我想知道是否可以将子div的宽度和高度表示为父div的百分比我有一个父 div 和一个子 div。例如，我想知道是否可以将子 div 的宽度和高度表示为父 div 的百分比 <!doctype html> <head> <meta charset='utf-8' /> <title>Horizontal center a div</title> <style type='text/css'> .one{ width:800px; height:100px; background-color:grey; } .two{ margin-top:30px; margin-bottom:30px; min-height:40px; margin-left:30px; width:90px; background-color:pink; display:inline-block; } </style> </head> <body> <div class="one"> <div class="two">lorem ipsum</p> </div> </body> </html> 查看实际效果 http://jsfiddle.net/thiswolf/3qRgH/ 外部div（父级）有一个height of 100px，我的子div有一个height of 40px。我想将我的孩子放在父主题内居中，所以，100px - 40px = 60px，我将60px划分两次并分配子div margin-top:30px 和 margin-bottom:30px;。但是，我想以百分比形式表示边距。我如何以 % 表示边距。您可以通过这种方式将 div 居中（已编辑）： <!doctype html> <head> <meta charset='utf-8' /> <title>Horizontal center a div</title> <style type='text/css'> .one{ width: 800px; background-color: grey; } .two{ min-height: 40px; margin: 30% 355px; width: 90px; background-color: pink; display: inline-block; } </style> </head> <body> <div class="one"> <div class="two">lorem ipsum</div> </div> </body> </html> 参见http://jsfiddle.net/3qRgH/2/ 你问的是这个吗？ http://jsfiddle.net/thiswolf/5AZJD/ 这似乎有效，但我还没有证明它 <!doctype html> <head> <meta charset='utf-8' /> <title>Horizontal center a div</title> <style type='text/css'> .one{ position:relative; width:800px; height:100px; background-color:grey; } .two{ position:absolute; top:30%; bottom:30%; min-height:40px; margin-left:30px; width:90px; background-color:pink; display:inline-block; } </style> </head> <body> <div class="one"> <div class="two">lorem ipsum</p> </div> </body> </html> .parent { background: gray; height: 300px; width: 300px; position: relative; } .child { background: orange; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; } <div class="parent"> <div class="child"></div> </div> 到目前为止，我还没有找到一种通过仅自定义父级来使子级div居中的方法

css

回答 3 投票 0

按钮在手机屏幕上点击后保持：悬停效果

我有一个滚动到顶部按钮，当它在移动屏幕上单击时，它会保留我为其悬停效果设置的颜色，并且不会返回到原始颜色。＃回到顶部 { 背景：...

javascript html css

回答 3 投票 0

重新排序移动显示的内容

我正在开发 HTML 电子邮件模板，并试图确保它在移动设备上正确显示。目前，我有一个图像，后跟文本和一个按钮，但在移动设备上，我想要图像......

html css email html-email

回答 1 投票 0

使用useScroll和useTransform实现滚动效果上的文本填充

我正在尝试创建一种反应效果，当页面滚动时，我的文本会逐渐从上到下填充颜色，如下所示：我认为 useTransform 变量不适用于

javascript css reactjs jsx framer-motion

回答 2 投票 0

如何为按钮添加平滑度？

我有一个将页面向上提升的按钮，但是当你点击它时，页面会急剧上升。我想增加平滑度。我该怎么做呢？我还想为这个bu添加一个光滑的外观...

javascript html css

回答 1 投票 0

如何将导航栏中的所有图标重新定位到中间

* { 填充：0；保证金：0； } 导航{ 内边距：20px；背景颜色：#809906；列表样式：无；底部边框：2px 纯黑色； } A { 颜色：黑色...

html css css-position

回答 1 投票 0

从购物车删除商品

我想实现从我使用html、css和javascript制作的食品网站的购物车中删除元素的功能。但它不起作用。没有删除图标。我添加这部分是为了

javascript html css

回答 1 投票 0

由于`position:sticky`或`position:fixed`CSS而跳过自动滚动行为

我在控制台中收到这样的警告。当编码 Nextjs 时我的代码 .... ...

css next.js

回答 1 投票 0

为什么有些 Unicode 字符比普通文本高？

我注意到一些 unicode 字符比普通文本高。例如。对角箭头（东北箭头 ↗，东南箭头 ↘，...），它们在字母 th 的顶部占据更多空间...

html css unicode

回答 2 投票 0

覆盖引导程序@media断点

我对这件事很陌生，所以请耐心等待。我最近一直在弄乱视图，想知道是否可以覆盖存储在引导程序中的断点。 IE）：根 { --

javascript html css sass

回答 2 投票 0

Vue/Bootstrap 表使用 CSS 类条件样式化行

我正在开发一个 Vue/Bootstrap 项目，并尝试根据表中项目的值有条件地更改 b 表中行的颜色。我使用该方法取得了一些成功

css vue.js twitter-bootstrap conditional-statements

回答 1 投票 0

js文件未加载，css文件在spring boot应用程序中工作

我有文件index.html，如下所示： ... <p>我的文件index.html看起来像这样：</p> <pre><code><head> ... <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/> <script th:src="@{/js/app.js}" type="script" async></script> ... </head> </code></pre> <p>渲染如下：</p> <pre><code><link rel="stylesheet" type="text/css" href="/css/index.css"> <script src="/js/app.js" type="script" async=""> </code></pre> <p>文件结构如下： <a href="https://i.sstatic.net/nSvvoUHP.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvblN2dm9VSFAucG5n" alt="enter image description here"/></a></p> <p>在浏览器中访问 <pre><code>/index</code></pre> 时，样式可以工作，但未加载 javascript。</p> <p>我尝试了不同的文件名，在浏览器中访问 <pre><code>/css/index.css</code></pre> 和 <pre><code>/js/app.js</code></pre>（有效），添加以下代码（没有改变行为）：</p> <pre><code>@Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/css/**", "/js/**") .addResourceLocations("classpath:/static/css/", "classpath:/static/js/"); } </code></pre> <p>此外，在浏览器网络选项卡中，我看到网页正在加载index.css，但没有加载app.js。</p> </question> <answer tick="false" vote="0"> <p>所以，类型应该是</p> <pre><code>type="text/javascript" </code></pre> <p>令我困惑的是这个 Mozilla 开发者页面的 X-Content-Type-Options <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default</a> 我误解了以下部分（它消除了以前的错误消息，但在这个问题上给我留下了问题）</p> <blockquote> <p>嗅嗅</p> </blockquote> <blockquote> <p>如果请求目标是 style 类型，则阻止请求并且 MIME 类型不是 text/css，或者是 script 类型且 MIME 类型不是 JavaScript MIME 类型。</p> </blockquote> </answer> </body></html>

javascript css spring-boot spring-mvc

回答 0 投票 0

使用 jQuery 实现 SlideUp 效果

我目前正在处理我的网站页脚，并且希望用户单击“联系我们”时页脚后面会出现一个黄色 div。这是我目前正在做的事情，但我可以......

javascript jquery html css

回答 2 投票 0

使用CSS在div内垂直对齐文本

我有以下 HTML 和 CSS 代码。我想将所有文本垂直居中放置。即使是“此处的文本”也会与徽标左对齐。我怎样才能用我的代码实现这个目标？小提琴：http://

html css

回答 2 投票 0

使用CSS在鼠标按下时突出显示div

是否可以通过鼠标按下事件突出显示一个div（更改其背景颜色），并在鼠标按钮抬起时取消突出显示它，仅使用CSS？

css

回答 4 投票 0

Bootstrap 4.0 - 使用弹性列

您好，您能帮我在代码中设置列吗？我有这个代码：侧边菜单&l... 您好，您能帮我在代码中设置列吗？我有这个代码： <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div class="???"> <div>1 piece</div> <div>2 pieces piece</div> <div>1 piece</div> <div/> <div/> <div/> 这是我的实际结果，其中我画出了如何分割其余空间。带菜单的蓝色栏应该固定，实际做什么。柱子比例1:2:1可调。代替 row，您可以使用 d-flex 作为 row 罐 wrap - 内容可以放在侧边栏下方。对于内容，如果你必须保留 html 结构，你可以使用这个： <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> 请参阅下面的演示 - 添加边框以供说明： html,body { height: 100%; } div { border: 1px solid; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid h-100"> <div class="d-flex h-100"> <div class="flex-column h-100">side menu</div> <div class="d-flex w-100"> <div class="col-3">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col-3">1 piece</div> </div> </div> </div> 您可以通过 col 类使用以下解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side</div> <div class="col">1 piece</div> <div class="col-6">2 pieces piece</div> <div class="col">1 piece</div> </div> </div> 使用 w-* 类和 bootstrap flexbox 的另一种解决方案： body { height:100vh; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid h-100"> <div class="row h-100 d-flex flex-nowrap align-items-stretch"> <div class="flex-column h-100">side</div> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 使用 Bootstrap v4 Flexbox： <div class="d-flex flex-row h-100"> <div class="d-flex justify-content-start">side menu</div> <div class="d-flex flex-row w-100"> <div class="w-25">1 piece</div> <div class="w-50">2 pieces piece</div> <div class="w-25">1 piece</div> </div> </div> 看来你可以在没有flex-column的情况下实现这一点。列的比例由 flex-grow-1 类决定，具体取决于可用/需要的空间量。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div style="height: 175px;"> <div class="d-flex flex-grow-1 border border-primary m-1 h-100"> <div class="d-flex flex-grow-1 border border-secondary m-1"> <div class="border border-success m-1">  <div class="border border-warning m-1">1 piece</div> <div class="border border-info m-1">1 piece</div> <div class="border border-dark m-1">1 piece</div> </div>  <div class="d-flex flex-wrap flex-grow-1 border border-danger m-1"> <div class="flex-grow-1 border border-warning m-1">1 piece</div> <div class="flex-grow-1 border border-info m-1">2 pieces piece</div> <div class="flex-grow-1 border border-dark m-1">1 piece</div> <div/> <div/> <div/> <div>

css twitter-bootstrap flexbox bootstrap-4 twitter-bootstrap-4

回答 4 投票 0

有没有办法同时为2个css属性分配相同的值？

使用 CSS、LESS 或 Sass 可以同时为 2 个 css 属性分配相同的值吗？就像： .c1, c2 {相同值} 但像这样： .c2 { 背景颜色:, 颜色: sameValue}

css sass less

回答 5 投票 0

CSS/SCSS 对代码的更改不适用于浏览器

我试图通过修改scss / css来隐藏数字。就是图中的标签：poll-row__number。奇怪的是，它不在检查器显示的 scss 文件中，而是在另一个文件中。我是

html css django scss-mixins

回答 2 投票 0

添加成功和失败页面时遇到问题

我正在尝试创建一个应用程序，让客户端登录到 mailchimp，当我尝试注册它们时，我收到此错误消息： ReferenceError：未定义响应在 C:\Users\Owner\Desktop\News...