前端开发代码模版收录

一、创建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