网站首页HTML/CSS
移动端网页基础模板

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>移动端网页基础模板</title>
    <!-- <link type="text/css" rel="stylesheet" href="xxx.css"> -->
</head>
<body>
<style type="text/css">
    :root {
        --color-red: #fa5151;
        --color-green: #07c160;
        --color-blue: #10aeff;
        --color-yellow: #ffc300;
        --font-color-primary: #333;
    }

    *{margin:0;padding:0;line-height:1;-webkit-text-size-adjust:none;}
    html{font-size:calc(100vw / 750);}
    body{background:#fff;color:var(--font-color-primary);font-size:calc(750rem / 22);font-family:Microsoft YaHei,黑体,宋体,Arial,sans-serif;}
    a{color:var(--font-color-primary);text-decoration:none;-webkit-tap-highlight-color:rgba(255,255,255,0);}
    li{list-style:none;}
    img{border:none;}
    .hidden{display:none;}
    .clear{clear:both;width:100vw;height:0;font-size:0;line-height:0;}

    .head{display:flex;margin:30rem 0 0 30rem;width:690rem;height:calc(690rem * .618);background:#cce8cf;justify-content:center;align-items:center;}
    .body{display:flex;margin:30rem 0 0 30rem;width:690rem;height:calc(690rem * 1.618);background:#cce8cf;justify-content:center;align-items:center;}
    .foot{display:flex;margin:30rem 0 30rem 30rem;width:690rem;height:calc(690rem * .618);background:#cce8cf;justify-content:center;align-items:center;}
</style>
<div class="head">head</div>
<div class="body">body</div>
<div class="foot">foot</div>
<!-- <script type="text/javascript" src="xxx.js"></script> -->
</body>
</html>