问题标签 [pure-css]

我一直在网站上制作标签菜单。非常简单的功能：每个选项卡都包含图像，并且仅在单击右侧选项卡时才会出现。这是针对我正在学习的在线课程的，我们应该只使用 css 来完成。我遇到的问题是我无法默认显示第一个选项卡，如果我这样做它不会消失（css不会覆盖显示：块），如果它默认隐藏，我不尊重课程要求。

我是这样做的：

CSS

并在 HTML

我只包括了两个标签和图像，但你明白了（不希望这有 5 页长）

无论如何，#tous 选项卡应该是默认显示的，在用户单击任何内容之前，我就是想不通。

正如我所说，我只需要在 CSS 中执行此操作，我知道 JS 和 jQuery 会为我轻松解决此问题（我很乐意这样做）。

我需要像这样自定义我的 HTML5 音频控件：

任何人都可以解决我的问题吗？

这是我到目前为止所拥有的：

通常当我构建一个网页时，我会包含一些库，比如来自 CDN 的引导程序。现在我想要一个节点环境中的离线网页（实际上我正在使用电子......但同样的东西）。我选择Pure作为我的框架。

所以我安装了电子的节点项目，现在我

npm install purecss --save

安装purecss到node_modules. 它说用于require('yahoocss')加载文件，但我应该如何在我的 HTML 页面上提供构建文件（pure.min.css）？

我的意思是..我是否放置了指向 node_modules 的样式表链接？这似乎..错了。

我是 Keith Clark 的纯 CSS 视差技术的忠实粉丝，并且在我自己的一个网站上使用它并取得了一些成功。然而，最近我注意到，即使在他自己的演示中，背景视差元素也不会紧靠屏幕左侧，而是留有间隙，其大小取决于它们在 3D 空间中渲染的距离。

据我所知，罪魁祸首是滚动条。这个滚动条应该在那里（在父视差 div 内），但它会在父容器（渲染 3d 空间的地方）的大小和容器的视差子容器的大小之间产生差异，从而为那个差距。我在最新版本的 Chrome、Firefox 和 Safari 中看到了它（尽管我可以发誓我甚至一年前都没有看到它）。

这可以通过width: 100vw对每个视差组或层应用规则来解决。但是，虽然这消除了差距，但它会使元素与视图的默认中心不对齐（因此对于没有100vw应用规则的任何元素）。我还想要一个尽可能遵循“纯 CSS”原则的解决方案。

取自 Keith Clark 示例的 HTML：

CSS：

我想让用户选择一个单选按钮来使用纯 CSS 显示一个文本字段。我设计了单选按钮的样式，但我无法让它们工作。我确信它可以完成，我想我只是没有正确输入 CSS。有人可以告诉我我需要解决什么吗？

我的CSS如下：

这最后一点CSS代码主要是我认为我不正确的地方。

在构建模式时，我很难理解为什么文章标签必须嵌套在这个 div 标签中才能打开模式。如果有人能解释为什么这是必要的，并且可能没有解决方案，我将不胜感激！

--CSS

我想使用像 Pure CSS 这样的轻量级 CSS 框架，但也想将它的使用与像 Figma 这样的用户友好的设计工具结合起来。我如何使用 Figma 或任何其他工具来做到这一点？

这是我从Purecss 文档中复制的当前菜单，效果很好：

我现在正在尝试将下拉/子菜单项置于父菜单下的中心（在这种情况下Contact）。我正在寻找一种无论父菜单长度如何都有效的解决方案。请注意，我指的pure-menu-children是父级下类的位置，而不是text-align子菜单项的位置。我已经尝试过了，但没有运气：

希望它很清楚，并提前感谢您的帮助。

我正在使用烧瓶构建一个网络应用程序。我发现我一遍又一遍地重复着同样的事情，对我的每个 HTML 页面都做了一个小的编辑，所以我想把它变成一个模板。如何使其成为动态模板？下面是我用于我的ABOUTUS页面的代码，它与我的CONTACT页面只有一行不同 。

关于我们 页眉：

联系页面标题：

唯一的变化是我menu-item-divided pure-menu-selected根据我正在加载的模板将行从一行移动到另一行。我想不出一种动态执行此操作的方法，以便我可以将其转换为可以为每个文件扩展的模板。

我想使用纯 CSS 设计上面的图像。

到目前为止，我只能在没有编辑图标的情况下进行设计。

以下是我到目前为止提出的 HTML 和 CSS：

我只需要右上角编辑图标的 HTML 和 CSS 代码。