如何讓博客變得稍稍好看

  這是第一次寫博客玩，也是第一次使用markdown寫東西(一邊看着語法一邊寫的來着)，不過進步仍是有滴~
  申請博客之後，趕忙去翻了一下wjj童鞋的博客，發現他的封面是這樣的：

  嗯……不得不說，這個網站的確是有一丟丟醜。不過怎麼能讓它影響好心情呢，因而便去探索了一下。果真，在博客的設置裏發現了玄機，這個網站是支持頁面定製CSS代碼的,也就是說,能夠用本身編寫的CSS代碼私人定製博客風格。果真是一個程序員聚居的區域，本身動手，豐衣足食。

  因而嘗試稍稍美化了一下本身的博客，也把過程和你們分享一下。

  首先看看咱們要美化的網站結構是怎樣的，在設置中勾選禁用模板默認CSS,保存之後打開博客主頁，能夠發現變成了這個更醜的樣子，此即不通過任何排版,網站自己的樣子。

  將禁用模板默認CSS的勾去掉並保存之後，網站就變回了以前所選擇的皮膚，其實所謂的選擇皮膚，也就是選擇對應的已經寫好的CSS文件。咱們要作的事情，就是閱讀這個CSS文件，並根據本身的審美對它進行部分的重寫。

  打開本身博客主頁，右鍵將網頁的源碼存到本地，能夠發現同時保存到本地的有三個css文件，分別是：

• blog-common.css
• bundle-darkgreentrip.css
• bundle-darkgreentrip-mobile.css
  
  

  打開這些文件看看之後發現，除了bundle-darkgreentrip.css之外，其餘兩個文件的排版都很混亂，因而合理推斷這個css文件就是咱們要修改的部分。css文件是用來對html文件中的內容進行排版的，可是它是怎麼精確識別每段代碼是描述html那個部分的格式的呢？奧祕就在於選擇器。打開保存的html文件能夠看到，幾乎每個塊語句都有一個id屬性，這就至關於這個塊語句的名字，css文件就是依靠這些id選擇器來定位描述的內容的。除了id選擇器，還有屬性選擇器、類選擇器等等許多，不過這裏咱們只要知道id選擇器，就大概能找到想要修改的代碼在什麼位置了。那麼，我就開始DIY了~（Ps:我使用的基礎代碼是一款叫 darkgreentrip的皮膚）

  首先想到的是界面的一片白色實在太空曠了，若是能有一張背景圖片就行了。想要修改整個網頁的背景，須要更改的是 body的樣式，原代碼以下：

body {
	color: #000;
	background: #D2D8DE;
    font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size:14px;
	min-height: 101%;
}

  我在圖片網站PEXELS上找了一張喜歡的高清圖片，獲取了它的url，由於圖片可能沒法鋪滿整個網頁，向下滾動的時候看到未鋪滿的地方就很難看，所以設置background-attachment屬性爲fixed，表示頁面滾動的時候圖片始終固定在屏幕相同位置，又調整了圖片的大小和位置，最終修改爲了以下的樣子：

body {
	color: #000;
	background: rgba(218, 210, 222, 0.67);
    background-image: url(https://images.pexels.com/photos/106567/pexels-photo-106567.jpeg?w=940&h=650&auto=compress&cs=tinysrgb);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position:0 -150px;
    background-attachment:fixed;
    font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size:14px;
	min-height: 101%;
}

  打開看一下效果，頓時漂亮了很多（必定是圖片選的好哈哈哈）
  接下來是菜單欄，黑色的配色比較漂亮，可是擋住了背景圖片就不太好了，再有就是菜單欄的棱角顯得太死板，因而我調整了菜單欄的透明度和弧度，原來的代碼以下：

#navigator {
	background-color: black;
	height: 60px;
	line-height: 60px;
    overflow: hidden;
	clear: both;
}

  修改後的代碼以下：

#navigator {
	background-color: rgba(48, 38, 52, 0.68);
	height: 60px;
	line-height: 60px;
	overflow: hidden;
	clear: both;
    border-radius: 6px;
}

  再有就是博客的標題，實在太平凡了，因而我調整了一下標題的字體，並利用text-shadow屬性給文字加上了陰影。text-shadow屬性的第一個值表示水平位移，第二個值表示垂直位移，正值爲偏右或偏下，負值爲偏左或偏上，第三個值表示模糊半徑，第四個值表示陰影的顏色。text-shadow屬性能夠接受一個以逗號分割的陰影效果列表，並應用到該元素的文本上。合理利用text-shadow屬性，能夠作出各類漂亮的效果。text-shadow屬性是css3提供的，由此也說明博客定製css代碼是支持css3的，提供了更多的可能性。

  修改前的代碼爲：

#blogTitle h1 {
	font-size: 150%;
	font-weight: bold;
	line-height: 1.5;
	margin-left: 1em;
	margin-top: 10px;
	width: 50%;
	float: left;
}

  修改後的代碼爲：

#blogTitle h1 {
	font-size: 150%;
	font-weight: bold;
    font-family: "Comic Sans Ms",cursive,sans-serif;
	line-height: 1.5;
	margin-left: 1em;
	margin-top: 10px;
	width: 50%;
	float: left;
    text-shadow: 0 0 10px #255834,
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #5cc384,
    0 0 70px #4a8862,
    0 0 80px #44815c,
    0 0 100px #467e5b,
    0 0 150px #275338;
}

  最後微調一下其餘的字體顏色以及連接不一樣狀態的顏色。將修改後代碼粘貼到設置頁面對應的文本框內，保存查看，就能夠看到本身的成果啦~

  固然，因爲時間有限，我完成的只是對已有css代碼的簡單修改，實際上根據已有的html文件，從新寫一個屬於本身的皮膚也不是沒有可能；此外，上文已經說到css3是被支持的，css3提供了許多特性，能夠作出至關酷炫的特效，之後有空不妨嘗試一下；再有就是在頁面定製CSS代碼的下方，還有側邊欄公告、頁首、頁腳的html文本框，能夠修改html代碼增長自定義的模塊，往後也要體驗一下。