h5單頁面布局

wzyplus 發布于2019-08-29 14:12 / 535人閱讀

摘要：前段時間做了一個端單頁面應用因為項目開始的比較倉促，加上本人前端經驗特別少，雖然項目大體完成了，但是頁面布局確成立它的硬傷為了填補心里落差，專門做了一個的單頁面布局，代碼很簡單，大牛請繞過。

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

演示：Demo-Oline

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

index.html




    
    h5-page-layout
    


  
  header
  
  
    left-menu
    right-content
  
  
  footer

layout.css

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

GPU云服務器云服務器頁面布局單頁面單頁面應用 h5頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112982.html

h5單頁面布局

摘要：前段時間做了一個端單頁面應用因為項目開始的比較倉促，加上本人前端經驗特別少，雖然項目大體完成了，但是頁面布局確成立它的硬傷為了填補心里落差，專門做了一個的單頁面布局，代碼很簡單，大牛請繞過。前段時間做了一個PC端單頁面應用 GitHub因為項目開始的比較倉促，加上本人前端經驗特別少，雖然項目大體完成了，但是頁面布局確成立它的硬傷...為了填補心里落差，專門做了一個h5的單頁面布局，代...

TigerChain 2019-08-01 18:22 評論0 收藏0
優秀文章收藏（慢慢消化）持續更新~

摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0