記一次博客頁面美化過程,分享代碼.

時間 2019-11-18

標籤一次博客頁面美化過程分享代碼简体版

原文原文鏈接

目錄css

註冊博客園帳號有一個多月了, 一切都很好, 但就一直以爲本身的博客頁面比較老土. 在首頁瀏覽時候發現一位博主的頁面挺乾淨整潔的, 並且他分享了製做的思路, 因而下定決心美化一番。本文將介紹美化的思路, 並貼上全部代碼, 俗話說授之以魚也要授之以漁。html

感謝熱心博主分享的攻略

致謝要寫在前面, 這位博主把他博客的整套CSS代碼都貢獻出來了, 在此基礎上進行修改變得十分容易. 秉承這種精神, 文章末尾也將奉獻上個人全部定製代碼, 若是哪位朋友想直接體驗如下, 直接複製就好了.
該博主的博客地址

1. Markdown美化

首先要美化的就是Markdown的顯示了. 第一次接觸Markdown是在註冊完Github建立一個新倉庫的時候, 寫README必須得用Markdown寫, 當時就以爲怎麼有這麼好看的排版.
後來在博客園上第一次用Markdown寫博客, 點完發佈回頭一看...???...
當時以爲這個估計是Markdown的變種, 也能湊合着用就沒管了.
如今知道了Markdown實際上是使文字經過某種CSS樣式美化後顯示出來而已, 既然這樣, 咱們能夠本身修改Markdown的顯示樣式.
這裏貼一段簡單的代碼演示修改的過程, 後面會貼上帶有註釋的完整代碼.

首先選中你要修改的地方, 而後在開發者工具中(谷歌瀏覽器快捷鍵F12)中直接對CSS樣式進行修改. (博主是後端方向, 也沒記得幾個CSS樣式, 基本都是邊查邊改哈)

修改獲得滿意的CSS樣式後, 把他複製到頁面定製CSS代碼欄中, 能夠經過個人博客->管理->設置找到該欄.

這樣便完成了一個樣式的美化。

2. 給博客頁面加上鼠標停留響應

我以爲現代網頁和十幾年前的網頁不一樣之處在於當你的鼠標滑過網頁, 各類模塊就不停的動, 交互感十足. 爲了能讓博客看起來更具科技性, 將來性(忍住別笑, 給後端小白一個裝比的機會), 我決定給博客首頁也加上這些效果.
本博客製做這種特效目前有三種思路:

Ⅰ. `div`容器的寬高發生改變

具體的CSS代碼以下:

#header #navigator ul li {
    float: left;
    width: 13%; /*div原來的寬度爲13%*/
    text-align: center;
    margin-right: 0px;
    background: #9e9e9e14;
    transition: width 0.5s; /*CSS3中引入的過渡功能, 意思是width屬性將會發生變化, 變化時間爲0.5秒*/
    -moz-transition: width 0.5s; /*後面幾個意思同樣, 多寫幾個爲了兼容不一樣的瀏覽器*/   
    -webkit-transition: width 0.5s;
    -o-transition: width 0.5s;
}
#header #navigator ul li:hover { /*hover即爲鼠標停留時的樣式*/
    width: 20%; /*寬度變爲20%*/
}

Ⅱ. 字體大小`font-size`發生變化

具體代碼以下:

.postTitle, .entrylistPosttitle {
    font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 1.8em;
    padding: 20px 20px 15px 0px;
    background: #fff;
    border-radius: 10px 10px 0px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: font-size 0.5s; /*這裏改變的是字體的大小*/
    -moz-transition: font-size 0.5s;
    -webkit-transition: font-size 0.5s;
    -o-transition: font-size 0.5s;
}
.postTitle:hover {
    font-size: 2em; 
}

Ⅲ. 給容器添加陰影效果

具體代碼以下

.search, .newsItem, .catListPostCategory, .catListPostArchive, .catListTag, .catListView, .catListBlogRank {
    background: #fff;
    margin-bottom: 30px;
    word-wrap: break-word;
    border-radius: 10px;
    margin-top: 10px;
    border: 2px solid #9E9E9E;
    transition: box-shadow 0.5s;
    -moz-transition: box-shadow 0.5s;
    -webkit-transition: box-shadow 0.5s;
    -o-transition: box-shadow 0.5s;
}
/*添加陰影*/
.newsItem:hover, .catListPostCategory:hover, .catListPostArchive:hover, .catListTag:hover, .catListView:hover, .catListBlogRank:hover {
    /* border: 5px solid; */
    box-shadow: 10px 10px 10px #9E9E9E;
}