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

本文轉載自查看原文 2019-05-02 07:41 1968 博客園頁面美化/ JavaWeb/ 博客園定制css

感謝熱心博主分享的攻略
1. Markdown美化
2. 給博客頁面加上鼠標停留響應
3. 處理一些細節
4. 源碼分享
- 點擊此處跳轉到Github

注冊博客園賬號有一個多月了, 一切都很好, 但就一直覺得自己的博客頁面比較老土. 在首頁瀏覽時候發現一位博主的頁面挺干凈整潔的, 而且他分享了制作的思路, 於是下定決心美化一番。本文將介紹美化的思路, 並貼上所有代碼, 俗話說授之以魚也要授之以漁。

感謝熱心博主分享的攻略

致謝要寫在前面, 這位博主把他博客的整套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;
}