css 相关问题

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

我的幻灯片工作正常，但它们转换得太快了。我想将淡入淡出过渡减慢到两秒左右。这是我当前正在使用的相关代码。我正在使用

javascript css css-transitions swiper.js fade

回答 1 投票 0

我正在为课程制作这个网站。我无法让这个灰色边框消失：这是我的该部分的 HTML：我正在为课堂制作这个网站。我无法让这个灰色边框消失：这是我的该部分的 HTML： <div className="general_text" id="playControls"> <div className="general_text" id="login_username_place">{props.userName}</div> <Button className="general_text" onClick={() => navigate('/play')}>Play</Button> <Button className="general_text" onClick={() => logout()}>Logout</Button> </div> 我在 CSS 中将整个背景设置为粉红色： * { background-color: #a965ab; font-family: "Lucida Console", "Courier New", monospace; } ...但我就是不知道如何摆脱灰色边框。有什么想法吗？我尝试将页面的整个背景设置为粉红色。此外，根据“检查页面”，元素周围的类是 <main class="container-fluid bg-secondary text-center"> （我在代码中找不到它）。我将该类的背景颜色也改为粉红色，但什么也没发生。我想我有办法解决这个问题。我猜你的灰色边框应用在 <div className="general_text" id="playControls"> <div className="general_text" id="login_username_place">{props.userName}</div> <Button className="general_text" onClick={() => navigate('/play')}>Play</Button> <Button className="general_text" onClick={() => logout()}>Logout</Button> </div> 您可以使用 CSS 将其添加到我们的代码中，而不是使用某些框架的类名。像这样： #playControls{ border: 10px solid grey; padding-right: 0; padding-left: 0; } <div className="general_text" id="playControls"> <div className="general_text" id="login_username_place">{props.userName}</div> <Button className="general_text" onClick={() => navigate('/play')}>Play</Button> <Button className="general_text" onClick={() => logout()}>Logout</Button> </div>

html css

回答 1 投票 0

将图像调整到相同高度并横向滚动

我正在尝试制作一个包含一些图片的基本组合网站，目的是使其全部适合单个视图，并在用户滚动时从侧面滚动图像。我还有一些图像...

javascript html css tailwind-css

回答 1 投票 0

Angular Material 输入 - 在 Flexbox 中增长的文本区域

我想让文本区域根据可用空间灵活增长。所以基本上如果我有 &... 我想让textarea根据可用空间灵活增长。所以基本上如果我有 <form> <mat-form-field class="example-full-width area-1"> <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> <mat-form-field class="example-full-width area-2" > <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> </form> 我希望输入区域也会增长。我知道存在指令 cdkTextareaAutosize 但这会让 textarea 根据输入而增长。这是我不想拥有的。我想让 textarea 延伸到整个 height 而不仅仅是一小部分。我想要某种动态方法 - 取决于我放置组件的位置。堆栈闪电战下面的 CSS 可能有效，我们只需调整，使其始终 100% 基于 Flexbox 样式和 height:100%，我们使用 display: flex 和 flex-grow: 1 使框适合可用空间： ::ng-deep { .full-textarea { display: flex; mat-form-field { display: flex; flex-grow: 1; .mat-mdc-form-field-flex, .mat-mdc-form-field-infix, textarea { height: 100% !important; } } } } html <form class="full-textarea"> <mat-form-field class="example-full-width area-1"> <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> <mat-form-field class="example-full-width area-2"> <mat-label>Leave a comment</mat-label> <textarea matInput placeholder="Ex. It makes me feel..."></textarea> </mat-form-field> </form> Stackblitz 演示

css angular angular-material

回答 1 投票 0

Safari 中 Flex、列和网格的奇怪问题

任何人都可以向我解释一下这是否是一个错误或者我应该向 Safari 团队报告什么在除 Safari 之外的任何浏览器中，我都能得到正确的渲染： https://play.tailwindcss.com/uzqrEtPtKX 任何人都可以向我解释这是否是一个错误或者我应该向 Safari 团队报告什么在除 Safari 之外的任何浏览器中，我都能得到正确的渲染： https://play.tailwindcss.com/uzqrEtPtKX <div class="flex min-h-screen flex-col flex-wrap"> <div class="grid gap-5 grid-cols-2"> <div>Hello</div> <div>Hello</div> <div>World</div> <div>World</div> </div> </div> 但是在 Safari 中，对象沿着页面分布，我不明白为什么。此问题的常见解决方法是使用 height 而不是 min-height。然而，这可能并不适合所有情况，因为它设置了固定的高度。另一个解决方法是在 Flex 容器周围添加一个额外的包装器，并将该包装器设置为全高块。 <div class="h-screen"> <div class="flex flex-col flex-wrap"> <div class="grid gap-5 grid-cols-2"> <div>Hello</div> <div>Hello</div> <div>World</div> <div>World</div> </div> </div> </div> 在此代码中，具有 div 类的外部 h-screen 设置固定高度 100vh，并且具有 div 类的内部 flex 现在可以在 Safari 中按预期运行。

html css safari tailwind-css

回答 1 投票 0

如何控制移动视图表格中的字体大小

我正在尝试控制 1x3 表格内文本的字体大小，仅用于移动视图。是的，我包括：我正在尝试控制 1x3 表格内文本的字体大小，仅用于移动视图。是的，我包括： <meta name = "viewport" content = "width=device-width, initial-scale=1.0"> <table width="700" align="center"> <tr> <td><b><a href= "ListOfGenreLists.html" style="font-size: 40pt; color: #4B0082; text-decoration: none">Genre</a></b>    </td> <td><b><a href= "ListOfMiscellaneousLists.html" style="font-size: 40pt; color: #4B0082; text-decoration: none">Miscellaneous</a></b> </td> <td><b><a href= "ListOfYearLists.html" style="font-size: 40pt; color: #4B0082; text-decoration: none">Year</a></b> </td> </tr> </table> @media screen and (max-width:767px) { table, td { display: block; } td { position: relative; padding-left: 0%; font-size: 10%; line-height: 50px; } } 也许使用检测脚本？ // Detect which mobile devices function isMobile() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } // Load the appropriate CSS file if (isMobile()) { document.write('<link rel="stylesheet" href="mobile.css">'); } else { document.write('<link rel="stylesheet" href="desktop.css">'); }

html css

回答 1 投票 0

浮动时段落向下：左

为什么“什么”这个词向左浮动时会下降到下一行？ “为什么”除了“为什么”这个词之外没有？它们都是段落。我是一个 html/css 菜鸟，还在学习，谢谢为什么“什么”这个词向左浮动时会下降到下一行？ “为什么”除了“为什么”这个词之外没有？它们都是段落。我是一个 html/css 菜鸟，还在学习中，谢谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <div class="container"> <h1>I love carrots</h1> <p id="what">what</p> <p id="why">why</p> </div> </body> </html> style1.css .container{ border: solid; overflow: hidden; } .container #what{ float: left; }``` [enter image description here](https://i.stack.imgur.com/ZwHtz.png) I was expecting to be beside the word why and not go next line 问题在于 <p> 标签的边距相互干扰。如果您检查开发工具中的元素，您会发现当 p#why 浮动时，p#what 仍然延伸到页面的左边缘，因此它们有点重叠。你可以也向左浮动p#why，或者删除 p#why 的下边距并删除 p#what 的上边距或者你当然可以选择像 Flexbox 这样的单独的布局方法，但这是使用浮动的方法。 .container { border: solid; overflow: hidden; } .container + .container { margin-top: 20px; } /* original */ .container #what { float: left; } /* option 1 */ .container #what2, .container #why2 { float: left; } /* option 2 */ .container #what3 { float: left; margin-top: 0; } .container #why3 { margin-bottom: 0; } <figure> <div class="container"> <h1>I love carrots</h1> <p id="what">what</p> <p id="why">why</p> </div> <figcaption>original</figcaption> </figure> <figure> <div class="container"> <h1>I love carrots</h1> <p id="what2">what</p> <p id="why2">why</p> </div> <figcaption>option 1</figcaption> </figure> <figure> <div class="container"> <h1>I love carrots</h1> <p id="what3">what</p> <p id="why3">why</p> </div> <figcaption>option 2</figcaption> </figure>

html css

回答 1 投票 0

转盘连动滚轮独立到侧面

我有一个包含多个轮播行的页面，但是每当我单击“下一个”或“上一个”按钮以显示轮播的其他项目时，它会影响所有轮播，而不仅仅是cli...

javascript html jquery css .net

回答 1 投票 0

如何将图像与文本对齐？

我正在为一个班级建立一个网站，我正在尝试创建一个导航栏。我希望它看起来像这样，在 Adobe XD 中创建。我希望草莓徽标与文本对齐并具有所有

html css

回答 1 投票 0

学生学习者，如何将图像与文本对齐？

我正在为一个班级建立一个网站，我正在尝试创建一个导航栏。我希望它看起来像这样，在 Adobe XD 中创建。我希望草莓徽标与文本对齐并具有所有