整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
迎關注。
全屏布局方案常用于管理系統，監控與統計平臺，傳統企業官網。使用全屏布局方案可以簡單快速的搭建出一個網站的首頁結構。
下圖為全屏布局效果圖，該全屏布局中使用的是定寬和自適應的布局方式。top和bottom部分寬度固定，left部分寬度和高度固定，right部分自適應頁面內容，滾動條出現在right內部，滾動滾動條時right部分內容滾動，全屏不動。放大或縮小瀏覽器窗口時不會只有right部分的寬高會改變，其余部分均保持不變。
全屏布局結構效果圖
使用position實現全屏布局
首先在html、body、.parent上設置height為100%和hidden，去除瀏覽器自帶的滾動條。接著設置top、left、right和bottom為絕對定位元素，并利用絕對定位元素的top、left、right和bottom屬性將元素撐開，占據整個頁面。其中inner元素是用來實現滾動條的，在實際的頁面制作中，滾動條會因為內容的高度而自動出現，此處為了演示效果添加了該滾動條。
如果需要將定寬改為百分比值，可直接將相應的數值改為百分比，例如height：100px；可直接改為height：10%；
該方案在兼容IE6時還需要做一些處理，其他瀏覽器都有較好的支持。
使用flex實現全屏布局
基本思路與position一致，但是使用flex來實現，首先實現三行排的效果，再在中間列上實現兩列效果。inner元素仍然作為滾動條效果展示輔助元素出現。
完全自適應的全屏布局要求除right部分空間占據剩余位置外，其余部分所需空間均需要根據內容來分配，效果圖如下：
完全自適應的全屏布局
目前實現該布局的方法有兩種，flex和grid，但是grid方法還處于w3c的草案階段，大部分瀏覽器都沒有支持，所以此處只展示flex實現方法的代碼。
flex實現自適應全屏布局
我們看到該方案與前面flex實現全屏布局的方案比較起來很相似，只是移除了關于元素寬度和高度的設置，我們移除了寬度和高度的設置后，元素的寬高就會依據內容的寬度自動調整，從而實現自適應。
收藏轉發請先關注，謝謝支持~
里巴巴店鋪裝修中離不開全屏輪換廣告，由于阿里店鋪裝修原配的輪換圖有點呆板，所以通過自己編寫的特效代碼來制作全屏輪換廣告還是很有必要的。
(源代碼特效觀看及代碼請在文末)
阿里店鋪裝修全屏廣告輪換效果圖
(由于畫面問題，縮放顯示了，正常寬度是 1920px或100%)
阿里店鋪裝修全屏廣告輪換html代碼
全屏廣告輪換html代碼解釋：
① 屬性的設置，這里nav(觸發切換的標簽)不使用默認，對應的是.lht_nav里面的li元素，切換的面板設置為.lht_pane，上下頁按鈕設置如圖，觸發動作設置成點擊觸發.
② li的觸發標簽個數與lht_pane面板的數量必須要一致。
阿里店鋪裝修全屏廣告輪換css代碼
全屏廣告特效css部分說明：
① 這里涉及到一個css小技巧分享，對觸發標簽容器.lht設置文本居中，然后子元素設置為display:inline-block; (內聯塊狀的意思，區別于float:left),這樣里面的小模塊就會在容器.lht里面居中了，這樣能確保觸發切換的按鈕能一直畫面中間
② 此處只是外部的箭頭圖片路徑地址
③ .disabled類是當上下頁失效(第一頁和最后一頁時)的特定類，小耐這里設置成不顯示，也可以考慮設置成透明。
阿里巴巴國內店鋪裝修的全屏廣告特效的基本代碼就如上所示，此特效實際就是基于切換組件fx.tabs變通出來的特效，部分全屏特效是可以有縮率小圖在左邊或者右邊，實際只要將觸發標簽里面的元素換成圖片即可。
由于自媒體文章避免貼出代碼展示網址，所以如果有意獲取源代碼，請訪問小耐博客獲取或閱讀原文后獲取。
還記得我們開發全屏頁面或者是移動端頁面時經常會設置一句話
html, body { height: 100%; }原因是，當沒有內容撐開高度時，html和body的默認高度是0，如果內容想要按照比例或是撐滿全屏時，就沒辦法正常使用百分比
而如果只設置body { height: 100%; }，這時body以html的高度為基準，但html默認高度也是0，所以需要設置html與body高度同與瀏覽器等高
當我們沒有設置任何高度的情況下，給body設置背景色，顏色竟然是可以布滿瀏覽器的，然而可以看到控制臺中，body實實在在是沒有高度的，這究竟是為什么呢？
body {
background: pink;
}事實上，當我們單獨給body設置背景顏色時，并不是body標簽被賦予了背景色，而是【 瀏覽器畫布 】賦上了顏色，可以理解為，body的背景色被瀏瀏覽器”吃掉“
那如果我們同時給html與body設置背景色，會發生什么樣的結果呢
html {
background: orange;
}
body {
background: pink;
}可以看到，我們設置的body背景色竟然“失效了”，瀏覽器被賦予了html的背景色
而在我看來，實際是我們設置的body背景色[生效了]，但因body默認高度為0，所以在頁面中并沒有粉色區塊顯示，那我們嘗試在body中添加一些內容
可以看出，body的高度被撐開，而body的背景色則是實實在在只給了body
瀏覽器會“吸收”html與body的背景色
當只設置了body背景色時，瀏覽器發現了，于是把這個背景色“占為己有”
而如果html設置了背景色，瀏覽器則會認為html離我更近，所以會“拿走”html的背景色當成自己的顏色
當然，到現在為止，我們實驗的都是純色背景，那如果我們設置成漸變色，還是相同的結果嗎？
疑問產生，開始實驗
首先，只設置body的背景為線性漸變粉色pink到白色#fff，預想結果應該是和背景一樣，直接瀏覽器從上往下的漸變
body {
background: linear-gradient(pink, #fff);
}嗯？這怎么和預想不一樣，再放大頁面看一下漸變，就可以發現每個漸變的高度和html的高度是一致的，而html的高度則是body的默認margin撐開
于是開始設置
* {
margin: 0;
padding: 0;
}同樣，如果漸變給html設置的，也不會作用到瀏覽器上
說明瀏覽器并不會把漸變色據為己有，那如果想要設置全屏漸變，就需要用到我們文章開頭說到的
html, body { height: 100%; }你曉得了吧?。?！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
