資訊專欄INFORMATION COLUMN
摘要：左右兩部分對稱顯示，屬性均為，屬性均為，屬性均為，屬性則分別為和。底部此部分的樣式設(shè)置與頂部導(dǎo)航欄的類似，只是需要將版權(quán)信息相關(guān)的文字在水平和垂直兩個方向上均居中對齊即可。
先來一張預(yù)覽圖。
接下來說一說這種頁面布局的實(shí)現(xiàn)思路，因為自己是從零開始的，所以著實(shí)花了好幾天功夫才實(shí)現(xiàn)了這么一個看起來很簡單的布局，所有東西都要自己一點(diǎn)點(diǎn)摸索，不過這種經(jīng)歷對于自己的成長也是很有幫助的。好了，下面進(jìn)入正題。
在寫這個頁面的過程中，其實(shí)不管是 HTML 代碼的結(jié)構(gòu)，還是 CSS 的實(shí)現(xiàn)方式，思路一直都是在變化的，目前的布局如下：
HTML 代碼結(jié)構(gòu)頂部為導(dǎo)航欄 .header：包括左側(cè)的logo，以及右側(cè)的用戶菜單；
中間為左右對稱的導(dǎo)航區(qū) .entrance：左右兩塊采用不同的背景圖（background-image），背景之上有鏈接，點(diǎn)擊就會轉(zhuǎn)向不同的頁面；
底部為包含版權(quán)信息的 .footer。
CSS 樣式設(shè)置 頂部 .header由于這一部分需要覆蓋在導(dǎo)航區(qū)之上，所以通過 absolute 屬性來令其脫離正常的文檔流，放在頁面頂部。
同時為了實(shí)現(xiàn)覆蓋的效果，就需要設(shè)置 z-index 屬性，該屬性值大于等于 1 時，即可堆疊在普通元素之上。
有一點(diǎn)需要注意的就是，只有設(shè)置過 position 屬性的元素（relative、absolute、fixed），z-index 屬性才能生效。而之前將中間區(qū)域的 z-index 值設(shè)置為 -1，后來發(fā)現(xiàn)鏈接無法點(diǎn)擊，找了一圈才發(fā)現(xiàn)是這里出了問題，打牢基礎(chǔ)至關(guān)重要啊。
為了保證在不同尺寸的瀏覽器窗口中均能正常顯示，就需要設(shè)置 min-width 及 width 屬性。width 屬性被設(shè)置為 100%，以占滿瀏覽器寬度，而真正用于展示頂部導(dǎo)航欄內(nèi)容的子元素 .header-container 的 width 屬性則被設(shè)置為 80%，這是因為頂部導(dǎo)航欄的內(nèi)容并不多，左右兩側(cè)留白，視覺效果較好。
中間 .entrance左右兩部分區(qū)域?qū)ΨQ顯示是通過設(shè)置 position 屬性實(shí)現(xiàn)的，所以父元素設(shè)置為 position: relative;，同時為了保證在不同尺寸的瀏覽器窗口中均能正常顯示，寬度設(shè)置與頂部 .header 相同。
左右兩部分對稱顯示，width 屬性均為 50%，position 屬性均為 absolute，top 屬性均為 0，left 屬性則分別為 0 和 50%。
為了讓背景正常顯示，均設(shè)置 background-size: 100% 以及 background-repeat: no-repeat;，這樣背景就能在水平方向上填滿整個元素。
底部 .footer此部分的樣式設(shè)置與頂部導(dǎo)航欄的類似，只是需要將版權(quán)信息相關(guān)的文字在水平和垂直兩個方向上均居中對齊即可。版權(quán)文字為 .footer 內(nèi)的 .copyright 之中的
標(biāo)簽，所以對 .footer 設(shè)置 flex 屬性，以便讓其中的 .copyright 在兩個方向上均居中對齊。
display: flex; justify-content: center; align-items: center;樣式調(diào)整 根據(jù)窗口大小重設(shè)背景
為了保證用戶調(diào)整瀏覽器窗口之后，背景圖片能夠適應(yīng)新的窗口尺寸，所以用 JS 來設(shè)置包含背景圖的元素的高度屬性，代碼如下。
上面的代碼中，viewPortHeight 之所以還要減去 90，是因為底部 .footer 高度為 90，如果不減去這個高度值，在底部 .footer 下方還會多出來一小塊空白區(qū)域，所以就加了這么一句。
目前做出來的頁面依然有小 bug，不過入口頁只是作為展示，現(xiàn)有的 bug 對頁面功能影響很小，所以這個 bug 先放一邊。畢竟需要做的事情還有很多，總要分一個輕重緩急，這也是工作中需要時常注意的一件事。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54341.html
摘要：左右兩部分對稱顯示，屬性均為，屬性均為，屬性均為，屬性則分別為和。底部此部分的樣式設(shè)置與頂部導(dǎo)航欄的類似，只是需要將版權(quán)信息相關(guān)的文字在水平和垂直兩個方向上均居中對齊即可。 先來一張預(yù)覽圖。 showImg(https://segmentfault.com/img/bVwC3j); 接下來說一說這種頁面布局的實(shí)現(xiàn)思路，因為自己是從零開始的，所以著實(shí)花了好幾天功夫才實(shí)現(xiàn)了這么一個看起來...
摘要：左右兩部分對稱顯示，屬性均為，屬性均為，屬性均為，屬性則分別為和。底部此部分的樣式設(shè)置與頂部導(dǎo)航欄的類似，只是需要將版權(quán)信息相關(guān)的文字在水平和垂直兩個方向上均居中對齊即可。 先來一張預(yù)覽圖。 showImg(https://segmentfault.com/img/bVwC3j); 接下來說一說這種頁面布局的實(shí)現(xiàn)思路，因為自己是從零開始的，所以著實(shí)花了好幾天功夫才實(shí)現(xiàn)了這么一個看起來...
