web前端开发

CSS

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。它与HTML,JavaScript构成了web前端开发技术的三要素。

  • HTML
  • CSS
  • HTML5
  • CSS3
  • JavaScript

CSS

  • 10个让你受益匪浅的css使用技巧

    10个让你受益匪浅的css使用技巧

    在Safari浏览器下(此Safari浏览器包括iOS的Safari,iPhone上的微信浏览器,以及Mac OS X系统的Safari浏览器),当我们使用3D transform变换的时候,如果祖先元素没有overflow:hidden/scroll/auto等限制,则会直接忽略自身和其他元素的z-index层叠顺序设置,而直接使用真实世界的3D视角进行渲染。

    admin时间:2020-12-21

    阅读全文
  • 12个CSS常用技巧

    12个CSS常用技巧

    常见发生场景:假如我们需要通过 input,type="file"来上传文件,而这个 input 的默认样式,可以说是非常地丑。所以我们希望通过一张图片,与这个 input 大小一样,位置一致地盖在上面。这个时候,显然,这个时候点击图片,input 是不会起作用的。就是因为 img 隔绝了 click 的穿透,而我们希望的是,这个 img 只是视觉上遮挡了 input 的样式,但是点击的时候还是点击到 input。

    admin时间:2020-12-21

    阅读全文
  • 20个最佳 ICON 库

    20个最佳 ICON 库

    在应用界面中图标的存在,会给用户一个良好第一印象,这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它们增加了可读性,突出了重要的内容,加强了功能或特性,增强了设计。因此,使用现成图标是很好的一个选择。

    admin时间:2020-09-11

    阅读全文
  • CSS三大特性:层叠 继承 优先级

    CSS三大特性:层叠 继承 优先级

    如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则

    admin时间:2020-07-16

    阅读全文
  • 20个让你效率更高的CSS代码技巧

    20个让你效率更高的CSS代码技巧

    在本文中,我们想与您分享一个由各大css网站总结推荐的20个有用的规则和实践经验集合。有一些是面向css初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。

    admin时间:2020-07-16

    阅读全文
  • 如何使用CSS创建雕刻文字效果?

    如何使用CSS创建雕刻文字效果?

    雕刻的文字效果也称为浮雕效果,因为它看起来好像文字已经浮雕在背景上。它在CSS中也称为Neumorphism。当我们想给我们的网站一个干净清新的外观时,可以使用这种效果。嵌入的文本可以与背景具有相同的颜色,也可以具有不同的颜色。我们将研究相同的颜色类型。

    方法:该方法是首先通过为文本提供与背景相同的颜色来使其不可见,然后为文本添加细阴影,以使该文本由于边框阴影而可见。

    HTML代码:在本节中,我们创建了两个div和一个包装在嵌套div中的文本。您也可以使用h1代替嵌套的div标签。

    admin时间:2020-07-09

    阅读全文
  • 如何使用CSS创建转盘效果?

    如何使用CSS创建转盘效果?

    旋转圆盘效果也称为重叠圆盘效果,是一种幻觉效果,可以在网站上用于各种目的。它可以用于从装填器标签到给用户造成幻觉的任何事情。之所以称其为重叠光盘,是因为有许多重叠的光盘围绕一个点旋转。

    方法:方法是先创建所有光盘,然后使用关键帧和第n个子属性旋转它们。

    HTML代码:在本节中,我们创建了一个无序列表(ul),其中包含list-items(li)。列表项的数量等于光盘的数量。

    admin时间:2020-07-09

    阅读全文
  • 如何使用CSS创建灰度效果?

    如何使用CSS创建灰度效果?

    灰度是一种提供从彩色图像到黑白图像或反之亦然的过渡效果的效果。该效果可以应用于各种事件,例如鼠标悬停,也可以使用按钮激活该效果。

    方法:我们将使用内置的CSS函数Grayscale()来创建此效果。

    示例1:首先让我们看一下彩色图像到单色图像的过渡。为此,我们将在悬停选择器中使用grayscale()函数。我们只是将鼠标悬停时将灰度值设置为100%。

    admin时间:2020-07-09

    阅读全文
  • 如何使用CSS创建浮雕文字效果?

    如何使用CSS创建浮雕文字效果?

    可以使用HTML和CSS轻松生成浮雕文字效果。我们将使用CSS text-shadow属性获取所需的输出。

    HTML代码:在本节中,我们将创建包含文本或标题的正文的基本结构。

    admin时间:2020-07-09

    阅读全文
  • 使用HTML和CSS创建3D文字效果

    使用HTML和CSS创建3D文字效果

    3D文字效果是网页设计领域中最常用的文字效果之一。作为设计师或前端开发人员,应该知道如何创建3D文字效果。今天,我们将研究一种最简单易用的方法来以3D外观创建文本。
    方法: 3D文本动画效果是通过text-shadow属性设计的。应用多个文本阴影的原因是使3D外观看起来好像我们仅应用单个(或单一)文本阴影,对于单词中存在的所有字母来说,它都是相同的。但是对于3D效果,我们希望每个字母和每个角度(基本上是X和Y坐标以及模糊半径)的阴影厚度都不同。现在让我们看一下上述方法的实现。

    admin时间:2020-07-09

    阅读全文
  • 使用HTML和CSS创建发光的文本阴影

    使用HTML和CSS创建发光的文本阴影

    要创建发光的文本阴影,我们将使用HTML创建结构和CSS以用于文本样式。借助CSS,我们可以在文本上添加阴影。

    HTML代码: 在本节中,我们将设计代码的基本结构。

    admin时间:2020-07-09

    阅读全文