设置页面

1、首先打开自己的博客主页，依次选择管理---设置，这样我们就来到了首页的定制页面啦！

2、下面以本人的博客为例为大家展示：

页面定制CSS代码

定制个性化页面，需要大家能读懂一点CSS代码，当然不懂也没关系，大家可以在网上搜索自己喜欢的代码，本人比较喜欢简洁风格。这里将从正文标题设置、主页导航栏和头部设置给大家介绍。

正文标题设置

设置后，在编写正文时，设置文字大小和字体，提交后博客的正文将自动排版为设定好的格式和颜色。

这里提供一种格式的范例代码供大家参考。只需将一下代码复制到页面定制CSS代码框中即可。

/*标题*/

#cnblogs_post_body h1 {

background: gray !important;

background: #406CA4 !important;

border-radius: 4px 4px 4px 4px !important;

box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

color: #FFFFFF;

font-family: Courier New, 宋体, 黑体, Arial;

font-size: 16px;

font-weight: bold;

margin: 15px 0 !important;

padding: 5px 0 5px 20px;

}

#cnblogs_post_body h2 {

/*background: none repeat scroll 0% 0% rgb(43, 102, 149);*/

border-radius: 6px 6px 6px 6px;

//box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

color: #355681;

font-family: Courier New,宋体,黑体,Arial;

font-size: 14px;

font-weight: bold;

height: 25px;

line-height: 25px;

margin: 15px 0px !important;

padding: 5px 0px 5px 20px;

// text-shadow: 2px 2px 3px rgb(34, 34, 34);

width: 98%;

}

#cnblogs_post_body h2 a{

color: rgb(235, 235, 235);

}

#cnblogs_post_body h2 a:hover{

color: rgb(255, 102, 0);

}

主页导航栏和头部设置

设置后，主页的头部和导航栏会有明显变化。设置原理同上，复制代码即可。这里同样提供一种设置样板。

/*****home和头部开始**************************/

#home {

margin: 0 auto;

width: 72%;/*原始65*/

min-width: 980px;/*页面的最低宽度,也就是页面顶部的宽度*/

background-color: #fff;

padding: 30px;

margin-top: 50px;

margin-bottom: 50px;

box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

}

/*头部导航栏*/

#navigator {

font-size:15px;

border-bottom: 1px solid #ededed;

border-top: 1px solid #ededed;

height: 60px;/*导航栏高度，原始50*/

clear: both;

margin-top: 25px;

}

/*导航栏设置,可以自定义导航栏的目录*/

#navList {

min-height: 35px;

float: left;

}

#navList li { /*每一个栏目节点*/

float: left;

margin: 0 5px 0 0; /*这里原来是0 40px 0 0 */

}

#navList a { /*栏目文字的格式*/

display: block;

width: 5em;

height: 22px;

float: left;

text-align: center;

padding-top: 19px;

}

img {

max-width: 100%;

}

设置GitHub访问网址

如果各位有其他的微博或者GitHub想要在主页展示，可以通过设置公告栏和页首Html代码来实现，具体如下：

a href=自己的新浪微博地址 target=_blankimg border=0 src=http://service.t.sina.com.cn/widget/qmd/新浪微博号/f729d6d3/5.png/a

br/br

a href=自己的GIthub地址img style=position: absolute; top: 0; right: 0; border: 0; src=https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67 alt=Fork me on GitHub data-canonical-src=https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png/a

设置后保存

设置完毕后一定要点击保存按钮，刷新主页即可看到效果。

博客园可以设置出漂亮的个性首页，这需要一点点慢慢的耐心测试

欢迎一起交流学习，个人经验，仅供参考。