styling 相关问题

样式化是将可视元数据绑定到文档的过程

好的，所以我被赋予了重新创建此按钮的任务 https://s27.postimg.org/7e1upkf4j/BUTTONS.png 使用 HTML 的这一部分首页好的，所以我被赋予了重新创建此按钮的任务 https://s27.postimg.org/7e1upkf4j/BUTTONS.png 使用 HTML 的这一部分 <a href="#"> Home <i class="material-icons ico-style">home</i> </a> 我需要帮助，我对渐变以及部分是否应该是框阴影或插入边框等迷失了方向。请你解释一下答案这里是渐变部分的建议。您需要自己添加图标。 a { position: relative; display: inline-block; width: 120px; height: 50px; line-height: 50px; text-align: center; border-radius: 25px; border: 1px solid lightgray; background: linear-gradient(#999,#fff); text-decoration: none; } a::before { content: ''; position: absolute; left: 9px; top: 9px; width: 100px; height: 30px; border-radius: 15px; border: 1px solid gray; background: white; } a span { position: relative; } <a href="#"> <span>Home <i class="material-icons ico-style"></i></span> </a> 您可以使用此工具来设计按钮样式按钮生成器

html css button stylesheet styling

回答 2 投票 0

没有顺风断点

我正在构建一个简单的 div，我想要 px-5 用于移动屏幕，px-20 用于较大屏幕，但只有 px-5 可以工作，px-20 不能在大屏幕上工作，为什么？代码输出图像我正在构建一个简单的 div，我想要 px-5 用于移动屏幕，px-20 用于较大屏幕，但只有 px-5 可以工作，px-20 不能在大屏幕上工作，为什么？代码输出图像 <div class="bg-white py-20 px-5 lg:px-20 "> <div class="w-full md:w-1/2 mx-auto space-y-8"> <div class="bg-white py-20 rounded-xl shadow-lg p-6 flex flex-col items-center justify-between"> <div class="flex flex-col md:flex-row items-center justify-between w-full"> <div class="flex py-4 flex-col md:flex-row justify-start w-full h-full"> <div class="flex flex-col lg:ml-10 md:items-start"> <h2 class="text-xl md:text-4xl font-semibold mb-2 text-center md:text-left"> Lorem ipsum dolor sit </h2> <p class="text-gray-600 text-center md:text-left"> Porem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> </div> <div className="flex flex-col justify-center sm:justify-center lg:justify-end md:flex-row mt-4 md:mt-0 w-full "> <input type="text" placeholder="Enter email here" className="lg:w-96 sm:w-1/2 py-2 px-2 sm:px-10 border border-gray-300 rounded-sm focus:outline-none focus:border-indigo-500 transition duration-150 ease-in-out" // Adjust the width here, sm:w-1/2 means the input width will be half of the container on small screens and above /> <button className="mt-3 lg:w-1/3 sm:mt-0 flex items-center justify-center md:ml-4 text-white py-3 px-4 rounded-sm hover:bg-orange-700 focus:outline-none focus:bg-orange-700 transition duration-150 ease-in-out" style={{ backgroundColor: "#F68219" }} // Adjust the width here, sm:w-1/2 means the button width will be half of the container on small screens and above > Start E-Filling Now <img src="/arrow.svg" alt="" className="ml-2" /> </button> </div> </div> </div> </div> </div> 预期结果图我想要 px-20 在大屏幕上，如第二张图片所示如果你想要div的左右边距，请使用margin而不是padding。 <div class="bg-white py-20 mx-5 lg:mx-20">

css reactjs next.js tailwind-css styling

回答 1 投票 0

如何禁用子像素渲染或强制浏览器将属性舍入到最近的像素？

标题中所述我的问题是关于chrome的子像素渲染。有时您希望浏览器确定元素的正确高度或宽度，以便它占用所有可用空间。还有...

css frontend styling

回答 2 投票 0

开放人工智能合作伙伴关系很糟糕吗？

bootlicker 模组也是如此。享受你的反乌托邦吧，白痴。禁止我，我希望感觉真的很好

html css embed styling

回答 1 投票 0

Stylex 错误：向 stylex 样式添加变量不起作用

我正在为我的 Next.js 调查应用程序项目创建一个 stylex 设计系统。我想创建常量，以便能够使用 stylex.definevars 更改一处的值。当我这样做时，终端...

next.js error-handling styling stylexjs

回答 1 投票 0

带续行的赋值

当变量嵌套了几层、名称相当长并且被分配的值/表达式相当长时，为变量赋值的首选样式是什么？对于e...

python styling pep

回答 2 投票 0

Rider 打开文件时默认自动折叠文档注释

我正在 Rider 中处理一个项目，每当我打开任何文件时，它都会包含文档注释。默认情况下，这些评论是展开的，但我更喜欢在打开时自动折叠它们

c# ide jetbrains-ide styling rider

回答 1 投票 0

CSS 背景过滤器：锚标记的模糊（）在 Chrome 浏览器中不起作用

锚标记显示为具有透明背景和白色边框的按钮。我正在使用 .class 进行样式设置。背景属性在 Firefox 浏览器中有效，但在 Chrome 中无效，我也

html css google-chrome styling backdrop

回答 1 投票 0

将分隔元素与其周围的重复元素居中对齐

我需要创建一个像这样的部分：这是我已经尝试过的：我需要创建一个像这样的部分：这是我已经尝试过的： <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step" > <div class="content"> <div class="icon"> // ICON CONTENT </div> <h3 class="title"> // TITLE CONTENT </h3> <p class="description"> // DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div> 和CSS： .container { display: flex; justify-content: space-between; } .content { display: flex; flex-direction: column; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } ... 问题是分隔线看起来并不总是位于两个步骤元素之间的中心。有没有更好的方法来实现这个目标？我希望您使用 CSS-pseudo 元素和 CSS-selectors，具体来说，:not、first-child、last-child、before 和 after。您可以使用 :not 选择器获取不是第一个或最后一个的子元素，即它们之间的任何内容，然后在组件之前和之后添加行。请参阅此工作示例： .container { display: flex; justify-content: space-between; } .content { display: flex; align-items: center; text-align: center; } .step { display: flex; flex-direction: row; align-items: center; } .divider { background-color: #d9d9d9; border-radius: .2rem; height: 2px; width: 3rem; margin-top: 1.2rem; transform: translateY(-50%); margin: { left: $spacing--22; right: $spacing--22; } } .custom-class:not(:first-child):not(:last-child) { display: flex; align-items: center; justify-content: center; } .custom-class:not(:first-child):not(:last-child)::before { content: '—'; } .custom-class:not(:first-child):not(:last-child)::after { content: '—'; } <div class="container"> <div v-for="(step, index) in steps" :key="index" class="step"> <div class="content"> <div class="custom-class icon"> ICON CONTENT </div> <h3 class="custom-class title"> TITLE CONTENT </h3> <p class="custom-class description"> DESCRIPTION CONTENT </p> </div> <div v-if="index + 1 < steps.length" class="step-process__divider" /> </div> </div>

html css flexbox css-grid styling

回答 1 投票 0

MaterialUI TextField：更改背景颜色无法按预期工作

我正在尝试在我正在开发的应用程序中设置 TextField 组件的背景颜色，但是似乎当我添加 style={{background: "rgb(232, 241, 250)"}} 到该组件...

css reactjs material-ui styling css-in-js

回答 2 投票 0

动态更改 classList 时未应用样式

好吧，我使用 React 构建一个 Web 应用程序，我有一个名为 slice 的组件，其中包含两个项目组件，我想根据悬停事件更改它们的宽度。我知道

css reactjs react-hooks event-handling styling

回答 1 投票 0

我正在尝试使用 Material Ui 添加两个应用栏组件，我如何摆脱分隔两个应用栏的线

我正在尝试在 Material-UI 中添加两个 AppBar 组件，一个在另一个之上。但是，我遇到一个问题，即第一个 AppBar 的末尾、第二个 AppBar 的顶部出现一行。这是一个