html和css基础模板
pc端html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="robots" content="all"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="author" content="Tencent-CP"> <meta name="Copyright" content="Tencent"> <meta name="Description" content=""> <meta name="Keywords" content=""> <title>(标题)</title> <link href="css/common.css" rel="stylesheet"> </head> <body>
<div class="wrap"></div>
</body> </html>
移动端html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="gbk"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="author" content="Tencent-Dong"> <meta name="Copyright" content="Tencent"> <meta name="Description" content=""> <meta name="Keywords" content=""> <title></title> </head> <body> <div class="wrap"></div> <script src="//ossweb-img.qq.com/images/js/mobile_build/util/zepto.js"></script> <script type="text/javascript"> (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; var clientHeight = docEl.clientHeight; if (!clientWidth) return; docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; }; recalc(); if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); </script> </body> </html>
css模板
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img{margin:0;padding:0} body,button,input,select,textarea{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1',tahoma,sans-serif} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0;display:block;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal} ol,ul{list-style:none} caption,th{text-align:left} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal} q:before,q:after{content:''} abbr,acronym{border:0;font-variant:normal} sup{vertical-align:text-top} sub{vertical-align:text-bottom} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit} input,textarea,select{*font-size:100%} body,html{width: 6.4rem;-webkit-touch-callout: none;} input{-webkit-appearance:none;} input,button,select,textarea{outline:none} textarea{resize:none} a{text-decoration: none;} a:hover,a:active,a:visited,a:link,a:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;} .pr {position:relative;} .pa {position:absolute;} .ov_hi{overflow: hidden;} .db {display:block;text-indent:-999em;} .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden} .clearfix{*zoom:1;} .flex{display: flex;-webkit-display: flex; } .flex-column{flex-direction: column;-webkit-flex-direction: column} .justify-content-center{-webkit-justify-content: center;justify-content: center;} .justify-content-space-between{-webkit-justify-content: space-between;justify-content: space-between;} .justify-content-space-around{-webkit-justify-content: space-around;justify-content: space-around;} .align-items-center{ -webkit-align-items: center;align-items: center;}