• Flexbox vs Grid:基本概念

    Web布局中最为优秀的两种布局方式:Flexbox布局和CSS Grid布局。有关于这两方面的知识,其实在W3cplus上已经有很多相关的内容。由于这两种布局方式对Web布局带来了很多改变,而且两者都有其自身的优势。

    2018-11-09 91 0 0
  • CSS Grid带来的新单位:分数单位fr

    CSS Grid经过这么多年的发展已经越来越受人青眯了,到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习,对CSS Grid的特性也是略有所知,但还未达到完全的融汇贯通。

    2018-11-08 156 1 0
  • 给Web页面提供正确图像的姿势

    在《探索Web上图片使用方式》一文中介绍了Web上图片的各种使用方式,从引入图片、图片效果处理、图片适配、图片加载以及图片优化几个方面介绍Web的图片使用方式。其中有一个值得我们去探讨的话题,那就是如何根据用户的设备为其提供正确的图片。那在这篇文章中我们就一起来聊聊这方面的技术。

    2018-11-06 53 0 0
  • 图解CSS:揭开CSS的面纱

    如果您对前端方面有所关注,那么对CSS一定不会陌生,你也肯定听说过一些CSS的新特性。在使用CSS新特性之前,你应该对这个新一代样式表语言的来龙去脉有个基本了解。在本章节中,你将知道一个CSS属性的制定将会经历哪些过程,为什么会有浏览器的私有前缀以及如何更好的处理这些私有前缀,在文章最后简单的介绍了开发人员如何对CSS新特性做一些渐进增强,优雅降级的处理,给你的用户有一个更好的,更佳的体验。

    2018-11-05 42 1 0
  • 再聊CSS的属性选择器

    属性选择器是很强大很神奇的。很多时候可以帮助你摆脱一些棘手的问题,可以让你避免类名的添加,甚至还可以指出代码中的一些问题。属性选择器是复杂而又强大的,但不用担心,因为它也是易于学习和使用的。在本文中,将会学习到CSS属性选择器的强大功能以及如何在实际工作中运用它。并提供了一些关于如何使用属性选择器的一些个人想法。

    2018-11-02 32 0 0
  • CSS伪选择器::empty vs :blank

    :blank要比:empty更好,因为它为我们提供更有好的开发体验。只不过到写这篇文章为止,:blank还没有得到浏览器的支持。不过:empty已经足够好了。也足够我们使用了,只不过有的场景之下,我们要确保元素是真的空元素,不包括空格符哟。

    2018-10-31 32 0 0
  • 理解CSS的逻辑属性和值

    不同的书写模式(writing mode)中,可以抽取出共性的抽象概念(如开始位置,或行),这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。

    2018-10-28 88 1 0
  • 幻术,一行代码实现镂空效果

    从最近在做的需求说起,一个优惠券样式,过设计稿的时候认为没什么大不了的,满口答应了。真正开始开发的时候遇到问题,主要是镂空效果实现方式上比较费劲。要求是背景可配,并且票身可以配背景图,然后镂空是真镂空。

    2018-10-19 565 0 0
  • 幻术,一行代码实现镂空效果

    从最近在做的需求说起,一个优惠券样式,过设计稿的时候认为没什么大不了的,满口答应了。真正开始开发的时候遇到问题,主要是镂空效果实现方式上比较费劲。要求是背景可配,并且票身可以配背景图,然后镂空是真镂空

    2018-10-18 31 0 0
  • CSS混合模式高级应用

    首先要声明的是,我们在这篇文章中要了解的不是CSS混合模式如何使用,而是来一起探索CSS混合模式的一些高级运用以及它能做些什么,又会带来什么样的效果。

    2018-09-29 894 0 0
  • 【实例】通过 CSS自定义属性(CSS变量)和 JavaScript 实现高级CSS主题切换

    在本教程中,我们将使用 CSS自定义属性(也称为CSS变量)来为简单的HTML页面实现主题切换。

    2018-09-28 674 0 0
  • CSS变量(自定义属性)实用指南及注意事项

    像 Sass 和 Less 这样的预处理器有助于保持CSS代码的组织和可维护性。 通过变量,混合,循环等特性 – 为CSS编码添加动态功能 – 有助于最大限度地减少重复并加快开发速度。

    2018-09-28 581 0 0