-
网站优化系列篇之01 — 网页字体可见性
在使用谷歌 PageSpeed Insights 网站测试工具时，诊断结果经常会有一项目： 确保文本在网页字体加载期间保持可见状态 利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。了解详情。 思考： 1. 为什么它会出现这样的问题对我们网站有什么影响呢？ 2. 那我们要怎么优化处理这个问题呢？ 原因： 字体通常是需要一段时间才能加载的大文件。为了解决这…- 478
- 0
-
HTML 锚点三种实现方法
在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验。 下面介绍下锚点三种实现方法： 1. 在同一页面中 <a name="add"></a> 或者 <a id="add"></a> <a href="#add">跳转到add</a> （ps：用id…- 573
- 0
-
水平垂直居中的六种方法
方法一: 绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） 图片展示： 代码如下： div{ background:red; position: absolute; left:50%; top:50%; transform: translate(-…- 592
- 0
-
css3有哪些新增属性？(回顾)
一、css3新增边框属性 1、css3新增属性之border-color：为边框设置多种颜色 p { border-style:solid; border-color:#ff0000 #0000ff; } 这里说一下题外话，需要注意："border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。 …- 602
- 0
-
CSS属性继承有哪些？（回顾）
CSS继承含义 CSS继承是指设置上级（父级）的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。 可以被继承的属性 字体系列属性： font-family:规定元素的字体系列。 font-weight:设置字体的粗细。 font-size:设置字体的尺寸。 font-style:设置字体的风格。 font-variant:设置小型大写字母的字体显示文本，所有的额小写字母都会转换成大写字母…- 550
- 0
-
前端JS、CSS版本控制
前言 最近面试，问道js,css版本控制问题，一时间忘记，没答上来，下来查阅资料，整理一下。 问题 用户 首次 通过浏览器打开网页时都会对 JS、CSS 文件 进行缓存，以便在下次打开时可以直接从缓存中取出，而不用重复地向服务器 再次请求；当用户再次通过浏览器浏览某个网页，浏览器在加载网页中包含的各个资源（JS、css、图片）时，先会判断缓存中是否已经包含了此资源（当然这与Header中定义的Ca…- 598
- 0
-
CSS中hover出现不生效的几个原因 ？
在设置CSS的hover时，有时会发现hover不起作用， 总结一下原因： 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 1.在设置:hover前加空格： 比如: <style type="text/css">…- 1.8k
- 0
-
20款CSS按钮鼠标HOVER效果展示
20款CSS Hover按钮样式特效，看看能否给你带来灵感，喜欢的可以自己尝试使用，或者直接修改他的代码，创作一个新的CSS HOVER样式出来。 扩展阅读《33个jQuery与CSS3实现的绚丽鼠标悬停效果》 Nanuk Antiman Nuka Nina Wapasha Saqui Aylen Moema Pipaluk Itzel Tamaya Wayra Ujarak Winona Shi…- 1k
- 0
-
-
CSS 最核心的几个概念
前言 本文将讲述 CSS 中最核心的几个概念，包括： 盒模型、position、float等。 这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。 元素类型 HTML 的元素可以分为两种： 块级元素（block level element） 内联元素（inline element 有的人也叫它行内元素） 两者的区别在于以下三点： 块级元素会独占一行（即无法与其他元素显示在…- 1.2k
- 0
-
20个编写现代CSS代码的建议
明白何谓Margin Collapse 不同于其他很多属性，盒模型中垂直方向上的Margin会在相遇时发生崩塌，也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时，只有二者中的较大值会被保留下来，可以从下面这个简单的例子来学习: .square { width: 80px; height: 80px; } .red { background-color: #F44336; m…- 1.2k
- 0
-
15个国外最流行的CSS框架
摘要：CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。本文将介绍15个国外最流行的CSS框架，希望对您有所帮助。 CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。例如，typography.css是基本排版规、grid.css是基于网格的布局、layout.css通常的布局，…- 969
- 0
-
理解 CSS 模块化
在瞬息万变的前端开发世界中，很难找到一个真正有意义的概念，并且将其清晰明了的向广大人民群众普及。 把目光投向CSS，一个重大转折就是CSS预处理器的出现（在工具方面来看），其中，Sass应该是最为著名的一个。此外，还有 PostCSS，它和Sass略有不同，但是殊途同归——都是用浏览器不能解析的语法编写，并且最终编译成浏览器能够理解的语法。 现在，又有一位新的成员出现了，它就是CSS模块。本文就将…- 1k
- 0
-
伪元素的妙用–单标签之美
:before和::before的区别 在介绍具体用法之前，简单介绍下伪类和伪元素。伪类大家听的多了，伪元素可能听到的不是那么频繁，其实 CSS 对这两个是有区分的。 CSS2及CSS3伪类区分 CSS3伪元素单双冒号区分 有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:)，这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式。 1 #…- 986
- 0
-
CSS基础：z-index详解
概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的比较 对于同级元素，默认(或position:static)情况下文档流后面的元素会覆盖前面的。 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。 IE6/7下position…- 1k
- 0
-
几款开发 CSS 最好的前端开发工具
紧跟任何开发工具包的更新都是一件需要持续努力的事，特别是前端开发工具。 把你的注意力从方法和技术的洪流中移开一会，你就可能会错过什么！ 上周我遇到我的一个前端开发朋友，他很兴奋地跟我谈论他使用的一些新工具。其中最有意思的是使用 Grunt 来编译 SCSS。 人们很容易忘记不是每个人都和你走在同一条路上。他们或是有使用限制，或是视野狭窄，无法洞悉周遭的环境。我使用 Grunt 和使用 SCSS 一…- 859
- 0
-
CSS实用技巧第一讲：文字处理
前言 作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些CSS开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 CSS实用技巧第一讲：文字处理 本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。 文本对齐方式 CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也…- 826
- 0
-
轻量级的CSS动画引擎——AniX
介绍 ANIX是一个轻量级且易于使用的动画库，在现代浏览器发挥优良的性能和良好的兼容性。它采用了原生的CSS属性的过渡，不是JS模拟动画，因此性能更好。并且可以使用硬件加速。ANIX不到3K的大小有多种版本的ANIX实现，UMD版本，jQuery的版本和React版本等... Github https://github.com/drawcall/AniX 简单使用 PS：可以先看demo标题进行预…- 988
- 0
-
前端开发，用 css3 做一个求婚小动画
首先放张效果图 然后一步步分析一下 首先是刚出现的新郎的动画 .w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: toWoman 0.5s ease .5s both; } @keyframes toWoman{ 0%{ opacity: 0; transform: translate(-200px); } 1…- 1.1k
- 0
-
scss,less,stylus这些css处理器该怎么选择
css作为前端三剑客，从诞生以来很少变化，css3都已经诞生了20年，和js的框架层出不穷相比，似乎css就不需要框架，就不需要更优化的写法。然而在追求极致的程序员面前，代码的可维护性，代码的优雅性有迫切希望改进css代码的编写，于是css预处理器诞生了 css预处理器 由于浏览器只能理解和识别纯CSS语法，因此不能简单地用全新的语言代替它。但是，目前的css确实有一些局限性，这在小型项目中可能并…- 896
- 0
-
CSS实用技巧第二讲：布局处理
前言 在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看CSS布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会有其他相关知识点。 CSS实用技巧第二讲：布局处理 rem自适应布局 移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制，代码如下： /* 基于UI wid…- 677
- 0
-
从浅到深的学习 CSS3阴影(box-shadow)
前言 前面两篇文章都有提到过box-shadow，里面也有很多的基础知识，有看过的小伙伴应该都有或多或少的收获吧，今天我们再从基础入手，希望能让大家更熟悉它。 没有看过之前文章的小伙伴请点击： CSS3 box-shadow实现背景动画 CSS3动画解析抖音 LOGO制作 下面我们从最基础的开始演示。 单侧投影 关键点: 1、外 box-shadow 前四个参数：x 偏移值、y 偏移值 …- 784
- 0
-
css样式之标签的查找
css的组成部分：选择器和声明 css的注释： /*这是注释*/ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<style>--&g…- 715
- 0
-
￥优惠劵使用时效：无法使用使用时效：
之前
使用时效：永久有效优惠劵ID：×