博客园自定义页面风格设计后续篇(页面设计模式及代码高亮鼠标点击效果升级)...-白红宇

前言

在之前所写过的中，我们已经说明了其中两种风格的页面设计，鼠标图案的修改，公告栏的设置，背景音乐的制作，关于CSS以及用Canvas和requestAnimFrame做动画特效，在本文中我们将教大家制作当前简约的页面制作方法。

只要你们有需求，我会尽量帮助到大家，在此感谢各位广大粉丝的支持和理解，我会尽量做到最好，希望小主们不要吝啬你们的支持和推荐，动动小手顶一顶，非常感谢大家长久的陪伴~~

全部过程都是在“管理->设置”中完成的，博客皮肤推荐使用Simple Memory，可以自适应，方便我们进行页面CSS定制

论如何改变自己的博客园，变得好不好看我就不敢保证了，也许会出现各种毛病QAQ

①拥有自己的CSS代码

我我直接用皮肤Simple Memory，没有禁用默认模板，然后当前页面的CSS代码如下：

1 body {  2     color: #000;  3     background: url(https://i.loli.net/2017/10/14/59e2065123072.jpg) fixed;  4     background-size: cover;  5     background-repeat: repeat;  6     font-family: "微软雅黑","Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;  7     font-size: 12px;  8     min-height: 101%;  9 } 10 #blogTitle h1 { 11     font-size: 50px; 12     font-family: Consolas; 13     font-weight: bold; 14     font-style: italic; 15     margin-top: 20px; 16 } 17 .catListTitle { 18     margin-top: 21px; 19     margin-bottom: 10.5px; 20     text-align: left; 21     border-left: 10px solid rgba(82, 168, 236, 0.8); 22     padding: 5px 0 5px 10px; 23     background-color: rgba(245,245,245,0.3); 24 } 25 #home { 26     margin: 0 auto; 27     width: 65%; 28     min-width: 950px; 29     background-color: rgba(255,255,255,0.8); 30     padding: 30px; 31     margin-top: 50px; 32     margin-bottom: 50px; 33     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 34 } 35 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory { 36     background: none; 37     margin-bottom: 35px; 38     word-wrap: break-word; 39 } 40 #blog-calendar td { 41     font-size: 12px; 42     font-family: Consolas; 43 } 44 .input_my_zzk { 45     border: 1px solid #ccc; 46     background: none; 47     width: 100%; 48     height: 25px; 49     padding-right: 30px; 50     padding-left: 5px; 51     outline: 0; 52 } 53 .CalDayHeader { 54     background: rgba(245,245,245,0.3) !important; 55     font-weight: 100; 56     color: #5E5F63; 57 } 58 .CalTitle { 59     background: none; 60     width: 100%; 61     height: 25px; 62     text-align: center; 63     font-size: 14px; 64     font-weight: bold; 65     padding: 5px 0; 66     color: #FFF; 67 } 68 .CalTitle td { 69     background: rgba(245,245,245,0.3) !important; 70     border: 0px !important; 71     color: #5E5F63; 72     font-family: "Comic Sans MS"; 73 } 74 a:link { 75     color: cornflowerblue; 76 } 77 a:visited { 78     color: cornflowerblue; 79 } 80 a:hover { 81     color:cadetblue; 82 } 83 a:active { 84     color:black; 85 } 86 .CalTodayDay { 87     background: rgba(247,247,247,0.3) !important; 88     color: #FFF; 89     font-weight: bold; 90 } 91 .cnblogs_code { 92     background-color: rgba(247,247,247,0.3); 93     font-family: Consolas !important; 94     font-size: 12px!important; 95     border: 1px solid #ccc; 96     padding: 5px 10px; 97     overflow: auto; 98     margin: 5px 0; 99     color: #000;100 }101 .cnblogs_code div {102     background-color: rgba(247,247,247,0.3);103 }104 .cnblogs_code_collapse {105     border-right: gray 1px solid;106     border-top: gray 1px solid;107     border-left: gray 1px solid;108     border-bottom: gray 1px solid;109     background-color: rgba(247,247,247,0.3);110     padding: 2px;111 }112 blockquote {113     background: rgba(247,247,247,0.3);114     border: 2px solid #efefef;115     padding-left: 10px;116     padding-right: 10px;117     padding-top: 5px;118     padding-bottom: 5px;119     margin-top: 10px;120     margin-bottom: 10px;121 }122 div.commentform input.author, div.commentform input.email, div.commentform input.url {123     background-image: url(http://static.cnblogs.com/images/icon_form.gif);124     border: 1px solid white !important;125     padding: 4px 4px 4px 30px;126     width: 300px;127     font-size: 13px;128     background-color: rgba(247,247,247,0.3);129 }130 #comment_form_container .comment_textarea {131     width: 362px;132     height: 200px;133     font-size: 13px;134     padding: 8px;135     margin-bottom: 10px;136     color: #555;137     border: 1px solid white;138     border-radius: 3px;139     -moz-border-radius: 3px;140     -webkit-border-radius: 3px;141     background-color: rgba(247,247,247,0.3);142 }143 .cnblogs_code pre {144 font-family: Consolas !important;145 font-size: 12px!important;146 word-wrap: break-word;147 white-space: pre-wrap;148 }149 .cnblogs_code span {150 font-family: Consolas !important;151 font-size: 12px!important;152 line-height: 1.5!important;153 }154 div#cnblogs_c2 {155 display: none;156 }157 div#cnblogs_c1 {158 display: none;159 }160 div#under_post_news {161 display: none;162 }163 div#ad_t2 {164 display: none;165 }166 div#under_post_kb {167 display: none;168 }169 .feedbackItem {170     margin: 10px 5px 0px;171     padding: 5px;172     box-shadow: 0 0 10px 0 #AAA;173 }174 #topics .postTitle {175     font-size:230%;176 }177 .postTitle a:link, .postTitle a:visited, .postTitle a:active {178     color: #21759b;179     transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;180 }181 #cnblogs_post_body h2 {182     border-left: 10px solid rgba(82, 168, 236, 0.3);183     background: rgba(247,247,247, 0.3);184     padding: 3px 10px;185 }186 #cnblogs_post_body h3{187     border-left: 5px solid rgba(0, 235, 255, 0.3);188     padding: 2px 5px;189     background: rgba(247,247,247,0.3);190 }191 #cnblogs_post_body h4{192     border-left: 5px solid rgba(222, 101, 114,0.3);193     padding-left: 5px;194     background: rgba(247,247,247,0.3);195 }196 #cnblogs_post_body h1{197     background: rgba(247,247,247,0.3);198     border-left: 15px solid rgba(0, 122, 255, 0.3);199     padding: 3px 10px;200     font-size: 175%;201     border-right: 15px solid rgba(0, 122, 255, 0.3);202 }203 .buryit {204     display: none;205 }206 #div_digg {207     float: right;208     position: fixed;209     width: auto;210     bottom: 10px;211     left: 70%;212     margin-bottom: 10px;213     background: rgba(247,247,247,0.3);214     margin-right: 30px;215     font-size: 12px;216     box-shadow: 0 0 10px 0 #AAA;217     padding: 10px;218     border: 2px solid rgba(82, 168, 236, 0.8);219     text-align: center;220     margin-top: 10px;221 }222 textarea {223     background: rgba(247,247,247,0.3);224 }225 body{
   cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}226 A{
   cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}227 228 #navigatorTitleDiv229 {230     padding: 3px;231     position: fixed;232     top:244px; 233     right:304px;234     font-weight:bold;235     cursor:pointer;236     background-color: antiquewhite;237 }238 239 #navigatorDiv 240 {241     border-style:double;242     padding: 10px;243     padding-top:30px;244     position: fixed;245     top:240px; 246     right:300px;247     background-color: antiquewhite;248 }249 250 /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */251 .pln{
   color:#4d4d4c}ol.linenums{
   margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{
   padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{
   .str{color:#718c00}.kwd{
   color:#8959a8}.com{
   color:#8e908c}.typ{
   color:#4271ae}.lit{
   color:#f5871f}.pun{
   color:#4d4d4c}.opn{
   color:#4d4d4c}.clo{
   color:#4d4d4c}.tag{
   color:#c82829}.atn{
   color:#f5871f}.atv{
   color:#3e999f}.dec{
   color:#f5871f}.var{
   color:#c82829}.fun{
   color:#4271ae}}252 253 /*下面是我设置背景色，字体大小和字体*/254 .cnblogs-markdown code{255 background:#fff!important;256 }257 .cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{258     font-size:16px!important;259 }260 261 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {262     font-size: 16px!important;263 }264 265 .cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{266 font-family:consolas, "Source Code Pro", monaco, monospace !important;267 }

②鼠标点击效果升级

最近发现一些人的博客鼠标点击页面会跳出文字出来，有些还会有爱心的点击效果，诶，这个是怎么做出来的，聪明可爱机智的我决定去扒一扒，F12后进行分析，我发现了制作方法，然后研究做出了字样效果，具体实现方法如下：

还真别说，一波神奇的操作~~~

③代码高亮设置

此篇参考rwj学姐的文章写的，学姐真的好棒啊，It's crazy！！！

不管了，Google-Code-Prettify代码高亮效果就是棒(๑•̀ㅂ•́)و

首先说一下用pretty的缺点

之前的TinyMCE编辑器下发布代码，如果是插入代码的两个按钮里的右边的那个，pretty渲染后会变成错乱的，<span>标签都会显示出来。
解决方法就是手动去改以前的文章（这个过程可以让你逃避一下复杂的现实世界，还可以回顾一下以前写过的东西，好吧。。其实就是要花很长时间去干重复的工作）。

如果要设置行号，Markdown编辑模式的代码会渲染成一行一块，很奇怪，因为每一行都有<code>标签，所以只好选择不要行号。

接下来是设置的步骤

首先要确保你已经开启js功能。

jQuery博客园已经自动加载了。就不用我们加了。

prettify.js是在这里下载的：

博客设置页面的页脚Html代码：

配色和字体

默认的配色不喜欢，可以设置css，推荐参考https://jmblog.github.io/color-themes-for-google-code-prettify/ 例如我的就是：

/*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */.pln{color:#4d4d4c}ol.linenums{margin-top:0;margin-bottom:0;color:#8e908c}li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9{padding-left:1em;background-color:#fff;list-style-type:decimal!important;}@media screen{.str{color:#718c00}.kwd{color:#8959a8}.com{color:#8e908c}.typ{color:#4271ae}.lit{color:#f5871f}.pun{color:#4d4d4c}.opn{color:#4d4d4c}.clo{color:#4d4d4c}.tag{color:#c82829}.atn{color:#f5871f}.atv{color:#3e999f}.dec{color:#f5871f}.var{color:#c82829}.fun{color:#4271ae}}/*下面是我设置背景色，字体大小和字体*/.cnblogs-markdown code{background:#fff!important;}.cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{    font-size:16px!important;}.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea {    font-size: 16px!important;}.cnblogs_code, .cnblogs_code span, .cnblogs-markdown .hljs{font-family:consolas, "Source Code Pro", monaco, monospace !important;}

然后就很OK了qwq！！！

您可以考虑给博主来个小小的打赏以资鼓励，您的肯定将是我最大的动力。thx.

微信打赏

支付宝打赏

作　　者：

出　　处：

关于作者：潜心机器学习以及信息安全的综合研究。如有问题或建议，请多多赐教！

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者我

声援博主：如果您觉得文章对您有帮助，可以点击右下角【】推荐一下该博文。您的鼓励是作者坚持原创和持续写作的最大动力！