h5單頁面佈局

時間 2019-11-05

標籤 h5 頁面佈局简体版

原文原文鏈接

前段時間作了一個PC端單頁面應用 GitHub
由於項目開始的比較倉促，加上本人前端經驗特別少，雖然項目大致完成了，可是頁面佈局確成立它的硬傷...爲了填補內心落差，專門作了一個h5的單頁面佈局，代碼很簡單，大牛請繞過。css

頁面兼容 IE11/Chrome/FireFox(IE10如下未測試)
隨瀏覽器大小自動縮放，不會出現可惡的滾動條

index.html前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h5-page-layout</title>
    <link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
  
  <header>header</header>
  
  <section>
    <div class="left-menu">left-menu</div>
    <div class="right-content">right-content</div>
  </section>
  
  <footer>footer</footer>
  
</body>
</html>

layout.cssgit

@charset "utf-8";

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  color: white;
}

header {
  height: 10%;
  border-bottom: 1px solid gray;
  box-sizing: border-box;
  background: #409EFF;
}

section {
  height: 70%;
  box-sizing: border-box;
}

.left-menu {
  width: 10%;
  height: 100%;
  background: #67C23A;
  border-right: 1px solid gray;
  box-sizing: border-box;
  float: left;
}
.right-content {
  width: 90%;
  height: 100%;
  float: left;
  background: #E6A23C;
}

footer {
  height: 20%;
  border-top: 1px solid gray;
  box-sizing: border-box;
  background: #F56C6C;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。