css 相关问题

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

我浏览了很多过去的论坛关于@font-face的问答，并尝试了我能看到的一切来纠正这个问题。使用 fontsquirrel 将字体转换为 woff 和 woff2。简单来说

css wordpress font-face

回答 1 投票 0

我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导网站中的以下代码添加吐司：我正在使用 bootstrap 和 javascript 开发一个 HTML 网站。我正在尝试使用引导程序网站中的以下代码添加吐司： <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 但是吐司并没有出现，如图所示。它只是在导航和轮播之间留下了间隙。我已经从引导网站导入了所有这些脚本： <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> 并将以下内容放入我的 javascript 文档中： $('.toast').toast(option) 但是，什么也没发生。我希望有人能帮助我:) 您需要输入有效的选项。我：eshow, hide or a callback function。请参阅 - https://getbootstrap.com/docs/4.2/components/toasts/。 $('.toast').toast('show'); <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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img height="200px" width="200px" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 如果您不想自动关闭 Toast，请添加 data-autohide="false"。 $('.toast').toast('show') <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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div class="toast" data-autohide="false"> <div class="toast-header"> <svg class=" rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"> <rect fill="#007aff" width="100%" height="100%" /></svg> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> 文档准备好后，您需要启动“ $(".toast").toast('show'); 。 <script> $(document).ready(function() { $(".toast").toast('show'); }); </script> 首先，你需要将吐司固定在顶部或底部，具体取决于你想要的位置。 <div role="alert" aria-live="assertive" aria-atomic="true" class="toast fixed-bottom m-5 ms-auto" data-bs-autohide="false"> <div class="toast-header"> <img src="..." class="rounded me-2" alt="..."> <strong class="me-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> <script> window.onload = (event) => { let myAlert = document.querySelector('.toast'); let bsAlert = new bootstrap.Toast(myAlert); setTimeout(function () { bsAlert.show(); }, 5000); }; </script> 我尝试了这个解决方案，但我收到一个 JS 错误“Uncaught ReferenceError: bootstrap is not Defined”，这似乎阻止了烤面包机的显示。我看到的唯一区别是我正在使用 bootstrap5，并且 bootstrap 似乎不再需要 JQuery，因此它不包含在基本模板中。渲染后我在基本模板中看到的是： <head> ... <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" rel="stylesheet"> ... </head> <body> ... <toaster html goes here> .... <script crossorigin="anonymous" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> </body 我不知道为什么 bootstrap 是未定义的，因为 JS 是明确链接的，但我是 bootstrap 的新手，所以可能做了其他错误。我正在使用 django-bootstrap5 应用程序，其他一切似乎都工作正常。可能想考虑使用这个库，它通过引导程序简化了 toast 的使用： https://github.com/zhiftyDK/bootstrap-toast

javascript jquery html css bootstrap-4

回答 5 投票 0

在 HTML 中的嵌入元素上滚动

我正在尝试滚动嵌入元素，但不滚动 HTML 正文。我已经指定了overflow-y:hidden;在CSS中的body和overflow-y:scroll;在 CSS 中我想要的元素...

html css scroll scrollbar

回答 1 投票 0

将 HTML（带有 CSS 样式）导出为 Word 文档（.doc 或 .docx）

我正在尝试将一个简单的页面导出为Word文档，但似乎找不到任何方法来做到这一点。我尝试的任何方法都只是导出带有字体颜色的文本，但仅此而已。我想要的是出口

html css ms-word export export-to-word

回答 1 投票 0

关于 React.js 的 CSS 选择器

这是我的第一个问题，我对 React 很陌生。我想通过使用名为“Ch...

css reactjs

回答 1 投票 0

在行内框中设置行高会使 CSS 中的高度变得奇怪

盒子的高度是130px，不明白为什么？。盒子 { 行高：120px；背景颜色：#cd0000；颜色：#fff； } 。内容 { 显示：内联块；行高：20px； } 盒子的高度是130px，不明白为什么？ .box { line-height: 120px; background-color: #cd0000; color: #fff; } .content { display: inline-block; line-height: 20px; } <div class="box"> <div class="content">1<br />2<br />3<br />1</div> </div> 设置.box的高度120px，就会是120px，但不知道为什么会出现130px？只需使用 height 而不是 line-height 作为 .box div。 line-height这里真的没有意义： .box { height: 120px; background-color: #cd0000; color: #fff; } .content { display: inline-block; line-height: 20px; } <div class="box"> <div class="content">1<br />2<br />3<br />1</div> </div>

html css

回答 1 投票 0

将项目垂直放置在其父容器的顶部

遵循弹性项目指南，我的理解是，您可以在项目上使用“align-self”来设置其在弹性容器内的特定位置。所以在我试图获得该物品的情况下......

css flexbox

回答 1 投票 0

谁能告诉我 WhatsApp 模式和官方应用程序有什么区别吗？

我有这个疑问，因为我想在这个利基市场上开设博客，并收集相关知识。我正在开发 WhatsApp Mod APK，但我对此并不了解。如果有人知道那是什么...

javascript css ios apk whatsapp

回答 1 投票 0

有没有办法使用行程破折号数组制作 svg 时钟

我一直在尝试重新创建这个时钟，但我一直坚持可以实现线之间的破折号的步骤。如果你有任何想法那就太好了。这就是我所完成的...

css reactjs svg svg-animate stroke-dasharray

回答 1 投票 0

将小文本放在输入字段的右侧

我打算有一个输入字段，在页面加载时禁用，直到单击输入字段旁边的小文本“编辑”以启用它。我一生都无法弄清楚如何

html css angular

回答 1 投票 0

如何配置 Jetty Server v12 来提供 CSS 和 Javascript 文件

这是我之前问题的后续问题如果我在 html 文件中这样配置，则 CSS 文件不会被加载。这是我之前的问题的后续问题如果我在 html 文件中这样配置，CSS 文件不会被加载。 <link rel="stylesheet" href="./main.css" type="text/css"> 或 <link rel="stylesheet" href="main.css" type="text/css"> 虽然 Edge 和 Chrome 根本没有显示任何错误，但 Firefox 显示此错误消息： The stylesheet http://localhost:8080/app/main.css was not loaded because its MIME type, “text/html”, is not “text/css”. 在处理程序中，这是如何设置响应标头的： response.setStatus(200); response.getHeaders().put(HttpHeader.CONTENT_TYPE, MimeTypes.Type.TEXT_HTML_UTF_8.toString()); Content.Sink.write(response, true, msg, callback); callback.succeeded(); return true; 我的问题是：如何配置 Jetty Server v12 来提供 CSS 和 Javascript 文件？提前致谢。您可以轻松设置 Jetty ResourceHandler 来从您想要的 url 路径和基本资源提供静态文件。简单来说，它看起来像这样...... String resourceRoot = // URI string to root of resources ResourceFactory resourceFactory = ResourceFactory.of(server); ResourceHandler handler = new ResourceHandler(); handler.setBaseResource(resourceFactory.newResource(resourcesRoot)); handler.setDirAllowed(true); handlers.addHandler(handler); resourceRoot 可以是文件系统、类加载器引用，或者通常是 java 支持的任何 URL。 ResourceHandler可以单独存在，也可以在ContextHandler下，甚至是处理程序包装器或选择处理程序的一部分（如PathMappingsHandler）。有关完整示例，请参阅 jetty-examples 项目。 Jetty 核心文件服务器使用 ResourceHandler - https://github.com/jetty/jetty-examples/tree/12.0.x/embedded/file-server Jetty EE10 Servlet 环境文件服务器使用 DefaultServlet - https://github.com/jetty/jetty-examples/tree/12.0.x/embedded/ee10-file-server Jetty 核心 PathMappingsHandler 与 ResourceHandler - https://github.com/jetty/jetty-examples/tree/12.0.x/embedded/path-mapping-handler

javascript css jetty embedded-jetty jetty-12

回答 1 投票 0

汉堡图标未显示

前几天还在工作，现在已经停止了，这是为了作业函数 myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.classN...

html css

回答 1 投票 0

使用单个函数按 ID 对多个表进行排序

我希望将 tableCompletion-Progress 与 timeSpentTable 一起包含在 sortTable() 函数中。如果我将 timeSpentTable 替换为 tableCompletion-Progress，它就可以工作。然而，我的目标是

javascript html css

回答 1 投票 0

Box 6 未对齐

* {边距：0；填充：0；框大小：边框框；} h2、h3、h4、h5、h6 {字体大小：18px;} h2、h3、h4、h5 {边框底部：1px 黑色虚线；} 主要{背景颜色：#fff;flex：1...