網站入口頁雙欄對稱佈局實現思路

先來一張預覽圖。

---

接下來講一說這種頁面佈局的實現思路，由於本身是從零開始的，因此着實花了好幾天功夫才實現了這麼一個看起來很簡單的佈局，全部東西都要本身一點點摸索，不過這種經歷對於本身的成長也是頗有幫助的。好了，下面進入正題。

---

總體佈局

在寫這個頁面的過程當中，其實無論是 HTML 代碼的結構，仍是 CSS 的實現方式，思路一直都是在變化的，目前的佈局以下：

HTML 代碼結構

• 頂部爲導航欄 .header：包括左側的logo，以及右側的用戶菜單；

• 中間爲左右對稱的導航區 .entrance：左右兩塊採用不一樣的背景圖（background-image），背景之上有連接，點擊就會轉向不一樣的頁面；

• 底部爲包含版權信息的 .footer。

CSS 樣式設置

頂部 .header

• 因爲這一部分須要覆蓋在導航區之上，因此經過 absolute 屬性來令其脫離正常的文檔流，放在頁面頂部。

• 同時爲了實現覆蓋的效果，就須要設置 z-index 屬性，該屬性值大於等於 1 時，便可堆疊在普通元素之上。

有一點須要注意的就是，只有設置過 position 屬性的元素（relative、absolute、fixed），z-index 屬性才能生效。而以前將中間區域的 z-index 值設置爲 -1，後來發現連接沒法點擊，找了一圈才發現是這裏出了問題，打牢基礎相當重要啊。

• 爲了保證在不一樣尺寸的瀏覽器窗口中均能正常顯示，就須要設置 min-width 及 width 屬性。width 屬性被設置爲 100%，以佔滿瀏覽器寬度，而真正用於展現頂部導航欄內容的子元素 .header-container 的 width 屬性則被設置爲 80%，這是由於頂部導航欄的內容並很少，左右兩側留白，視覺效果較好。

中間 .entrance

• 左右兩部分區域對稱顯示是經過設置 position 屬性實現的，因此父元素設置爲 position: relative;，同時爲了保證在不一樣尺寸的瀏覽器窗口中均能正常顯示，寬度設置與頂部 .header 相同。

• 左右兩部分對稱顯示，width 屬性均爲 50%，position 屬性均爲 absolute，top 屬性均爲 0，left 屬性則分別爲 0 和 50%。

• 爲了讓背景正常顯示，均設置 background-size: 100% 以及 background-repeat: no-repeat;，這樣背景就能在水平方向上填滿整個元素。

底部 .footer

• 此部分的樣式設置與頂部導航欄的相似，只是須要將版權信息相關的文字在水平和垂直兩個方向上均居中對齊便可。版權文字爲 .footer 內的 .copyright 之中的 <p> 標籤，因此對 .footer 設置 flex 屬性，以便讓其中的 .copyright 在兩個方向上均居中對齊。

display: flex;
justify-content: center;
align-items: center;

樣式調整

根據窗口大小重設背景

爲了保證用戶調整瀏覽器窗口以後，背景圖片可以適應新的窗口尺寸，因此用 JS 來設置包含背景圖的元素的高度屬性，代碼以下。

<script type="text/javascript">
  $(window).resize(function() {
    var viewPortHeight = window.innerHeight - 90;
    $('.entrance > div').css("height", viewPortHeight + 'px');
    $('.entrance > div').css("line-height", viewPortHeight + 'px');
    $('.entrance > div').css("min-height", viewPortHeight + 'px');
  });
</script>

上面的代碼中，viewPortHeight 之因此還要減去 90，是由於底部 .footer 高度爲 90，若是不減去這個高度值，在底部 .footer 下方還會多出來一小塊空白區域，因此就加了這麼一句。

---

後記

目前作出來的頁面依然有小 bug，不過入口頁只是做爲展現，現有的 bug 對頁面功能影響很小，因此這個 bug 先放一邊。畢竟須要作的事情還有不少，總要分一個輕重緩急，這也是工做中須要時常注意的一件事。