码迷,mamicode.com
首页 > Web开发 > 详细

定制博客园CSS

时间:2015-10-24 06:40:11      阅读:330      评论:0      收藏:0      [点我收藏+]

标签:

一、选择一个博客皮肤

在定制CSS之前一定要先确定自己要先选择哪个皮肤,因为不同的皮肤其HTML结构以及class的设计和命名都不太一致,如果你在修改CSS后再更换皮肤的话,会造成部分CSS不对应,无法生效的情况。我个人选择了“BlackLowKey”这个相对比较中规中矩的皮肤。

二、所要定制的页面

一般来说,给别人看的页面是 首页 和 博文详情页,我个人的偏好还有 随笔分类列表页。所以我会对这三个页面进行CSS定制。

三、开始定制

如果觉得不需要原来皮肤的CSS,可以在设置里勾选“禁用模板默认CSS”,保存然后刷新自己博客的首页就会看到无CSS的博客首页;

技术分享

技术分享

四、最好用的前端CSS编辑器

最好用的CSS编辑器是什么?是浏览器,按F12或者右击审查元素吧。从导航条开始,嗨翻你的CSS吧;

温馨提示,你应该把浏览器打开两个窗口,随时把浏览器中做好的CSS复制到博客园的设置里面去,还要注意定期保存,比如两到三分钟;

你也可以把静态页面直接保存到本地,把CSS保存成文件,修改好一个页面再复制到博客园上去;

技术分享

五、最终预览

每个人有每个人的定制风格,不做一概而论。博客作为阅读功能为主的网站,配色上不宜大面积使用纯度过高的颜色,字体不要太小。动手期间可以多参考一下其他一些博客的颜色搭配,最好能找一个做设计的给你一些指导意见。

技术分享

六、其他页面

博文详情页和分类列表页也是用同样的方法去设计,当然大多数CSS是可以重用的,那么就可以在原来的CSS上再增加一个选择器就可以了。另外页首页脚还可以插入HTML和CSS来显示一些更个性化的内容,比如CSS3动画、SVG等。

PS:有一些不想看的页面部分可以使用 display:none; 让其不显示,以增加页面的简洁性。

 技术分享

七、我把自己的CSS贴出来,有兴趣的就试试吧

注意选择“BlackLowKey”皮肤和禁用默认样式,直接把下面这段CSS代码复制进去然后保存就行了

技术分享
@charset "utf-8";
    ul,li {
    margin: 0;
    padding: 0;
}
#home {
    background-color: #FFFCF4;
}
/*头部*/
#header {
    }
#Header1_HeaderTitle {
    font-size: xx-large;
    font-weight: bold;
    color: #090;
    font-family: Verdana, Geneva, sans-serif;
    text-shadow: 4px 3px 5px #999;
    text-decoration: none;
}
#blogTitle h2 {
    text-indent: 2em;
    font-size: large;
    font-weight: unset;
    color: gray;
    border-bottom: gray thin dashed;
}
#navList {
    height: 3em;
}
#navList>li {
    float: left;
    list-style: none;
    display: inline-block;
    padding: 0.5em 1em;
    margin: 0 0.5em;
    background-color: #FFFF99;
    border: #090 thin solid;
    box-shadow: 2px 2px 2px 2px #999;
    border-radius: 0em 1em 0em 1em;
}
#navList>li:hover {
    background-color: green;
}
#navList>li>a {
    color: black;
    font-weight: bold;
    text-shadow: 0px 0px 2px #999;
    text-decoration: none;
}
#navList>li>a:hover {
    color: white;
}
.blogStats {
    clear: both;
    margin-top: 0.5em;
    margin-bottom: 1em;
}
#main {
    width: 1300px;
    margin: auto;
    position: relative;
}
/*文章列表*/
.forFlow {
    }
.entrylistTitle {
    font-size: 1.5em;
    color: darkgoldenrod;
}
.day, .entrylistItem {
    background-color: #FDFDE2;
    margin: 2em;
    padding: 0.5em;
    padding-bottom: 2em;
    border: yellow thin solid;
    box-shadow: 2px 2px 2px 2px #999;
    border-radius: 0 2em 0 0;
    width: 750px;
}
.dayTitle {
    float: right;
}
.dayTitle>a {
    color: gray;
    text-decoration: none;
}
.postTitle, .entrylistPosttitle {
    font-size: large;
    font-weight: bold;
    border-bottom: gray thin solid;
}
.postTitle>a, .entrylistPosttitle>a {
    text-decoration: none;
    /*text-shadow: 0 0 2px #999;*/
    color: green;
}
.postTitle>a:hover {
    color: orange;
}
.postCon, .entrylistPostSummary {
    text-indent: 2em;
    margin-top: 1em;
    font-size: 0.9em;
}
.c_b_p_desc_readmore {
    color: red;
}
.c_b_p_desc_readmore:hover {
    color: green;
}
.postDesc, .entrylistItemPostDesc {
    float: right;
    color: gray;
    font-size: 0.8em;
}
/*上一页,下一页*/
.topicListFooter {
    width: 650px;
    margin-left: 2em;
    height: 25px;
}
#nav_next_page>a {
    text-decoration: none;
    background-color: #FDFDE2;
    margin-bottom: 2em;
    padding: 0.5em 2em;
    box-shadow: 1px 1px 2px 2px #999;
    border-radius: 0.5em 2em 2em 0.5em;
    float: right;
}
#nav_next_page>a:hover {
    color: white;
    background-color: green;
}
#footer {
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
}
/*右边栏*/
#sideBar {
    position: absolute;
    top: 0;
    right: 2em;
    width: 400px;
}
/*公告栏*/
.newsItem, .sidebar-block {
    background-color: #FFFCF4;
    padding: 0.5em 0.5em 1em 1em;
    border: thin solid #FF0;
    box-shadow: 0px 0px 5px 0px #999;
    margin-bottom: 2em;
}
#sideBar li {
    list-style: none;
}
#sideBar a {
    font-family: Verdana, Geneva, sans-serif;
    text-decoration: none;
    color: #39F;
}
#sideBar a:hover {
    color: green;
}
#RecentCommentsBlock {
    font-size: small;
}
/*博文详情*/
#topics, #blog-comments-placeholder, #comment_form_container {
    width: 830px;
    background-color: #FFFCF4;
    padding: 0.5em 0.5em 3em 1em;
    border: thin solid #FF0;
    box-shadow: 0px 0px 5px 0px #999;
    margin-bottom: 2em;
}
#blog-comments-placeholder {
    margin-bottom: 0;
}
.feedback_area_title {
    color: #008000;
    font-weight: bold;
    font-size: x-large;
    text-shadow: 0 0 1px yellow;
    border-bottom: thin solid green;
    margin-bottom: 2em;
}
.feedbackManage {
    float: right;
}
.feedbackManage a {
    color: gray;
}
.feedbackManage a:hover {
    color: green;
}
.feedbackItem {
    border: thin dashed gray;
    margin-bottom: 1em;
    padding: 10px;
}
.feedbackItem a {
    text-decoration: none;
}
.feedbackItem .layer {
    color: gray;
}
.feedbackItem .comment_date {
    color: green;
}
.blog_comment_body {
    margin-top: 10px;
    color: #444;
    font-family: serif;
}
#EntryTag,#BlogPostCategory {
    margin-top: 0px !important;
    border: 1px dashed rgb(192, 192, 192);
    padding: 0.5em;
    padding-left: 20px;
}
#EntryTag,#BlogPostCategory a {
    color: orange;
}
#EntryTag,#BlogPostCategory a:hover {
    color: #C00;
}
#post_next_prev {
    line-height: 1.8;
    background-color: #FDFDE2;
    border: thin solid #FF0;
    box-shadow: 2px 2px 2px 2px #999;
    display: inline-block;
    padding: 1em;
    font-size: 0.8em;
}
#post_next_prev a {
    color: green;
}
#post_next_prev a:hover {
    color: orange;
}
#BlogPostCategory, #comment_nav {
    margin 0;
}
#comment_nav {
    width: 830px;
    padding: 0.5em;
}
#comment_nav a {
    text-decoration: none;
    color: green;
}
#comment_nav a:hover {
    color: orange;
}
#comment_nav a:last-child {
    color: blue;
}
#site_nav_under, #opt_under_post, #google_ad_c1, #under_post_news, #google_ad_c2, #under_post_kb, #HistoryToday {
    display: none;
}
my cnblogs CSS code

定制博客园CSS

标签:

原文地址:http://www.cnblogs.com/batsing/p/4906060.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!