一、创建html

<!DOCTYPEhtml><htmllang="zn-CN"><head><metacharset="UTF-8"><!--ie8~ie10使用电脑上IE最新的文档模式edge渲染页面ie11已放弃兼容模式，本身兼容已经很好了--><metahttp-equiv="x-ua-compatible"content="IE=edge"><!--移动端响应式设置--><metaname="viewport"content="width=device-width,initial-scale=1，maximum-scale=1,minimum-scale=1,user-scalable=no"><!--SEO--><metaname="keywords"content="购物,电商"><metaname="description"content="综合购物平台"><title>网页标题</title><linkrel="stylesheet"href="css/normalize.css"/><linkrel="stylesheet"href="css/main.css"/></head><body><!--版本小于等于ie8处理--><!--[iflteIE8]><pclass="browserupgrade">您的浏览器版太旧了，请到<ahref="http://browsehappy.com">这里</a>更新，以获取最佳的体验</p><![endif]--><header></header><divclass="container"></div><footer></footer></body></html>


二、基本css

1、初始化页面（normalize.css）：http://down.51cto.com/data/2318760

2、常用基本样式、工具样式 （pc上使用rem的话，需要考虑下css3属性rem的兼容性）

/*===================基本默认值==================*/html{font-size:125%;/*浏览器默认16px*125%=20px,页面中使用1rem=20px*/color:#222;}::selection{background-color:#b3d4fc;text-shadow:none;}/*设置文字选中的颜色，以及是否有阴影*/ul{margin:0;padding:0;}li{list-style:none;}/*=====================工具样式====================*/.center-block{display:block;margin-left:auto;margin-right:auto;}.pull-right{float:right;!important;}.pull-left{float:left;!important;}.text-right{text-align:right;!important;}.text-left{text-align:left;!important;}.text-center{text-align:center;!important;}.hide{display:none;!important;}.show{display:block;!important;}.invisible{visibility:hidden;}/*不仅隐藏元素，而且不占用空间*/.text-hide{font:0/0a;color:transparent;text-shadow:none;background-color:transparent;border:0;}/*隐藏文本*/.clearfix:before,.clearfix:after{content:"";display:table;}/*清除浮动1使用：before可以防止本元素的顶部margin与上方元素的底部margin发生重叠*/.clearfix:after{clear:both;}/*清除浮动2*//*======================浏览器更新提示=====================*/.browserupgrade{margin:0;padding:0.5rem;background:#cccccc;}/*====================自定义页面样式===================*/body{font-size:0.6rem;font-family:normalnormal,microsoftyahei,Arial,sans-serif;line-height:1.5;background-color:#f7f7f7;}a{color:#666666;text-decoration:none;}a:hover,a:active{color:#0ae;text-decoration:underline;}


三、移动端rem处理 （已1rem=30px为例）

(function(){variWidth=document.documentElement.getBoundingClientRect().width;iWidth=iWidth>750?750:iWidth;document.getElementsByTagName('html')[0].style.fontSize=iWidth/25+'px';})();


附：

1、颜色拾取器(美工必备屏幕颜色吸取器)http://down.51cto.com/data/2318767

2、10个HTML5美化版复选框和单选框：http://www.html5tricks.com/10-pretty-checkbox-radiobox.html