Damys

PX为单位在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体

拖放drag,dropp{ color:#666; font-size:14px; line-height:20px;}#div1{ width:230px; height:80px; padding:10px; border:1px solid #666;}<!--1.设置元素为可拖放：draggable="true"2.拖动什么--ondragstart（调

方法描述save()保存当前环境的状态restore()返回之前保存过的路径状态和属性createEvent() getContext() toDataURL()

什么是SVG？SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：SVG 图像可通过文

Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。SVGSVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

CSS: @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { from {-moz-transform: rotate(0deg);} to {-

CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：column-count: 列数目column-gap: 各列之间间隙宽度column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算column-rule-width：列之间分割线宽度column-rule-style：列之间分割线风格column-rule-color

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性Safari 支持替代的 -webkit-transition 注释：Internet Explorer 9 以及更早版本的浏览器不支持

效果图：使用border-radius，你可以画出各种漂亮的圆形图案CSS.circle { border-radius: 50%; display: inline-block; margin-right: 20px;}#circle1 { width: 200px; height: 200px; backgrou...

支持主流浏览器，--Firefox,Chrome,IE7/8/9---IE6目前不支持HTML:/*80%的透明效果：*/ <img alt="" src="style/newimg/test-330-h215.png" onmouseover=" this.style.opacity=1;this.filt

属性：属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性，除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-dura

效果：

CSS:Html:

.about-box:hover{background:#00a5e2;background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 165, 225)), to(rgb(2, 149, 203)));background-image: -webkit-linear-gradient(top,

DOCTYPEDOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。DTD(Document Type Definition) 声明以  开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。

1、声明文档使用的字符编码meta charset='utf-8'>12、声明文档的兼容模式meta http-equiv="X-UA-Compatible" content="IE=edge" /> 指示IE以目前可用的最高模式显示内容meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" />指示IE使用 指令确

Canvas-模拟地球-星球运行轨道

HTML5--video ,audio标签的常规操作

HTML5，Canvas-画线，空心图，矩形，文字，三角形，旋转图片

anvas 指针时钟-clock

纯CSS实现的3D倒计时效果，从0 到 9 ~效果图：css  下载：http://pan.baidu.com/s/1c0Db7Nihtml:结构图：代码：

第一步：

规则：星球 英文名 公转周期 光色 暗色水星 Mercury 87.70 天 #A69697 #5C3E40 金星 Venus 224.701天 #C4BBAC #1F1315地球 Earth 365.2422天 #78B1E8 #050C12火星 Mars 686.98 日 #C

宋体SimSun黑体SimHei微软雅黑Microsoft YaHei微软正黑体Microsoft JhengHei新宋体NSimSun新细明体PMingLiU细明体MingLiU标楷体DFKai-SB仿宋FangSong楷体KaiTi仿宋

1. 新的文档类型（Doctype）"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">上面这个既麻烦又难记的XHTML文档类型你还在使用吗？ 如果还是这样的话，现在该切换到新的HTML5文档类型了。现在只要这么简单的15个字符就可以了。（注意：你的doctype的申明需要出现在你html文件的第一行。）2

IE 浏览器filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FFFFFF’, endColorStr=’#3568CC’, gradientType=’0′)//支持IE8/9/...startColorStr 开始颜色endColorStr 结束颜色gradientType 渐变的方式：0

*{ margin:0; padding:0;}.con{ overflow:hidden; width:980px;}.con:after{ display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:"";}.con .l,.con.r{margin-bottom:-99

雅虎WEB前端网站优化—34条军规1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数，减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下 写进一个文件，页面里直接写入图片也是不好的做法，应该写进CSS里，利用 CSS sprites 将小图拼合后利用background

BUTTON

当一个网页元素有了hidden属性后，它的表现跟CSS的display: none;作用非常相似，元素将会消失，而且不占用任何页面空间。写法很简单：

download属性能让我们指定浏览器下载时采用新的文件名称，也就是在客户端重命名下载文件。而不是链接上原始的文件名称。实际上download属性更合适的名称是downloadName。

placeholder属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。

display属性none                      此元素不会被显示。block                     此元素将显示为块级元素，此元素前后会带有换行符。inline                    默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block              行内块元素。（CSS2.1 新增的值）list

尽量不缩写，除非一看就明白的单词.主要的 master.css 模块 module.css 主题 themes.css 专栏 columns.css 基本共用 base.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css

▲知识点一——头部信息里设置网页的基底网址基底网址的实质是统一设置超级链接的属性，基底网址标签是，它有两个属性，href和_target。href用于设置基底网址的路径，_target用于设置超级链接的打开方式。通过基底网址的添加，页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时，通过标记将相对网站跟目录地址附加在基底网址路径的后面，从而转化成绝对地址。我们首

什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了！有一点逻辑思想的人都会知道可以用IE和F

一、使用全角空格全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。二、使用空格的替代符号替代符号就是在需要显示空格的地方加入替代符号，这些符号会被浏览器解释为空格显示。空格的替代符号有以下几种：名称编号描述  不断行的空白（1个字符宽度）  半个

clear:both的理解在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;语法： clear : none | left |right | both参数：none : 允许两边都可以有浮动对象both : 不允许有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象当属性设置float（浮动）时，其所

CSS美化半个字符的基本思路思路很简单，就是一个字写两遍，分别显示一半。思路很清楚，也很简单，但如何实现呢？当然不能真的把一个字写两遍，这样也太愚蠢了，而且当用户拷贝粘贴这段文字时会粘出同样的文字两份。这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它