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

 

转载于:https://www.cnblogs.com/fanmiaolan/p/9868873.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值