如何让博客变得稍稍好看
??這是第一次寫博客玩，也是第一次使用markdown寫東西(一邊看著語法一邊寫的來著)，不過進步還是有滴~
??申請博客以后，趕緊去翻了一下wjj童鞋的博客，發(fā)現(xiàn)他的封面是這樣的：
??嗯……不得不說，這個網(wǎng)站的確是有一丟丟丑。不過怎么能讓它影響好心情呢，于是便去探索了一下。果然，在博客的設(shè)置里發(fā)現(xiàn)了玄機，這個網(wǎng)站是支持頁面定制CSS代碼的,也就是說,可以用自己編寫的CSS代碼私人定制博客風(fēng)格。果然是一個程序員聚居的區(qū)域，自己動手，豐衣足食。
??于是嘗試稍稍美化了一下自己的博客，也把過程和大家分享一下。
??首先看看我們要美化的網(wǎng)站結(jié)構(gòu)是怎樣的，在設(shè)置中勾選禁用模板默認CSS,保存以后打開博客主頁，可以發(fā)現(xiàn)變成了這個更丑的樣子，此即不經(jīng)過任何排版,網(wǎng)站本身的樣子。
??將禁用模板默認CSS的勾去掉并保存以后，網(wǎng)站就變回了之前所選擇的皮膚，其實所謂的選擇皮膚，也就是選擇對應(yīng)的已經(jīng)寫好的CSS文件。我們要做的事情，就是閱讀這個CSS文件，并根據(jù)自己的審美對它進行部分的重寫。
??打開自己博客主頁，右鍵將網(wǎng)頁的源碼存到本地，可以發(fā)現(xiàn)同時保存到本地的有三個css文件，分別是：
- blog-common.css
- bundle-darkgreentrip.css
- bundle-darkgreentrip-mobile.css
??打開這些文件看看以后發(fā)現(xiàn)，除了bundle-darkgreentrip.css以外，其他兩個文件的排版都很混亂，于是合理推斷這個css文件就是我們要修改的部分。css文件是用來對html文件中的內(nèi)容進行排版的，但是它是怎么精確識別每段代碼是描述html那個部分的格式的呢？奧秘就在于選擇器。打開保存的html文件可以看到，幾乎每一個塊語句都有一個id屬性，這就相當(dāng)于這個塊語句的名字，css文件就是依靠這些id選擇器來定位描述的內(nèi)容的。除了id選擇器，還有屬性選擇器、類選擇器等等許多，不過這里我們只要知道id選擇器，就大概能找到想要修改的代碼在什么位置了。那么，我就開始DIY了~（Ps:我使用的基礎(chǔ)代碼是一款叫darkgreentrip的皮膚）
??首先想到的是界面的一片白色實在太空曠了，如果能有一張背景圖片就好了。想要修改整個網(wǎng)頁的背景，需要更改的是body的樣式，原代碼如下：
body {color: #000;background: #D2D8DE;font-family: Verdana,Arial,Helvetica,sans-serif;font-size:14px;min-height: 101%; }
??我在圖片網(wǎng)站PEXELS上找了一張喜歡的高清圖片，獲取了它的url，因為圖片可能無法鋪滿整個網(wǎng)頁，向下滾動的時候看到未鋪滿的地方就很難看，因此設(shè)置background-attachment屬性為fixed，表示頁面滾動的時候圖片始終固定在屏幕相同位置，又調(diào)整了圖片的大小和位置，最終修改成了如下的樣子：
??打開看一下效果，頓時漂亮了不少（一定是圖片選的好哈哈哈）
??接下來是菜單欄，黑色的配色比較漂亮，但是擋住了背景圖片就不太好了，再有就是菜單欄的棱角顯得太死板，于是我調(diào)整了菜單欄的透明度和弧度，原來的代碼如下：
??修改后的代碼如下：
??再有就是博客的標題，實在太平凡了，于是我調(diào)整了一下標題的字體，并利用text-shadow屬性給文字加上了陰影。text-shadow屬性的第一個值表示水平位移，第二個值表示垂直位移，正值為偏右或偏下，負值為偏左或偏上，第三個值表示模糊半徑，第四個值表示陰影的顏色。text-shadow屬性可以接受一個以逗號分割的陰影效果列表，并應(yīng)用到該元素的文本上。合理利用text-shadow屬性，可以做出各種漂亮的效果。text-shadow屬性是css3提供的，由此也說明博客定制css代碼是支持css3的，提供了更多的可能性。
??修改前的代碼為：
??修改后的代碼為：
#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; }??最后微調(diào)一下其他的字體顏色以及鏈接不同狀態(tài)的顏色。將修改后代碼粘貼到設(shè)置頁面對應(yīng)的文本框內(nèi)，保存查看，就可以看到自己的成果啦~
??當(dāng)然，由于時間有限，我完成的只是對已有css代碼的簡單修改，實際上根據(jù)已有的html文件，重新寫一個屬于自己的皮膚也不是沒有可能；此外，上文已經(jīng)說到css3是被支持的，css3提供了許多特性，可以做出相當(dāng)酷炫的特效，以后有空不妨嘗試一下；再有就是在頁面定制CSS代碼的下方，還有側(cè)邊欄公告、頁首、頁腳的html文本框，可以修改html代碼增加自定義的模塊，日后也要體驗一下。
轉(zhuǎn)載于:https://www.cnblogs.com/xiaofulan/p/8682466.html
總結(jié)
以上是生活随笔為你收集整理的如何让博客变得稍稍好看的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringMVC与Ajax交互
- 下一篇： delphi 更改DBGrid 颜色技巧