一、创建html
<!DOCTYPE html> <html lang="zn-CN"> <head > <meta charset="UTF-8"> <!--ie8~ie10 使用电脑上IE最新的文档模式edge渲染页面 ie11已放弃兼容模式，本身兼容已经很好了--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!--移动端响应式设置--> <meta name="viewport" content="width=device-width,initial-scale=1，maximum-scale=1, minimum-scale=1, user-scalable=no"> <!--SEO--> <meta name="keywords" content="购物,电商"> <meta name="description" content="综合购物平台"> <title>网页标题</title> <link rel="stylesheet" href="css/normalize.css"/> <link rel="stylesheet" href="css/main.css"/> </head> <body> <!--版本小于等于ie8处理--> <!--[if lte IE 8]> <p class="browserupgrade">您的浏览器版太旧了，请到 <a href="http://browsehappy.com">这里</a>更新，以获取最佳的体验</p> <![endif]--> <header> </header> <div class="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/0 a;
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: normal normal,microsoft yahei,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() {
var iWidth = 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
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
