成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

h5單頁面布局

wzyplus / 563人閱讀

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

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

演示：Demo-Oline

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112982.html

相關(guān)文章

  • h5單頁面布局

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

    TigerChain 評論0 收藏0

  • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

    摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實(shí)驗(yàn)室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評論0 收藏0

  • HTML-CSS

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

    xiaokai 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<