web前端开发

HTML/CSS

Web前端开发技术三个要素:HTML、CSS、JavaScript。随着时代的发展,前端开发技术更为丰富,而且Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通,又要与下游的服务器端工程师沟通,需要掌握的技能非常多。

  • HTML
  • CSS
  • HTML5
  • CSS3
  • JavaScript

HTML/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

    阅读全文
  • 如何制作CSS Loader?

    如何制作CSS Loader?

    当某个页面花了几秒钟来加载网页内容时,CSS加载器很有用。当用户不得不等待内容完全加载到网页上时。如果某个网页没有CSS的加载器,则加载时间用户会认为该网页根本没有响应。因此,将CSS加载程序放在网页上会使用户分心或等待几秒钟,直到页面完全加载为止。CSS可用于在网页上设置样式和添加动画以及其他视觉运动图形。以下代码说明了CSS下的动画演示。

    admin时间:2020-07-09

    阅读全文
  • 70+道CSS常见基础面试题(附答案)

    70+道CSS常见基础面试题(附答案)

    1 、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin
    低版本IE盒子模型:宽度=内容宽度(conten

    admin时间:2020-06-14

    阅读全文
  • 10个前端开发人员必须知道的CSS框架

    10个前端开发人员必须知道的CSS框架

    对于UI / UX设计人员而言,要制作一个在每个浏览器上都看起来不错的漂亮网站不是一件容易的事。在创建网站布局并使其美观时,开发人员必须考虑所有Web浏览器和移动视图。
    恐惧始终存在于内部,如果设计在某个愚蠢的浏览器上某个地方可怕地崩溃,该怎么办!多亏了 CSS使开发人员的生活变得无限轻松的框架。
    CSS框架消除了大部分麻烦,如今,开发人员无法想象没有CSS框架的代码。

    admin时间:2020-05-05

    阅读全文
  • 总结伪类与伪元素

    总结伪类与伪元素

    熟悉前端的人都会听过 css 的伪类与伪元素,然而大多数的人都会将这两者混淆。本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面总有一两个你没见过的吧。

    admin时间:2020-04-13

    阅读全文
  • CSS盒模型详解

    CSS盒模型详解

    CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了。很多博客里讲得也很模糊不清,于是,我在这里重新整理一下。
    可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。

    admin时间:2020-04-13

    阅读全文
  • 非常全面的一些常见 CSS 布局总结汇总

    非常全面的一些常见 CSS 布局总结汇总

    本文将介绍如下几种常见的布局:一、单列布局常见的单列布局有两种:header,content 和 footer 等宽的单列布局header 与 footer 等宽,content 略窄的单列布局1、如何实现对于第

    admin时间:2020-01-11

    阅读全文
  • 分享10个非常流行的CSS库

    分享10个非常流行的CSS库

    前端 CSS 库,可以帮助用户分担样式设计,从而显著提高原型制作速度;用户则可以凭借前端框架,更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择,本篇文章的主要内容就是关于那些目前最为流行且常用的框架。
    为什么要使用 CSS 库,而不选择自定义 CSS?简而言之,时间是一种宝贵的资源,我们不该把它浪费在样式的构建身上。从零开始构建 CSS 是否性能好、效果佳?答案当然是肯定的。
    但除非您是位身经百战的 CSS 视觉创意人士,否则把这项工作交给专家才是最好的选择。

    admin时间:2019-10-08

    阅读全文
  • 以轮播效果为案例谈如何写优质代码

    以轮播效果为案例谈如何写优质代码

    作为程序员大家在写代码时谈的最多的就是代码的拓展性、复用性。本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践。文章分三个步骤。第一步,实现基本功能;第二步,考虑到代码的封装性和复用性;第三步,考虑到代码的拓展性。

    admin时间:2019-09-29

    阅读全文