個人博客園樣式、背景及細節美化過程

番茄西紅柿發布于2019-04-23 13:10 / 3468人閱讀

摘要：踩坑注意導入后要勾選禁用默認否則會造成各種顯示問題我的文件可以右鍵查看網頁源代碼獲取，使用時基于主題，懶得折騰的可以直接下載。

主頁美化：

主要參考嘻哈燒餅的美化，在TA的基礎上增加了對主頁背景、色調以及側邊欄的調整

原帖地址：https://www.cnblogs.com/seanshao/p/5716543.html

修改博客園背景的代碼如下（在原帖使用的css文件中修改）：

body {
    color: #000;

    background:url(https://www.cnblogs.com/images/cnblogs_com/Keenster/1344881/o_169wallhaven-599106.jpg) fixed;
    background-position:center;
    background-size:cover;
    background-repeat: no-repeat;
    font-family: "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 14px;
    min-height: 101%;
}

修改主副標題顏色的代碼如下（在原帖使用的css文件中修改）：

/*主標題格式*/
    #blogTitle h1 {
        font-size: 26px;
        font-weight: bold;
        line-height: 1.8em;/*原始 1.6em*/
    }

        #blogTitle h1 a {
            color: #ffffff;
        }
            /*超鏈接顏色*/
            #blogTitle h1 a:hover {
                /*color: #21759b;*/
            }
    /*次標題格式*/
    #blogTitle h2 {
        font-weight: normal;
        font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
        line-height: 1.8;
        color: #ffffff;
        float: left;
        white-space: nowrap;        
    }

修改側邊欄頭像、圖像居中，并添加超鏈接的代碼如下：（在側邊欄公告中修改，而不是在css中修改）

至于返回頂部按鈕，博文大小標題分類，直接使用了原帖的代碼，就不一一列出了。

踩坑注意：css導入后要勾選“禁用默認css”否則會造成各種顯示問題

我的css文件可以右鍵查看網頁源代碼獲取（bundle-SimpleMemory-A5_v308.css），使用時基于SimpleMemory主題，懶得折騰的可以直接下載。

下載后，請上傳到博客文件中，并按如下格式在頁首html中添加代碼：

<link type="text/css" rel="stylesheet" href="http://files.cnblogs.com/files/Keenster/bundle-SimpleMemory-A5_v308.css"/>

細節美化：

愛心特效、添加右上角github圖標，主要參考Zhang_derek的美化

原帖地址：http://www.cnblogs.com/derek1184405959/p/9018285.html

鼠標點擊時的愛心特效代碼如下：（側邊欄中修改）

添加github鏈接的代碼如下：（在頁首html中添加）

<a href="https://github.com/qq849012418?tab=repositories" title="我的github地址" target="_Blank" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#FD6C6C; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z">path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm">path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body">path>svg>a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}style>

待完成的美化：

導航欄自動分類、增強分享等，待博客內容更豐富時再嘗試。

GPU云服務器云服務器博客園個人云服務器博客園博客園webrtc wcf博客園

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1528.html

博客園個人主頁美化

摘要：剛入博客園，小白也要有一個高大上的個人博客頁面啊，鼓搗了一下午，感覺自己棒棒的，叉腰得瑟個人感覺的主頁樣式很美觀，大氣，哈哈首先，在博客園后臺管理的設置里，申請代碼的權限默認是沒有打開的申請的時候一定要有禮貌，有禮貌，有禮貌申請了三次才通，剛入博客園，小白也要有一個高大上的個人博客頁面啊，鼓搗了一下午，感覺自己棒棒的，叉腰得瑟個人感覺Simple的主頁樣式很美觀，大氣，哈哈首先，在博...

zsirfs 2019-04-23 13:18 評論0 收藏0
前端小白也能快速學會的博客園博客美化全攻略

摘要：前端小白也能快速學會的博客園博客美化全攻略呦，博客園的自我修養是什么第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔美化方法論簡介一般而言，需要選一個默認的，然后在該基礎上調整。或者也可進博客園園子頁面，發狀態博客園團隊，申請開通權限。前端小白也能快速學會的博客園博客美化全攻略 A呦V，博客園er的自我修養是什么？第一條，別只顧收藏和偷師呀，記得點推薦或關注本人喔~ 美化方法論簡...

StonePanda 2019-08-23 15:09 評論0 收藏0
[學習交流]博客園 cnblog 添加github鏈接和自定義美化學習

2018.12.30更新 --------------------------------------------------------------------分割線--------------------------------------------------------------------------------- 認識博客園的組件選擇皮膚：設置-博客設置-（該皮膚為簡潔）下面...

番茄西紅柿 2019-04-23 11:57 評論0 收藏0
Web前端：博客美化：一、模板美化

1、選用模板simplememory 2、寫css放在這些會覆蓋掉原來的css樣式我是在網上找的css代碼二次加工的 : ） /*1、針對simplememory的修改*/ #google_ad_c1, #google_ad_c2 {display:none;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter ...

Bamboy 2019-04-23 11:51 評論0 收藏0
博客園自定義樣式

摘要：個人比較喜歡用來編寫博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。還好，博客園比較人性化的有頁面樣式的自定制功能。碎碎念：已經很長時間沒有更新過博客了，分析一下，一個是太懶了。。。所以很久沒整理一下了。還有就是嫌棄博客園默認的博客界面真的太丑了，作為顏控的我真的無法忍受啊。個人比較喜歡用makedown來編寫博客，但是博客園自帶的編輯器真的不是很友好啊。。。。。還...

ASCH 2019-08-29 14:16 評論0 收藏0