爲本身的園子寫樣式遇到的一些問題

　　幾天前爲了給Aaron大神評論，註冊了本身的博客園帳號，卻一直沒來得及打理,昨天寫代碼發現了一些問題，想整理成一篇博客的時候才意識到本身已經好久沒有登錄過CSDN了。上次寫博客的時候我正在學習JAVAEE，對本身究竟喜歡什麼，想要作什麼感到一片迷茫。時間稍縱即逝，一晃兩個月過去，看着之前的博客才發現本身已經很久沒有寫JAVA代碼了。這兩個月之間，從java到前端到php再回到前端，雖然都只是學了一些皮毛，但總算讓我找到了本身的所愛，縱然你們都在說前端這樣那樣的很差，但我仍是決定堅決不移地走下去了，因而把博客遷到了園子，這是一個很棒的開始！

　　好了，這篇博文本意不是談理想的啦，博客園最吸引個人地方是我的博客的樣式能夠本身定義，想要成爲一名前端的我天然不會錯過這個練手的大好機會。點擊管理進入後臺界面，找到設置，發現有寫自定義css的文本框，勾上禁用默認，後返回主頁，效果是這樣的

一看到這種網頁就有一種想佈局的衝動有沒有！這時把網頁的html代碼扒到sublime裏，簡單分析一下結構，在head標籤裏鏈一個新建的css文件就能夠開工了

 

 

命名規範，註釋到位，沒有什麼比看這種代碼更爽快的事情了，這裏我作了代碼摺疊，能夠看出網頁由#home包裹，上中下佈局，展開的代碼過於繁瑣，我就不一一截圖了，大體爲：

#header（頭部）分爲#blogTitle（博客名稱）和#navigator（導航）

#main（中部）分爲#mainContent（內容區）和#sideBar（側邊欄）

#footer（頁腳）爲版權聲明部分

先上一張我從新定義樣式之後的效果圖（時值期末時間緊張，加上個人博客剛開通也沒人看，就圖個本身樂呵，這裏沒上bootstrap，也沒有考慮移動端的顯示效果，剛拿手機試了一下，仍是有點慘......好吧 重在思路）：

　　爲了保證後臺數據的正常傳輸，以上html代碼博客園是不容許咱們更改的，這在寫css代碼的時候會帶來一些不便，下面列舉幾個我在編碼過程當中遇到的問題：

　　1、原html代碼裏，博客名稱在導航的上面，若是我想讓導航在名稱上面顯示，若是能夠更改html，只需調整這兩部分代碼的順序再稍加修飾便可，可是html不能修改，這是我之前沒有遇到過的，好在利用一些定位的知識能夠解決，方法是，爲他們公共的父盒子#header設置相對定位，再對#blogTitle和#navigator分別絕對定位

　　2、之前作頁面都是使用本地的圖片，而後整個文件夾傳到我的網站上，此次本身準備的圖片怎麼引用呢？這個問題其實很容易解決，由於css裏的url是能夠引來自網絡的連接的，爲了防止外鏈失效，這裏我選擇的是將選好的圖片上傳到本身博客園的相冊裏，進入相冊找到上傳的圖片，查看圖片連接便可獲得url。

　　3、仍是圖片，此次要說圖片大小，首先，咱們本身挑選的圖片每每都比較大（數百K甚至上M），增長流量又下降速度，實在不是個明智的選擇，但使用其餘圖片又難遂心願，這時咱們就須要將挑好的圖片進行壓縮，百度一下圖片壓縮會有不少結果，並且是在線壓縮，不用下載什麼軟件，這裏我用的是圖好快 http://www.tuhaokuai.com/ （現搜的，不存在廣告問題）個人兩張圖都壓到了50k（選擇壓縮30%）左右才放上去的，其次，上面我使用的雪橇犬背景是不隨滾動條滾動的，看上去挺神奇，實際上是使用了一個這樣的屬性 background attachment:fixed ，說到background，來博客園的初衷就是要發一篇關於background-size的，寫完這篇再整理那篇吧。

　　4、內容區蒙版的設計，也是我以爲最有意思的一點。通常咱們在設置蒙版的時候都會在須要設置的容器裏添加一個div.mask，設置背景色，透明度什麼什麼的，可是此次不同，html代碼不能改動，那怎麼辦呢？好在css有提供了before、after選擇器，在個人頁面裏具體的使用是這樣的

#main{
	position: relative;
	min-height: 1200px;
	/*border: 2px solid red;*/
	/*background: url("banner.jpg") no-repeat;*/
	background: url("http://images.cnblogs.com/cnblogs_com/iny7/775666/o_banner.jpg") no-repeat;
	background-attachment: fixed;
	background-size: cover;
	overflow: hidden;
	z-index: 0;

}

　　

#main:after{
	position: absolute;
	content: '';
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #ccc;
	opacity: 0.9;
	z-index: -1;
	/*IE*/
	filter:alpha(opacity=0.9);
}

　　爲須要添加蒙版的#main層設置相對定位，並添加一個after僞類，並設置絕對定位，寬高100%，背景顏色透明度等。最關鍵的是兩個z-index。爲何會這樣寫呢？下面就來細說這個問題：

首先來看未設置蒙版的#main層(爲了使得長博客能正常顯示，即右半邊自適應，對#main裏面的左右兩個區域我採用了左絕對，右浮動的兩列布局）

 

　　爲了方便講解，這裏將邊框臨時換成了紅色，很容易看出咱們的內容的顯示已經嚴重收到了狗頭的影響，但我實在好喜歡這張圖片，怎麼辦呢？就是加蒙版！使用剛纔提出的方法，不設置兩個z-index，咱們來看看效果：

這......跟說好的不同呀！雖然遮住了狗頭，可是把文字也蓋住了，好像帝都的天空同樣伸手不見五指，不是我想要的，爲何會這樣呢？來用chrome審查一下元素

原來，這個after選擇器是在「使用該選擇器的元素」的內容後追加，而不是<div id="main">這一行的後面追加的，目前這種狀況下，由於瀏覽器根據html的順序進行渲染，後渲染的蒙版天然會遮住先渲染的內容。既然這樣，使用before選擇器把蒙版加到#main層內容的最前面不就好了？說幹就幹，修改成before後效果是這樣的

奇怪的現象發生了，左邊絕對定位的側邊欄如願顯示，可是右邊浮動定位的內容區仍然在霧霾的籠罩下，也就是說：絕對定位的蒙版層沒有被後來的浮動定位的內容層覆蓋，爲了證實這個猜測，將內容區的定位方式由右浮動前後改成絕對定位和相對定位，結果以下:

絕對定位：

能夠看到改成絕對定位後，html代碼裏比蒙版層靠後的#mainContent如願顯示出來，又由於#sideBar更靠後，因此#sideBar的邊框是壓在#mainContent之上的（通過試驗，調換他們的html代碼順序會使得紅色在藍色之上，這裏再也不截圖說明）

相對定位：

和上面的狀況是同樣的，html中靠後的div會在更上層顯示

　　除此以外，我還作了幾回試驗，總結出來就是：不考慮z-index的狀況下，已經設置相對定位的父盒子內，絕對定位和相對定位的子盒子會顯示在浮動定位和標準文檔流中的盒子之上，而絕對定位和相對定位的盒子之間的顯示順序由他們html文檔中出現的順序決定，越晚出現的盒子顯示越靠上顯示，這個試驗的過程當中也加深了我對以前學習css定位時沒能徹底理解的一些理論的理解，好比：絕對定位脫離了標準文檔流，相對定位和浮動是仍在文檔流內（會對其餘元素產生影響）

　　有了理論的支持，再回到剛纔顯示的問題上：要想讓浮動定位的內容區顯示在相對定位蒙版層之上，只須要在浮動的基礎上爲它添加相對定位便可，效果以下

可是這個方法添加了額外的定位方式，增長了代碼量，若是在項目中咱們想要再增長一個甚至多個浮動的元素，難道要爲每個都設置相對定位嗎？這個問題既然來自蒙版層，那有沒有辦法經過修改蒙版層代碼來一勞永逸地使得全部其餘盒子正常顯示呢？答案是有的，方法就來自剛纔那句「不考慮z-index的狀況下」，首先將代碼還原爲左絕對右浮動，顯示效果爲：

咱們知道，z-index只能在設置了（relative absolute fixed）定位的元素上使用，對只浮動的mainContent是不起做用的，因此此次要從蒙版的z-index下手

　　第一步、爲父元素#main的z-index賦值，這裏我給了0，這一步的目的是使得他的子元素的z-index不管設置爲多少都將在該父元素中顯示（z-index的原理參考資料有不少，這裏再也不贅述）

　　第二步、將蒙版層的z-index設置爲-1（在不改動其餘元素z-index的狀況下，這個值已經足夠小以致於全部子元素都在他之上了）

來看最終的效果圖：

 

由於蒙版層被「壓」到了下面，因此未進行三種定位的元素也能夠顯示在它之上了!

對這個樣式有興趣的同窗能夠到個人Github下載，想要本身寫樣式的同窗也能夠從以前的版本中拿到最初的佈局修飾或者在下面留言找我拿代碼，能夠的話

https://github.com/iny7/Front-end/tree/master/cnblog

若是對你有用的話，請給我點個星喲^_^