定制博客园CSS

一、选择一个博客皮肤

在定制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

时间： 2024-10-20 06:23:11

定制博客园CSS的相关文章

博客园CSS代码

本博客前端页面的后台设置源码: 1,博客园CSS设置: @charset "utf-8"; body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体", Arial; min-width: 1200px; } #home { opacity: 0.95; filter: alpha(opacity=95); box-shadow: 0 0 10px #000;

博客园css美化

博客园css随鼠标变换的动态线条 http://www.cnblogs.com/Sharley/p/9603129.html https://blog.csdn.net/inuyasha1121/article/details/79309105 http://www.cnblogs.com/lzw123-/p/9394886.html https://www.cnblogs.com/qq597585136/p/7019755.html 原文地址:https://www.cnblogs.com/x

我的博客园CSS样式分享

过完年又开始上班了,已经从2月25连续加班到现在,晚上11点多才回去,也没时间写文章了. 先分享一下我的博客园的CSS吧. 我的博客皮肤最开始的时候是参考共享一下我的自定义CSS博客皮肤(2012.3) 修改的. 使用的是LessIsMore皮肤 下面是自定义的CSS样式 @charset "utf-8"; body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体&quo

分享下我的博客园CSS

今天没事瞎折腾博客园,对于HTML,css,js等 都是了解一点点. 我用的模板是: 修改后的样式为: \ css代码如下: 1 /* Minification failed. Returning unminified contents. 2 (623,18): run-time error CSS1036: Expected expression, found ';' 3 (781,42): run-time error CSS1062: Expected semicolon or closi

修改博客园css样式

看到一款博客园主题,感觉很好看,只是有些css样式不怎么满意,所以自己修改了下,修改的方法在这里记录了下.皮肤连接:https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/tree/v1.1.9 F12查看元素,就可以看到css样式的标签,在这里调试好后,拷贝出来就可以了. 关于css和js的压缩工具网址:http://tool.chinaz.com/Tools/CssFormat.aspx 原文地址:https://www.cnblogs.co

博客园 css页面定制代码

1.勾选"禁用模板默认CSS" 2.将下面代码粘贴到"页面定制CSS代码"部分 1 /*公用*/ 2 body { 3 font-size:15px; 4 padding:0; 5 margin:0; 6 font-family:"微软雅黑","宋体",Arial; 7 background:#205424 url('http://pic1.win4000.com/wallpaper/1/59705b12dec18.jpg')

又又的博客园css模板

下面的"图片地址"中填背景图片的地址,"#home"中的opacity表示透明度. 填上图片地址后直接将下面的代码复制到css码中即可. body { color: #000; background: url(图片地址) fixed; background-size: 1300px; background-repeat: no-repeat; font-family: "Helvetica Neue",Helvetica,Verdana,Aria

[美化] 博客园美化历程

目录 开端 具体的css 净化页面 标题的蜜汁动画 改一下主页的比例 另一些改动 侧边栏的html js代码的添加 在没有目录的情况下不显示目录 在url存在 article 的时候不显示版权声明 js附带的css js完整代码 结语 标题上写着美化,但怎么看自己的界面,仿佛每条线都在呐喊着:"实际上是简化吧!" /扶额 在入驻博客园的一周时间里,我使用各种课上时间抽空研究了一下博客园的页面定制CSS代码.HTML和JS这些看了半天也搞不明白的东西,并将原来的模板"Simpl

博客园样式自定义（待更新）

总感觉这件事情做的晚了哈哈. 以前写博客总是一个人默默地写,现在竟然出现了两个吐槽我挖坑不填的哈哈.(非常感谢~) 大概是终于有个人能够督促自己学习了,你们怎么不早点来?!!! 废话不多说,怎么定义博客园的代码呢. 步骤一,屏蔽掉博客园的皮肤样式 => 百度一下,你就知道 => 其实就是编辑里面 打个勾? 步骤二,如果你要修改JS => 在编辑的地方申请一下 => 一般都会马上批准的. 步骤三, 开工了. 当前要改进的还有很多,比如我觉得 编辑这东西就该放在右上角. 1.编辑栏要放