1、人物走路动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>走路动画</title> <style type="text/css"> .box{ width:120px; height:180px; border:1px solid #ccc; margin:50px auto 0; position:relative; overflow:hidden; } .box img{ display:block; width:960px; height:182px; position: absolute; left:0; top:0; animation:walking 1.0s steps(8) infinite; } @keyframes walking{ from{ left:0px; } to{ left:-960px; } } </style> </head> <body> <div><img src="http://www.likecs.com/images/walking.png"></div> </body> </html> CSS3 浏览器前缀 浏览器样式前缀 为了让CSS3样式兼容，需要将某些样式加上浏览器前缀： -ms- 兼容IE浏览器 -moz- 兼容firefox -o- 兼容opera -webkit- 兼容chrome 和 safari div { -ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); } 自动添加浏览器前缀目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer
可以在Sublime text中通过package control 安装 autoprefixer
Autoprefixer在Sublime text中的设置：1、preferences/key Bindings-User
{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }2、Preferences>package setting>AutoPrefixer>Setting-User
{ "browsers": ["last 7 versions"], "cascade": true, "remove": true }last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀
PC端兼容h5的新标签的方法，在页面中引入以下js文件:
<script type="text/javascript" src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script> HTML5 新增表单控件 新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索 <label>网址:</label><input type="url" required><br><br> <label>邮箱:</label><input type="email" required><br><br> <label>日期:</label><input type="date"><br><br> <label>时间:</label><input type="time"><br><br> <label>星期:</label><input type="week"><br><br> <label>数量:</label><input type="number"> <br><br> <label>范围:</label><input type="range"><br><br> <label>电话:</label><input type="tel"><br><br> <label>颜色:</label><input type="color"><br><br> <label>搜索:</label><input type="search"><br><br> 新增常用表单控件属性： 1、placeholder 设置文本框默认提示文字 2、autofocus 自动获得焦点 3、autocomplete 联想关键词 移动端与PC端页面布局区别 视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
设置方法如下( 快捷方式：meta:vp + tab )：
<head> ...... <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ...... </head> 视网膜屏幕（retina屏幕）清晰度解决方案视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。