Category: Div / Css / XML / HTML5 / SVG
在页面整体布局中，页面元素的尺寸大小（长度、宽度、内外边距等）和页面字体的大小也是重要的工作之一。一个合理设置，则会让页面看起来层次分明， 重点鲜明，赏心悦目。反之，一个不友好的页面尺寸和字体大小设置，则会增加页面的复杂性，增加用户对页面理解的复杂性；甚至在当下访问终端 （iPhone、iPad、PC、Android…）层出不穷的今天，适应各式各样的访问终端，将成为手中的一块“烫手的山芋”。所以在近几年，“九宫 格”式的“流式布局”再度回归。为了提供页面布局，及其它的可维护性、可扩展性，我们尝试将页面元素的大小，以及字体大小都设置为相对值，不再是孤立的固 定像素点。使其能在父元素的尺寸变化的同时，子元…
Read More
html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠 结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不信，我只能 说：爱信不信！
下面我们来看一个标准的html5标签结构：（我这里只是说标签，其它概不涉及）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5</title>
</head&g…
Read More
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并
外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：
亲自试一试
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：
亲自试一试
尽管…
Read More
对于上一篇：你应该知道的一些事情——CSS权重 ，实战时会遇到一些实际的问题，本篇继续加重对css优先级的理解。最近跟公司同事分享session时在谈到CSS优先级权重问题，引入了之前一直在网上公认的权重计算公式，有好奇者问了一个ClASS选 择器组合与ID选择器优先级问题，如果按公式套下来，CLASS组合后是应该高于ID的，但结果实验并非如此，好奇之下，又在晚上找了找，总结如下。
顺序：“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承”。
网上教程权重计算
关于CSS权重，网上教程大都按不同选择器给了权重值：
STYLE：1000…
Read More
本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know，以及作者相关信息
作者：Vitaly Friedman
译者：99
除了浮动之 外，css权重问题是你要了解的，最复杂的一个概念之一。css每条规则权重的不同，是你所期望的效果，没有通过css规则在元素上生效的主…
Read More
语法
层叠样式表（ Cascading Stylesheet ，简称CSS ）， 其基本目标是让浏览器以指定的特性去绘制页面元素，比如颜色，定位，装饰。CSS的语法反映了这个目标，由下面两个部分构建：
属性（ property）是一个标识符，用可读的名称来表示其特性。
值（value）则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。
CSS 声明
CSS的核心功能是将CSS属性设定为特定的值。一个属性与值的键值对被称为”声明“（declaration） 。CSS引擎会计算页面上每个元素都有哪些声明，并且会根据结果绘制元素，排布样式。
在CSS中，属性和值对大…
Read More
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。
这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。
笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。
=====================
CSS选择器笔记
阮一峰 整理
参考网址：456 Berea Street
一、基本选择器
序号
选择器
含义
1.
*
通用元素选择器，匹配任何元素
2.
E
标签选择器，匹配所有使用E标签的元素
3.
.info
class选择…
Read More
HTML5入门
HTML5是HTML的最新版本，目标是更好地开发网络应用程序。 HTML5比HTML4拥有更简洁的语法并且提供了更多新的特性。 本文将对HTML5做一个大体的介绍。
HTML5能做什么？
1. 离线存储
HTML5可以让你的WEB应用程序离线也能运行,它提供了一个称作“应用程序缓存”的离线存储功能，因此即使当用户离线，浏览器仍然能够访问到它所需的文件。 这些文件可以是HTML，CSS，Javascript 或者其它任何网页运行所需要的文件。
2.拖拽功能
HTML5提供了可以用来设计交互应用程序的本地拖拽功能，通过这个特性你可以拖动任何元素然后把它放到你想放到地方。
3.地理位置定位技术
H…
Read More
最近，国内开始流行另一种流氓行为：使用框架（Frame），将你的网页嵌入它的网页中。
比如，有一家网站号称自己是”口碑聚合门户”，提供全国各个网上论坛的精华内容。但是，其实它就是用框架抓取他人的网页，然后在上面加上自己的广告和站标，这同盗版书商有何不同？！
不明内情的访问者，只看到地址栏是该门户的URL，不知道真正内容部分的网页，其实来自另一个网站。
为什么我反对这种做法？
1）它故意屏蔽了被嵌入网页的网址，侵犯了原作者的著作权，以及访问者的知情权；
2）大量业者使用的是不可见框架，使得框架网页与被嵌入的网页视觉上完全相同，欺骗性极高；
3）不良业者在被嵌入网页的上方或周围附…
Read More
网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备……）。
因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致API构架的流行，甚至出现“API First”的设计思想。RESTful API是目前比较成熟的一套互联网应用程序的API设计理论。我以前写过一篇《理解RESTful架构》，探讨如何理解这个概念。
今天，我将介绍RESTful API的设计细节，探讨如何设计一套合理、好用的API。我的主要参考了两篇文章（1，2）。
一、协议
API与用户的通信协议，总是使用HTTPs协议。…
Read More
实例：
2 Column 2栏 | 3 Column 3栏 | 4 Column 4栏 | 5 Column 5栏
Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The
一个悬停效果简单来说可以定义为在颜色，产生的效果文字的大小或形状或任何其他形式的变化发生，当你把鼠标光标移动到图像。这可以通过CSS编码容易实现。这里我们介绍国外8个CSS库添加图像悬停效果，提高网站的交互性。
1. Aero CSS3 Hover Effects ($13)
这是一个令人印象深刻、轻量级、响应式的图片悬停效果库，完全由纯 CSS3 实现。
2. Imagehover.css
imagehover.css是一个精心设计的CSS库，让你轻松的为图片添加悬停效果。超过 40 种效果，而压缩后只有 19KB 大小。
项目地址：https://github.com/ciar4n/imagehover.css
下载：i…
Read More
HTML 字符集
如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。
万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。
由于很多国家使用的字符并不属于 ASCII，现代浏览器的默认字符集是 ISO-8859-1。
如果网页使用不同于 ISO-8859-1 的字符集，就应该在 <meta> 标签进行指定。
ISO 字符集
ISO 字符集是国际标准组织 (ISO) 针对不同的字母表/语言定义的标准字符集。
下面列出了世界各地使用的不同字符集：
字符集
描述
使用范围
ISO-8859-1
Latin alphabet part 1
北美、西欧、拉丁美洲、加勒比海、…
Read More
原代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<style>
html, body{
padding: 0;
margin: 0;
