一、水平居中 1.1 行内元素 .parent { text-align: center; } 复制代码 1.2 块级元素 1.2.1 块级元素一般居中方法 .son { margin: 0 auto...
CSS 水平与垂直居中的16个方法
阅读全文
HTML5 移动端屏幕自适应方案与踩坑
屏幕自适应方案 介绍方案之前，首先还是交代一下项目背景与需求，毕竟一切方案也不能脱离实际需求。 需求与背景 设备宽度 > 800px， body宽度为800px 320px < 设备宽度 ...
纯CSS实现表单验证，用到Level 4 选择器新属性：invalid
关于表单验证 在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。 一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从而以此来决定下...
HTML怎么来的及CSS的诞生和版本
HTML的诞生 HTML是怎么来的？ 在1982年的时候，万维网的发明者Tim Berners-Lee爵士为了让全世界的物理学家能够方便的进行合作与信息共享，造了HTML(HyperText Mark...
CSS之flex弹性布局：高级前端的入门砖
1. 初识 flex flex 是 flexible 的缩写，意思为弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器都可以指定为 flex 布局( 包括行内元素 )： div { display...
CSS新旧逻辑属性对比与盒子模型
为什么Flex box跟Grid box的是以start、end为排列规则，而不是常规的top 、right 、bottom 跟left？ 先不要急着往下翻，大家先思考一下。 这个问题的答案，鱼头会在...
CSS语法基本规则与工作流
CSS语法 #1. 基本规则 CSS规则主要由两部分组成：选择器(selector)与声明(declarations)。 选择器(selector)是开发者希望改变样式的HTML元素。 声明(decl...
CSS3从基础渐变、关键帧动画到3d动画perspective属性
1. 简单的渐变动画 2. 稍复杂的关键帧动画 3. 结合transform 实现3d动画效果 看起来还行，学起来也非常容易。 那咱们就一步一步来玩把~~ transition transition ...
css浮层：footer位置保持在底部
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="ke...
字体加载CSS @font-face性能优化的常用策略
一、 font-face基本用法 font-face的基本用法想必大家都是知道的，基本上就是类似这样： @font-face { font-family: Lato; src: url('font-l...
CSS 模拟实现鼠标跟随的行为动画效果
通常而言，CSS 负责表现，JavaScript 负责行为。而鼠标跟随这种效果属于行为，要实现通常都需要借助 JS。 当然，本文的重点，就是介绍如何在不借助 JS 的情况下使用 CSS 来模拟实现一些...
reset.css：层叠样式表各浏览器重置样式库
复制以下代码，存为reset.css即可。 /* KISSY CSS Reset 理念：清除和重置是紧密不可分的 特色：1.适应中文 2.基于最新主流浏览器 维护：玉伯(lifesing...
CSS border属性绘制各种几何形状
border边框属性可以说是我们在网页布局中最常用不过的一个属性之一。border它不只是边框，它还有很多非常有用的“黑魔法”哈，让我们一起来学习一下。 border绘制几何形状的原理 我们先来看一个...
canvas实现弹幕效果及扩展功能
3. canvas实现弹幕 除了通过css实现弹幕的方法之外，通过canvas也可以实现弹幕。 通过canvas实现弹幕的原理就是时时的重绘文字，下面来一步步的实现。 获取画布 let canvas ...
css3实现乞丐版前端弹幕效果实现方式及性能优化
1. css3实现乞丐版的弹幕 (1)如何通过css3实现弹幕 首先来看如何通过css的方法实现一个最简单的弹幕： 首先在html中定义一条弹幕的dom结构： <div class="block...
px单位在移动端响应式布局中的不足及方案对比(媒体查询、百分比、rem和vw/vh）
前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案...
css绝对定位和overflow的可见与不可见
给首页做周年主题皮肤时遇到一个问题，写了个demo，然后又遇到了问题 <!DOCTYPE html> <html lang="en"> <head> <met...
CSS 新属性Hyphenation（连字符样式）初探
看看 CSS Hyphenation（连字符样式）的浏览器支持情况，今天的我们该如何使用它以及我们希望在浏览器中看到哪些功能。 浏览器支持情况 浏览器对 CSS 连字符样式 支持的非常好。您应该记住，...
css模拟下雪效果要如何做
下雪效果只是一类效果的名称，可以是红包雨等一些自由落体的运动效果，本文就是用纯css模拟下雪的效果。 1.前言 由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还...
纯 CSS 滚动进度条效果如何做
如何使用 CSS 实现下述滚动条效果？ 就是顶部黄色的滚动进度条，随着页面的滚动进度而变化长短。 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的...
HTML5云相机开发：拍照、摄像机功能实战
做一个chrome app的云相机应用，应用包括拍照、摄像、保存照片视频、上传文件等等核心功能，其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的，其一是总结梳理知识点，最重要是希望对有相...
CSS实现表单验证：核心属性CSS Level 4的Validity
关于表单验证 在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。 一般我们的实现思路都是JS监听input框的输入内容，判断用户输入内容，从而以此来决定下...
CSS中的高级计数器
CSS中的计数器 总所周知CSS中是可以使用计数器的： <!-- html --> <ol class="list"> <li>a</li> <l...
css小技巧：单选框和复选框的样式
单选框和复选框的样式 让我们一起不使用图片来设置复选框的样式： <!-- html --> <input type="checkbox" id="check" name="check...
16