小编Ed *_*cas的帖子

标题非常不言自明。

我正在单个 HTML 文件中创建一个网站，其中不同的页面只是根据函数div从display:none到。在其中一个页面中，我想使用光滑的滑块。不幸的是，第一次显示 div 时滑块无法正确加载。只有当我按下下一个/上一个按钮或调整浏览器大小时，它才会恢复活力。有什么办法可以解决这个问题吗？display:blockonclick

这是小提琴（抱歉，它的代码行可能比它需要的多）。相关的CSS在最后，相关的javascript也很好识别。

https://jsfiddle.net/Santos1600/9xv67aL8/

到达滑块的进度是：单击“Sonhar”下面的图像，打开汉堡菜单，单击“Epis\xc3\xb3dios”，使用上一个或下一个按钮查看它应该如何加载。这仍然是一项正在进行的工作......只是div带有灰色背景的随机 s。

我有一个包含 Vite、Tailwind CSS 和 postcss 的 VueJS 设置，并且希望使用文件中的变量定义不同的颜色，.env.name以便我可以根据代码部署的位置应用不同的颜色主题。

我尝试使用.env包含

VITE_COLOR="FF0000"

以及内的进口tailwind.config.js

VITE_COLOR="FF0000"

但是，我收到以下错误：

SyntaxError：无法在模块外部使用“import.meta”

我需要改变什么才能让它发挥作用，或者有更好的方法吗？

我正在学习CSS，我想在将鼠标悬停在某些文本上时，文本消失并且图像上淡入。我已经测试了一些东西，但它没有按照我想要的方式工作。

文本是 a 中的链接，在悬停时我设置了背景图像。我可以在 the 中使用 an，但我希望文本位于 the 的中间，并且它已经位于具有绝对位置的 a 中。

这是 HTML ：

<div class="header"> 
  <!--<ul>-->
  <div class="header_element">
    <a title="Home" href="page.php"> Home </a>
  </div>

还有CSS：

    div.header_element {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      height: 100%;
    }

    div.header_element:hover {
      background-position: center;
      background-image: url("hover.png");
      background-repeat: no-repeat; 
    }

如果有人能帮助我，我将不胜感激。

我尝试使用 NPX 创建一个 React 应用程序。一切都很顺利，但是当我运行时npm start，出现以下错误：

$ npm start
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\Administrateur.TEST\Desktop\reactProjects\package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\Administrateur.TEST\Desktop\reactProjects\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrateur.TEST\AppData\Roaming\npm-cache\_logs\2020-07-19T22_43_34_181Z-debug.log

我有以下带有 Slick carousel 的 React 应用程序。我创建了一个自定义 Next 按钮，需要执行该slickNext()方法才能继续下一张幻灯片。Slick carousel 文档和一些问题的答案提到了以下调用slickNext()方法的方式。

问题是我收到了错误 slider.slick is not a function。

这是我迄今为止尝试过的

gotoNext = () => {
    var slider = document.getElementsByClassName("sliderMain")[0];
    console.log("set", slider)
    slider.slick("slickNext");
}

const SampleNextArrow = (props) => {
        const { className, style } = props;
        return (
            <div
                className={className}
                onClick={this.gotoNext}
            />
           );
        }

    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        swipe: false,
        nextArrow: <SampleNextArrow className="customSlickNext" />,
    };

    <Slider
       id="sliderMain"
       {...settings} …

我遇到了 BetterDev 侧边栏，如果我们向其中添加内容，侧边栏也会滚动。有没有办法让侧边栏固定且不可滚动？我尝试了sticky，用top-0和left-0修正，但是没有用。

• 不存在内容时的图像
• 内容存在时的图像

    <div class="relative min-h-screen md:flex">
    
      <!-- mobile menu bar -->
      <div class="bg-gray-800 text-gray-100 flex justify-between md:hidden">
        <!-- logo -->
        <a href="#" class="block p-4 text-white font-bold">Better Dev</a>
    
        <!-- mobile menu button -->
        <button class="mobile-menu-button p-4 focus:outline-none focus:bg-gray-700">
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
        </button>
      </div>
    
      <!-- sidebar -->
      <div class="sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 …

我有一个父 div，里面有一个子图像元素。当我将鼠标悬停在父 div 上时，我希望子元素的 src 更改为不同的源。但我正在努力寻找一种方法来顺风做到这一点。

    <button className="flex flex-col items-center justify-center w-40 h-40 mx-12 transition ease-in-out rounded-full shrink-0 text-primary hover:text-white hover:bg-light">
        <div className="relative flex items-center justify-center w-20 h-20 mb-2">
            <Image src={icon} alt={`${title} icon`} />
        </div>
        <span className="text-xl text-center">{title}</span>
    </button>

悬停时图像应变成白色（不同来源）。如何使用 Tailwind 做到这一点？

我想更改占位符文本的位置，例如margin-left: 10px和padding-left: 4px in Tailwind CSS.

<input type="text" name="name" placeholder="\xe0\xa6\xaa\xe0\xa7\x81\xe0\xa6\xb0\xe0\xa6\xbe\xe0\xa6\xa4\xe0\xa6\xa8 \xe0\xa6\xaa\xe0\xa6\xbe\xe0\xa6\xb8\xe0\xa6\x93\xe0\xa6\xaf\xe0\xa6\xbc\xe0\xa6\xbe\xe0\xa6\xb0\xe0\xa7\x8d\xe0\xa6\xa1 \xe0\xa6\xa6\xe0\xa6\xbf\xe0\xa6\xa8"  className=" placeholder-gray-500 placeholder-py-4 bg-red-400  focus:outline-none border rounded-xl h-12 w-160" />\n

我正在尝试将 Tailwind.css 添加到 Vue.js 项目中。有很多关于如何执行此操作的资源，其中大多数都遵循与此视频相同的路径。为了确保我处于与视频中相同的条件，我使用vue-cli默认预设从头开始创建了一个 Vue 应用程序。在此步骤之后，我执行了以下操作：

• npm install tailwind.css
• 创造src/styles/tailwind.css
• 将以下内容添加到 css 文件中：

@tailwind base; 
@tailwind components;
@tailwind utilities;

• 调用在项目根目录npx tailwind init创建文件tailwind.config.js
• postcss.config.js在项目的根目录下创建，并将以下内容添加到该文件中：

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

• 将自定义颜色添加到tailwind.config.js文件中：

module.exports = {   
  theme: {
    colors: {
      "awesome-color": "#56b890",
    },
    extend: {},
  },   
  variants: {},   
  plugins: [], 
};

• 将一个简单<p>元素添加到HelloWorld.vue生成的组件中vue-cli
• 尝试使用Tailwind类来设计它的样式

最后，问题是：我可以应用一些类，例如bg-awesome-colorortext-xl并让它们正确渲染，但许多其他类将无法工作。

例如，删除这些类并尝试改为bg-black, bg-orange-500, …

在我的 NextJS 应用程序中，我使用<h1>文本标签并将其包装在 a 中，<div>但是当我尝试对文本应用颜色时，它不起作用。我什至添加了我的global.css但它引发了错误。

    <div className="mt-2 flex justify-start items-center text-2xl font-bold text-gray-300">
        <Image 
            src={Logo}
            width={40}
            height={40}
        />
        <h1>some text here</h1>
    </div>

上面的代码不会引发错误，但它也不会将样式应用于文本。

样式/global.css

    <div className="mt-2 flex justify-start items-center text-2xl font-bold text-gray-300">
        <Image 
            src={Logo}
            width={40}
            height={40}
        />
        <h1>some text here</h1>
    </div>

在基础层（上面）中应用样式会引发以下错误。

.../styles/globals.css 该类text-gray-300不存在。如果text-gray-300是自定义类，请确保它是在@layer指令中定义的。

tailwind.config.js

    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    @layer base{
        body{
            @apply bg-[#06202A] text-gray-300; 
        }
    }

postcss.config.js

@type {import('tailwindcss').Config} */
    module.exports = {
      mode: "jit", …

请看这里- 更具体地说是紫罗兰色背景中的推荐滑块。\n我正在使用 Slick 滑块来显示缩略图。一切似乎都工作正常，但是推荐具有不同长度的文本，这会影响容器的高度。

我希望容器始终具有相同的高度，这意味着它应该是最高推荐的高度。

这是我正在使用的代码：

  $(".quotes").slick({\n    arrows: false,\n    infinite: true,\n    autoplay: true,\n    autoplaySpeed: 2000,\n    speed: 1200,\n    slidesToShow: 1,\n    adaptiveHeight: false,\n  });\n

    .home-quote {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: 450px;\n      position: relative;\n      padding: 80px 12%;\n      .quote-block {\n        font: Italic 40px/60px "Libre Baskerville";\n        color: $bluedark;\n        position: relative;\n        .quote-text {\n          &::before {\n            content: "\xe2\x80\x9e";\n            position: absolute;\n            top: -116px;\n            left: -100px;\n            font: Bold 150px/65px "Libre Baskerville";\n            color: $violet;\n          }\n          &::after {\n            content: "\xe2\x80\x9e";\n            position: absolute;\n …

我在 faunadb 上创建了一个索引，按时间戳排序，以便首先获取最新的项目，并且我尝试一次检索 100 个项目。我的问题是，当我从结果中输入“after”参数时，我收到与初始查询相同的结果。

这是我创建的索引：

CreateIndex({
  name: "all_school_queries",
  source: Collection('<school_queries_reversed>'),
  values:   values: [
     {
       field: ["ts", {reverse: true}]
     },
     {
       field: ["ref"]
     }
  ]
})

这就是我查询数据库的方式：

    Map(
      Paginate(Match(Index("school_query_reverse")), {
        after: [ Ref(Collection("collection_name") ,'collection ref from first query')],
      }),
    
      Lambda(
        ['ts',"ref"], 
        Get(Var("ref"))
      ) 
    )

这是第一个结果：

{
  before: [Ref(Collection("collection_name"), "275484304279077376")],
  after: [
    1598907150720000,
    Ref(Collection("school_queries"), "12345"),
    Ref(Collection("school_queries"), "12345")
  ],
}

我已经使用了之后的时间戳1598907150720000和参考，12345。我首先尝试了控制台以确保可以获得正确的响应，但是在输入之后的任一结果后，我得到了相同的结果。

我正在从使用此模板的 FHIR 服务器检索 JSON 对象。它们看起来像这样：

  "resourceType": "Appointment",
  "id": "example",
  "text": {
    "status": "generated",
    "div": "\u003cdiv xmlns\u003d\"http://www.w3.org/1999/xhtml\"\u003eBrian MRI results discussion\u003c/div\u003e"
  },
  "status": "booked",
  "serviceCategory": [
    {
      "coding": [
        {
          "system": "http://example.org/service-category",
          "code": "gp",
          "display": "General Practice"
        }
      ]
    }
  ],
  "serviceType": [
    {
      "coding": [
        {
          "code": "52",
          "display": "General Discussion"
        }
      ]
    }
  ],
  "specialty": [
    {
      "coding": [
        {
          "system": "http://snomed.info/sct",
          "code": "394814009",
          "display": "General practice"
        }
      ]
    }
  ],
  "appointmentType": {
    "coding": [
      {
        "system": "http://terminology.hl7.org/CodeSystem/v2-0276", …