绿足 博客

CSS3 & SCSS 样式简洁之道SCSS 代码*{ html, body { width: 100%; height: 100%; background-color:#fff; margin:0; display: flex; // flex 弹性盒子布局 flex-wrap: wrap; // 换行 }}// 定义一个方法@mixin present($size:100px,$bodyColor:#ff5151, $re

目录一. CSS 之单位篇CSS 之 px, em, rem一. CSS 之单位篇CSS 之 px, em, rem背景简介PX 为单位*px 比较精准和固定。 只要页面某个元素设置了px字体大小，其子元素/子孙元素未设置字体大小或者设置字体大小对应的CSS优先级没有父元素高，该子元素/子孙元素会继承其父原始px设置的大小；*这种方式存在一个问题，当用户通过滚动鼠标改变浏览器...

H5 EChart 左右滑动加载实践快速实现一个支持左右滑动的EChart h5 实践：滑动前：滑动后：源码：<template><div class="box1"> <div class="wrap">...

CSS3 入门 6十. CSS3 多列1. column-count2. column-gap3. column-ruleInternet Explorer 10 和 Opera 支持多列属性。Firefox 需要前缀 -moz-。Chrome 和 Safari 需要前缀 -webkit-。

CSS3 入门（５）九. CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 ｊａｖａｓｃｒｉｐｔ。1. CSS3 @keyframes 规则1）. @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建

CSS3 入门 4通过 CSS3，我们可以在不使用 Flash 动画或 ｊａｖａｓｃｒｉｐｔ 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。Safari 需要前缀 -webkit-。

CSS3 入门 3八. CSS3 2D转换Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。注释：Internet Explorer 9 需要前缀 -ms-。2D Transfo

CSS3 入门 2五. CSS3背景CSS3中包含几个新的背景属性，提供更大背景元素控制。在本章您将了解以下背景属性:属性描述CSSbackground-clip规定背景的绘制区域。3background-origin规定背景图片的定位区域。3background

CSS3 入门 1一. 新增选择器使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。CSS3的属性选择器主要包括以下几种：1. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；2. E[attr$="value"]：指定了属性名，并且有属性值，而且属性

近年响应式设计（Responsive Design）很受关注，随着移动互联网的迅速发展，移动设备屏幕的多样性。设计师提出了响应式布局的设计方案。这里将概要与大家分享包含：什么是响应式布？响应式布局的优点和缺点以及响应式布局该怎么设计（通过CSS3 Media Query实现响应布局）？一. 什么是响应式布局？       响应式布局是Ethan Marcotte在2010年5月

一.语法用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。为选择器分组时，将单独的选择器单独放在一行。为了代码的易读性，在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。每条声明语句的 : 后应该插入一个空格。为了获得更准确的错误报告，每条声明都应该独占一行。所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如