• CSS网格-高亮显示悬停的单元格

    在网格中,我要突出显示一组单元格-矩形-从左上角的单元格一直到鼠标位置下的单元格。 假设我们的网格最初看起来像这样: .grid { display: grid; grid-template-columns: repeat(5, 50px); grid-template-rows: repeat(5, 50px); gap: 5px; } .grid-item { display: flex; justify-content: center; align-items: ce...
  • 在文字悬停时显示图像

    For reference, the website I'm working on is https://truecolor.blog I'm trying to have featured images appear as the mouse hovers over the blog title, similar to this website and also this one. The website I'm working on is built on blot.im (documentation ...
  • 20个让你效率更高的CSS代码技巧

    有一些是面向css初学者的,有一些知识点是进阶型的。这个问题可以通过CSS object-fit属性解决,到目前为止除了IE浏览器其他的浏览器都可以使用object-fit。这里有一个快速的方法来删除所有的双倍边框:border-collapse: collapse,只需设置这个属性后,表格的边框看起来就顺眼多了:7、更友好的注释CSS也许不是一种编程语言,但其代码仍然需要文档化。添加一些简单的注释可以将代码分类区分,方便自己和同事后期维护。
  • 更改屏幕尺寸和所有尺寸时,如何使我的Web应用程序具有更高的响应速度?

    我当时正在使用网络语音API开发用于SpeechRecognition的应用程序。我几乎完成了所有工作,但希望使页面的响应速度更快,以及页面更改大小时,页面上显示的项目不会移动。 每当我更改屏幕尺寸时,文本框中的麦克风都会移动,并且不再位于正确的位置。由于我不是最精通样式设计,所以我真的无法理解如何解决此问题。如果有人可以帮助我,请为我的HTML,CSS和JS文件附加代码。 让我知道。 <html> <head> <title>Search with Speech</title> <link h...
  • 如何合并两个css文件,以便一个在后台,一个在前面

    我正在尝试使背景移动,并且我从github上选择了动画背景,但是问题是我不知道将动画背景的css部分放到我当前的css文件中的位置,以便它位于所有内容的后面。我的css文件用于多项选择测试,以帮助孩子们了解免疫系统,我想使背景看起来漂亮而不是暗淡的颜色,我可以找出正确和错误的色相。 这是我的css文件 *, *::before, *::after { box-sizing: border-box; font-family: cursive, 'Times New Roman', Ti...
  • Javascript:根据元素的类显示/隐藏元素

    我正在建立的网站上包含双语功能。研究一下我使用显示/隐藏方法所做的选择,因为我知道,与切换字符串相比,这对于SEO更好。由于我仍在学习中,我现在也想坚持使用javascript。我已经在StackOverflow中浏览了几篇文章,但是到目前为止还没有找到解决方案。 The below approach works with a simple test file I have created, but once I try to implement it on the website it shows bot...
  • 悬停不会覆盖整个文本

    我试图使悬停一直延伸到子菜单的两侧。我试图重写一堆元素无济于事。我还使用了chrome开发人员工具来尝试找出问题所在。使用chrome dev工具后,似乎悬停问题没有覆盖整个文本,问题在于nav ul li a {中的填充。我试图更改填充和边距,但没有成功。在过去的一年中,我才刚刚开始编写代码,在这里我完全感到茫然。 <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8...
  • 当我使用flexbox“环绕”时,一个块向右移动

    我遇到了麻烦,我有三张卡,我需要它们在页面的中央,并且块必须具有相同的缩进。我决定使用flexbox。而我在这里,第三个在右侧,并且我滚动了: 这是这些块的html代码和CSS,有人可以告诉我我做错了什么吗? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <l...
  • 如何将按钮对准容器底部的中心?

    这是我的代码,我想将“提交”按钮对准底部中心,我试图更改其位置,容器的显示和底部本身,是否有解决方案? PS:如果我把它放在那会更好,当调整屏幕大小时,按钮将跳到下一行到想要的位置(底部中心)。谢谢 #datails_container { position: relative; display: flex; background-color: darkgrey; width: 70%; border-radius: 5px; top: 50px; ...
  • 页眉/要粘贴到页面顶部的部分

    我无法使标题部分停留在页面顶部, 不管我尝试什么! 码: 的HTML: <section class="zpa-container zp ba-25443645"> <div class="js-cluster zpa-cluster-padding-none cluster-padding-large zp cac-25443645"> <div class="flex-row middle-sm zpa-mobile-navigation-wrapper"> <div class="xs-12 sm-2...
  • 使用CSS将项目放置在容器底部

    我想做的是能够将底部h1放置在其所在的h2框的底部。我使用了底部:0;但是它要移到屏幕的底部,而不是我要放置在屏幕的h2框中。之所以问,是因为我已经寻找了一些方法,我只能看到人们在使用底部0: ;但我不知道我做错了什么还是什么。这是我的代码。抱歉,这是一个愚蠢的问题。 * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } body { height: 1000p...
  • CSS背景图层错误

    我正在尝试在我现有的“ box-list” div上实现从Codepen中获取的按钮。 但是在我的表单中,按钮获得了git Fathers背景,而我无法按原样执行我原来的按钮蓝色背景。 在页面底部,您可以看到“框列表”外部的按钮外观。 html文件: <link rel="stylesheet" type="text/css" href="style.css"> <div class="box-list"> <!-- FREE TEXT BOX --> <div class="box...
  • 自定义垫选择下拉菜单以允许嵌套值成角度

    我正在自定义角度材质选择/自动完成以允许嵌套下拉列表。 在这里,我想让一个父母带很多孩子。如果我展开特定的父级下拉菜单,则只有该下拉菜单的子级才能展开或折叠。同样,应在同一情况下选择复选框事件。 在这里,当我选择下拉菜单时,我得到了[object object]。 提供控制台日志以提供选定/未选定的值。 有人可以帮忙吗? STACKBLITZ <mat-form-field appearance="fill"> <mat-label>Toppings</mat-label> <i...
  • 如何确保CSS样式正确应用于从数组映射的项目

    我正在建立一个对我的个人档案有反应的项目。差不多完成了,但是我遇到了一些挑战。我将一些产品映射到一个数组中,以映射到要在屏幕上显示的项目。但是,我应用于代码的CSS样式并没有得到统一应用。 I have uploaded the website on GitHub and it can be viewed through https://chinomso1995.github.io/dodosPizza/. The problem appears on the mobile view. In all sec...
  • 引导程序4:左侧的Flexbox图像,右侧的文本

    我正在尝试通过列或flexbox在以下引导中实现此图像: 基本上,左边必须有965 x 678px的图像,而右边则有浮动的文本,如果您检查下面的小提琴,它将不能正常工作。 我尝试使用Flexbox,但无法正常工作。 这是我的HTML: <section id="golf"> <div class="container"> <div class="d-flex justify-content-start"> <d...
  • 反应功能<br>在此<p>中不起作用

    我已经搜索过并且尝试了很多,但是在这里找到新行无济于事。 这是React函数 我猜真的是基本问题,因为我对此很陌生,但请提出建议。 有人建议这样做: .new-line { white-space: pre-line; } 在CSS中,但这也不起作用。这可以与使用js文件扩展名有关吗? import React from "react"; import Badge from "../elements/Badge"; import Resume from "../../resume.json"; fu...
公告

欢迎访问 goshare  点击这里设置您的邮箱  可以接收站内跟帖、回复邮件提醒,不错过任何一条消息。

关注公众号订阅更多技术干货! 码农俱乐部