小编Pau*_*e_D的帖子

我试图在通过 ID 调用包含时自动打开一个元素，例如：http://www.example.com/page.html#container。理想情况下，我希望它滚动到页面所在的位置（在摘要元素内），然后打开详细信息元素。显然，本机滚动功能工作正常，但如何将 details 元素设置为打开？

这是我的 HTML 源代码：

<details class="concentration">
   <summary>
        <h4 id="sample-slug"><?php the_sub_field('emphasis_name'); ?></h4>
    </summary>

    <p><?php the_sub_field('emphasis_description'); ?></p>

    <div class="courses"><?php the_sub_field('emphasis_course_list'); ?></div>
</details>

当 example.com/page.html#sample-slug 被调用时，如何让 details 元素意识到这一点并添加“open”属性？我想确保在调用锚点时内容可见。

I\xe2\x80\x99m 试图实现一个非常具体的网格来展示一些项目。这个想法是创建一个重复循环，其中第一个、第二个、第三个、第四个和第五个项目具有不同的样式（并且样式随后重复）。

例如：第一个红色背景/第二个蓝色背景/第三个绿色背景/第四个黄色背景/第五个黑色背景，并循环项目数量（可能是5个或28个）。因此，您将拥有：#1红色/#2蓝色/#3绿色/#4黄色/#5黑色/#6红色/#7蓝色/#8绿色/#9黄色等

我想使用纯 CSS 来创建这个循环。我使用 webflow，因此内容在列表中一一填充，我需要根据列表中的位置调整基本样式。

到目前为止我尝试过使用 nth-child ，如下所示：

.collection-list:nth-child(2n) .collection-item {}\r\n.collection-list:nth-child(3n) .collection-item {}\r\n.collection-list:nth-child(4n) .collection-item {}\r\n.collection-list:nth-child(5n) .collection-item {}

\n\n

它适用于前 5 个项目\xe2\x80\xa6，但是\xe2\x80\xa6\n我的问题是，它\xe2\x80\x99t 似乎完全作为循环工作\xe2\x80\xa6，我想它\xe2\x80\x99s 因为 2n 和 3n 有时会发生冲突（例如当你有 2*3 时）。我可以 \xe2\x80\x99t 对 nth-child 使用奇数和偶数，因为这个想法是让它仅在 5 个项目 \xe2\x80\xa6 之后循环

有人对此有什么绝妙的想法吗？仅仅使用 CSS 就可以实现吗？

谢谢！

我创建了一个 flex-box 容器，其中包含更多图像和一个 div 段落。一旦我启用使用“flex-wrap:wrap;”包装 in css，段落中的文本就不再换行，导致框断行并出现在下一个中。附上相关的 css 代码和正文本身。

.itembox {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  flex-grow: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  /*flex-shrink:0;*/
  /*flex: 1 1 0;*/
  /*justify-content: space-between;*/
  /*flex-basis:100px;*/
  /*flex-wrap:wrap;*/
}

<div class="itembox">
  <div class="aritem">
    <p>
      <img src="img/digital media 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">social media management</p>
    <div class="aritemtext">
      <p class="article">
        <!--managing your presence on various social media platforms so your followers always get the latest updates.-->
        manage your presence and content on social media …

我的 HTML 代码中有三个元素。我想将元素固定在右侧，而不将其从文档流中删除。

<div class="container">
   <header class="main-header">
   </header>
   <main class="main-content">
   </main>
   <footer class="main-footer">
   </footer>
</div>

这是我正在使用的CSS代码

.container {
   display: grid;
   grid-template-columns: 1fr 3fr;
   grid-template-rows: auto auto;
}
.main-header{
   grid-column: 1/2;
   grid-row: 1/3;
   /* Here i want this to be fixed (scrolling should not have any effect)*/
   position: fixed;
  }

位置固定将其从文档流中删除，一切看起来都很丑陋。谁能告诉我如何在不使用position:fixed;的情况下实现这一目标？或者不将其从文档流中删除。

我正在尝试更多地使用网格，但我不能\xe2\x80\x99t 弄清楚什么应该是一个简单的问题。如何将所有元素放在一行中？

也就是说，我想模拟flex单行的布局。

我知道我可以在下面的示例中使用grid-template-columns: 1fr 1fr 1fr 1fr;，但我不想设置特定的列数。

div#flex {\r\n  display: flex;\r\n  flex-direction: row; /* I know that\xe2\x80\x99s not necessary */\r\n}\r\ndiv#flex>button {\r\n  flex: 1;\r\n}\r\n\r\ndiv#grid {\r\n  display: grid;\r\n  grid-template-rows: 1fr;\r\n}\r\ndiv#grid>button {\r\n\r\n}

<div id="flex">\r\n  <button>One</button>\r\n  <button>Two</button>\r\n  <button>Three</button>\r\n  <button>Four</button>\r\n</div>\r\n\r\n<div id="grid">\r\n  <button>One</button>\r\n  <button>Two</button>\r\n  <button>Three</button>\r\n  <button>Four</button>\r\n</div>

\n

我有一个为朋友开发的网站，只是为了好玩，但我在使用 CSS 时遇到了问题。我遵循了https://www.fireship.io中有关主题更改的教程。我的问题是，当我单击 safari 上的主题时，我的下拉菜单不会很好...下拉菜单。（ps.它在任何其他浏览器上都可以正常工作）

// DOM Elements

const darkButton = document.getElementById("dark");
const lightButton = document.getElementById("light");
const solarButton = document.getElementById("solar");
const body = document.body;

// Apply the cached theme on reload

const theme = localStorage.getItem("theme");
const isSolar = localStorage.getItem("isSolar");

if (theme) {
    body.classList.add(theme);
    isSolar && body.classList.add("solar");
}

// Button Event Handlers

darkButton.onclick = () => {
    body.classList.replace("light", "dark");
    localStorage.setItem("theme", "dark");
};

lightButton.onclick = () => {
    body.classList.replace("dark", "light");

    localStorage.setItem("theme", "light");
};

solarButton.onclick = () => {
    if (body.classList.contains("solar")) …

我正在尝试为我的网站设置悬停缩放功能,但是,我已经看到了其他示例,我的代码似乎是相同的,但图像的尺寸并不相同.任何想法可能是什么问题？

.imgBox {
  display: inline-block;
  overflow: hidden !important;
  transition: .3s ease-in-out
}

  .imgBox {
    display: inline-block;
    overflow: hidden !important;
    transition: .3s ease-in-out
  }
  .imgBox:hover {
    opacity: 0.6;
    filter: alpha(opacity=30);
    transform: scale(1.3);
  }

<div class="large-3 medium-6 small-12 columns">
  <h2>Heading 1</h2>
  <img class="imgBox" src="http://techmadeplain.com/img/2014/300x200.png" />
  <p>Paragraph here</p>
</div>

的jsfiddle

我面临 BOLDWEIGHT_BOLD 无法解析或不是字段，SOLID_FOREGROUND 无法解析或不是字段。

我原来的 Generic.java 文件：

package com.expertus.libraries;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
import java.util.GregorianCalendar;
import java.util.HashMap;
import java.util.Set;

//import org.apache.commons.io.FileUtils;
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.CellStyle;
import org.apache.poi.ss.usermodel.Font;
import org.apache.poi.ss.usermodel.IndexedColors;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.ss.usermodel.WorkbookFactory;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.apache.poi.ss.usermodel.FillPatternType;
import org.apache.poi.ss.usermodel.*;

public class Generic {
    public static int getRowCount(String xlPath, String sheetName) {
        try {
            FileInputStream fis = new FileInputStream(xlPath);
            Workbook wb …

我用div制作了一张桌子,我希望每隔一行都有不同的颜色.但每列都有不同的颜色.问题是什么？

.mTable {
  display: table;
  width: auto;
  background-color: #eee;
  border: 1px solid #666666;
}

.mTableRow {
  display: table-row;
  width: auto;
  clear: both;
}

.mTableHeading {
  display: table-header-group;
  background-color: #ddd;
  height: auto;
  color: black;
  text-align: center;
  border-bottom: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

.mTableCell,
.mTableHead {
  display: table-cell;
  padding: 5px;
  border: 1px solid #999999;
  text-align: center;
  color: black;
  border-bottom: 1px solid #000000;
  width: 200px;
  background-color: #ccc;
}

.mTableRow>div:nth-child(even) {
  background: blue;
}

<div class="mTable">
  <div class="mTableRow">
    <div class="mTableHead">ID</div>
    <div …

作为主要使用英式英语的人，CSS 不接受colour作为有效属性的事实是相当令人厌烦的，尤其是当它接受grey（及其偏差）作为有效值时。为什么 CSS 允许在值中使用英式英语，而不是在属性中使用？

根据W3 ​​CSS颜色规范，CSS值的官方color拼写是gray：

然而，它也可以很好地接受grey（及其偏差）：

.gray {
  color: gray;
}

.grey {
  color: grey;
}

<span class="gray">gray</span>
<span class="grey">grey</span>

这也是有道理的，因为X11 颜色名称（CSS Colors Level 3改编自）将grey拼写列为有效的替代项。

但为什么 CSS Colors Level 3 不允许colour作为属性呢？

.color {
  color: red;
}

.colour {
  colour: red;
}

<span class="color">color</span>
<span class="colour">colour</span>

规范的创建者允许替代值而不是属性是否有特定的原因？