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;}

 

posted on 2018-10-29 09:43  蘭二哥哥  阅读(261)  评论(0)    收藏  举报

导航