css 相关问题

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

UTF-8 文本从父框架中弹出

我对前端有点陌生。 最近,我使用基于 Next.js、tailwind 和 React 的模板创建了博客。 当我输入 UTF-8 文本(韩语)时,文本从移动设备上的父框架中弹出。 可以...

回答 1 投票 0

为什么我的字体粗细只是从正常和粗体切换而不是跟随数字?

我按照他们的网站说明将字体 Inter 实现到我的网站中:https://rsms.me/inter/download/ 用于网络使用。 但是,我注意到将字体粗细设置为 100、200、700...

回答 1 投票 0

透明颜色输入

是否可以使用内置选择透明颜色 我还没有找到一个滑块可以做到这一点。我需要检查一些额外的选项吗?

回答 4 投票 0

如何在nav中显示之前的WP自定义类?

我正在尝试使用CSS类表单菜单部分在WP导航中显示图标。 我正在使用以下代码来显示导航,但我不知道如何在 link_before 中调用此类 我正在尝试使用支持的 CSS 类表单菜单部分在 WP 导航中显示图标。 我使用以下代码来显示导航,但我不知道如何在 link_before 中调用此类 <?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary', 'depth' => 3, 'menu_class' => 'nav navbar-nav', 'link_before' => '<i class="wht_to_do_here"></i>', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> 提前致谢。 后端的 CSS 类用于 <li> 标签。所以首先我们需要从 <li> 中删除它。 要将其从 <li> 中删除,请将以下代码添加到主题的 functions.php 中: add_filter('nav_menu_css_class', 'remove_class_from_li',10, 2); function remove_class_from_li($class, $item){ $css_class = get_post_meta($item->ID, '_menu_item_classes', true); $class = array_diff($class,$css_class); return $class; } 现在我们需要修改它的锚标记以添加 <i> 标记到其中。因此,将以下代码添加到主题的 functions.php : add_filter('walker_nav_menu_start_el', 'add_class_before', 10, 4); function add_class_before($item_output, $item, $depth, $args){ $css_class = get_post_meta($item->ID, '_menu_item_classes', true); if(is_array($css_class)){ $class = implode(' ', $css_class); if($class){ $args->link_before = '<i class="'.$class.'"></i>'; } } $atts = array(); $atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : ''; $atts['target'] = ! empty( $item->target ) ? $item->target : ''; $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : ''; $atts['href'] = ! empty( $item->url ) ? $item->url : ''; $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth ); $attributes = ''; foreach ( $atts as $attr => $value ) { if ( ! empty( $value ) ) { $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); $attributes .= ' ' . $attr . '="' . $value . '"'; } } $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; return $item_output; } 由于我们已经修改了所有内容,您可能不需要在 link_before 函数中添加 wp_nav_menu 参数。所以你的wp_nav_menu现在看起来像: <?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary', 'depth' => 3, 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> 完成了:) 注意:您也可以通过制作自己的菜单步行器来实现。 注意:通过执行上述方法,它将应用于所有菜单,如果您不想将其应用于所有菜单,则可能需要添加菜单位置条件。 您可以通过使用 jQuery .addClass 方法或使用 css .nav::before{content: " 015"; 添加类font-family: 'FontAwesome';} 方法在你的 css 中添加这个类。

回答 2 投票 0

CSS悬停调整文本不透明度并没有达到预期效果,尽可能简化

我想创建一个 div,如果您将鼠标悬停在一侧,相反的文本就会消失。当悬停左侧文本时,它工作得很好,右侧文本按预期消失,但其他文本不起作用......

回答 1 投票 0

我似乎无法正确居中我的导航栏

我目前正在为我的个人网站创建一个导航栏,在使其在移动设备上看起来不错的过程中,我似乎无法将导航栏正确居中。无论我做什么它都会向右倾斜。如...

回答 1 投票 0

如何设置图像移动限制?

我正在制作一个像Google Map这样的地图网站。我找到了一种拖动图像(div)移动的方法。但我不希望它超出屏幕范围。一旦超过,白色背景就会出现。我要设置

回答 1 投票 0

使用破折号下划线命名类和 id 的 CSS 趋势?

我一直使用破折号作为 css 类和 ID 名称的分隔符: 。关于我们 .汽车定价指南 我见过网站使用多个下划线 __ .home__内容 另外,我还看到了 2 个破折号 .英雄--标题...

回答 3 投票 0

应用!对SVG填充属性很重要

我尝试将 !important 应用于 SVG 文件的 fill 属性,但似乎这里的语法是错误的,!important 未应用于 fill 属性,并且使用

回答 1 投票 0

如果我的父容器大小未知并且是动态的,如何在保持宽高比的同时调整图像大小

我正在制作一个图片库。在开发使图像达到浏览器窗口完整大小的功能时,我意识到我无法专门设置父元素的大小...

回答 1 投票 0

理解 CSS 单元“rem”[重复]

我在学习 CSS 时,我必须在 div 内排列文本,并且必须将字体大小设置为 0.85rem。正常使用 font-size 和使用 ... 有什么区别

css
回答 1 投票 0

如何在输入文本框内放置“复制到剪贴板”图标?

我正在设计一个密码生成器,但在尝试将“复制到剪贴板”图标放置在将生成密码的输入文本框中时遇到问题。 我尝试放置

回答 1 投票 0

通过css设置打印机纸张尺寸

我的打印机默认尺寸是A4,我需要使用旧的针式打印机打印尺寸为8.5英寸x5.5英寸的工资单。 我尝试将每个工资单 DIV 设置为固定高度, 宽度:175.6mm; 高度:123.7毫米; ...

回答 6 投票 0

我如何让这个 javascript 部分工作

我正在使用 html、Javascript 和 CSS 创建一个模拟网站。我想通过按导航栏上的“电视节目”列表从一个页面移动到另一页面(home.html 到 TVShows.html)。通常我只是

回答 1 投票 0

css3动画中的虚线边框动画

我看到了这篇文章http://tympanus.net/Tutorials/BorderAnimationSVG/ 我想将其添加到我的 WP 博客中。这样每个新的 post div 的边框上都有这个动画。但问题是它是 SVG 格式的。是

回答 7 投票 0

MUI DatePicker 6.19.7 使用 sx 更改所选日期的背景颜色

如何改变箭头所指的颜色元素?使用 sx{} 日期选择器 如何改变箭头所指的颜色元素?使用 sx{} <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} slotProps={{ day: { sx: { backgroundColor: "red", }, }, }} /> </LocalizationProvider> 添加 sx: { "&.Mui-selected": { backgroundColor: "red", }, 有效,但只有当我点击某个地方,颜色才会改变...... 尝试使用 sx{} 但不知道如何在该元素上执行此操作。我的实现改变了所有日子的颜色,但没有改变选定的颜色。 您还需要定位根选择器类来更改所选日期的背景颜色。 试试这个class: slotProps={{ day: { sx: { '&.MuiPickersDay-root.Mui-selected': { bgcolor: 'red', }, }, }, }}

回答 1 投票 0

如何删除网页的上边距?

我创建的每个网页都遇到过这个问题。我用来将内容放置在页面中心的“主容器”div 上方始终有一个上边距。我正在使用 css 样式...

回答 18 投票 0

如何创建 CSS 阴影,将透明度应用于其后面的元素

我试图让一个元素将阴影/模糊边缘投射到其后面的元素上,导致后者“溶解”,而不影响背景。希望下面的图片...

回答 1 投票 0

:父级有多个类名

使用 React 与渲染以下结构的组件: 使用 React 与渲染以下结构的组件: <div class="top-layout horizontal"> <section class="first"></section> <section class="second"></section> <section class="third"></section> </div> 每个元素都是它们自己的组件,并且具有唯一的类名。当父元素添加 horizontal 类名时,我想更新部分元素 first 的显示方式。鉴于当前的 CSS 设置,我必须处理我无法简单地做 .top-layout.horizontal > .first { background-color: blue; } 我尝试从这里实现解决方案有CSS父选择器吗?但它似乎不起作用。 有人发现选择器的设置有什么问题吗? .top-layout { background-color: green; &.horizonal { background-color: yellow; } } .first { background-color: red; } .first:has(> .horizonal) { background-color: blue; } 你搞反了: .horizontal:has(> .first) { background-color: blue; } 您想要做的是选择 .first 的父级,对吗?所以你需要说“选择.horizontal,它是first的父级”或“其中.horizontal里面有.first”。因此,它选择父级。

回答 1 投票 0

通过 JQuery 取消选中单选按钮

我有一个问题应用程序...每个问题有 4 个选项... 在每个问题中选择一个选项时,我需要取消选中其他选项... 请帮帮我,我没有时间... 这个脚本改变了所有问题...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.