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