想做一个文艺而专业的编程技术博客 :)

博客定位

编程大观园,正如其名,探索和汇萃各种编程思想、技术、技能、技巧,并融入自己对编程开发、产品研发的思考和探索。

分类与标签

     好的博客分类能让访客迅速找到自己感兴趣的内容。

分类主要有两种形式: 主题式分类和标签式分类。主题式分类是纵向的,重量级的,有用且感兴趣的、围绕对博客的定位而形成的博文宏观结构;标签式分类是横向的,轻量级的,灵活的,围绕博文所涉及的点而铺开。比如“编程技术、编程语言”可以作为一个主题大类,而相关的博文有含代码和观点论述的;那么“程序”就可以作为一个标签。标签的选择通常是“两字,常用,细化”为佳。

好的主题分类能让博客一目了然,好的标签则是对博文的很好的索引。

页面布局

页面布局主要是横向导航, 侧边栏导航。 侧边栏究竟放在左边还是右边呢? 如果想直接浏览和专注于内容, 内容放在左边似乎更符合习惯; 不过也没有绝对的论断。重点是突出博文内容。比如 BOOK 的模板就做得更好,将内容以书页的形式展示出来,很令人舒适,只是侧边栏做得太 plain 了,因而没有采用。

页面美化

首先,依个人喜好选定一个模板,比如我选择的夏日芝兰,比较文艺而且清新简洁;

接着,可以在其基础上进行页面美化。美化只需要基本的CSS知识,通常是字体、边框、颜色、对齐、间距, Plus 一点点设计的知识。如果是Chrome 浏览器,右键选择“审查元素”,查看源代码,找到对应的元素进行样式调整,OK后记录下来;这样会形成一个文档,复制到 “博客后台管理-设置-页面CSS” 的文本区域即可。

定制CSS:

#blogTitle h2 {
margin-left: 49px;
margin-top: 5px;
font-family: 华文行楷;
font-size: 16px;
} #navigator {
margin-top: 16px;
font-size: 15px;
} .dayTitle {
display:none;
} #sideBar {
padding: 0px 10px 10px 15px;
border-top: 3px outset #FAF7EF;
border-left: 3px outset #FAF7EF;
bborder-bottom: 3px outset #FAF7EF;
margin: 0 0 0 10px;
border-radius: 10px;
} #blog-news,#calendar,#sidebar_search,#sidebar_toptags,
.catListPostCategory, #sidebar_categories.catListPostArchive
.catListImageCategory, #recent_comments_wrap, #sidebar_topviewedposts
#sidebar_topcommentedposts, topfeedback_posts_wrap, #sidebar_topdiggedposts{
margin: 0 5px 5px 0;
} .day,.entrylist {
padding: 20px 10px 0 15px;
border: 3px solid #FAF7EF;
margin: 0 0 0 -10px;
border-radius: 10px;
} .catListTitle {
margin: 15px 0 5px 0;
text-align:left;
} #post_detail {
border: 3px outset #FAF7EF;
padding: 15px;
background-color: #F6EAFC;
border-radius: 15px;
margin-left: -10px;
} #comment_form_container,#comment_nav {
border: 3px outset #FAF7EF;
padding: 15px;
background-color: #F6EAFC;
border-radius: 15px;
margin-left: -10px;
} .entrylistDescription {
margin-bottom: 20px;
padding-right: 0px;
} .entrylistPosttitle {
border-bottom: none;
} .entrylistTitle, .PostListTitle, .thumbTitle {
border-bottom: 1px dotted #6466b3;
} #Header1_HeaderTitle {
font-family: 隶书;
font-size: 32pt;
margin: 5px 0 30px 0;
} #ad_t2, #ad_c1, #under_post_news, #ad_c2, .c_ad_block {
display:none;
} #under_post_kb {
font-size: 14px;
} /* Markdown CSS */ .cnblogs-markdown {
font-size:14px;
font-family: 微软雅黑,宋体;
} .cnblogs-markdown h2,h3 {
 margin-top: 20px; 
} .cnblogs-markdown p,h4,h5,h6 {
text-indent:2em!important;
} .cnblogs-markdown li p {
text-indent:0em!important;
}
.cnblogs-markdown li {
margin-left: 45px;
line-height: 15px;
} .cnblogs-markdown a:link {
text-decoration: none;
}
.cnblogs-markdown a:hover {
color: #DF3A01;
font-size: 14px;
text-decoration: none;
} .cnblogs-markdown blockquote,img,pre,code {
margin: 40px 25px 40px 25px;
border-radius: 10px;
} #mycopyright {
margin: 40px 5px 30px 0px;
} .cnblogs-markdown #nav {
margin-bottom: 30px;
}

自定义博客样式

页脚HTML:

<script type="text/javascript">
var setMyBlog = {
setCopyright: function() {
//设置版权信息,转载出处自动根据页面url生成
var info_str = '<div id="mycopyright"><p>作者:<a target="_blank">@琴水玉</a></p>'+
'<p>转载请注明出处:<a class="uri"></a></p></div>',
info = $(info_str),
info_a = info.find("a"),
url = window.location.href;
$(info_a[0]).attr("href","https://github.com/shuqin");
$(info_a[1]).attr("href",url).text(url);
$("#cnblogs_post_body").append(info);
},
setCodeRow: function(){ },
setAtarget: function() {
// 博客内的链接在新窗口打开
$("#cnblogs_post_body a").each(function(){
this.target = "_blank";
})
},
setNav: function() {
var nav_str = '<div id="nav"></div>';
var nav = $(nav_str);
$(".cnblogs-markdown h2,h3,h4,h5,h6").each(function(i,item){
var tag = $(item).get(0).localName;
var title = $(item).text();
if (title != '公告') {
var titleLowercase = title.toLowerCase();
var anchor = '<a class="new' + tag + '" href="#' + titleLowercase + '">'+ title +'</a><br/>';
$("#cnblogs_post_body").prepend(nav);
$("#nav").append(anchor);
}
});
$(".newh2").css("margin-left",0);
$(".newh3").css("margin-left",20);
$(".newh4").css("margin-left",40);
$(".newh5").css("margin-left",60);
$(".newh6").css("margin-left",80);
},
runAll: function() {
/* 运行所有方法
* setAtarget() 博客园内标签新窗口打开
* setContent() 设置目录
* setCopyright() 设置版权信息
* setCodeRow() 代码行号显示
*/
this.setAtarget();
this.setNav();
this.setCopyright();
this.setCodeRow();
}
}
setMyBlog.runAll();
</script>

自动生成博客导航

夏日芝兰的完整的CSS 文件:

/* Minification failed. Returning unminified contents.
(512,16): run-time error CSS1036: Expected expression, found ';'
*/
#EntryTag {
margin-top: 20px;
font-size: 9pt;
color: gray;
}
.topicListFooter {
text-align: right;
margin-right: 10px;
margin-top: 10px;
}
#divRefreshComments{
text-align: right;
margin-right: 10px;
margin-bottom: 5px;
font-size: 9pt;
} * {
margin:;
padding:;
}
html {
height: 100%;
}
body {
color: #464646;
font-family: "verdana","ms song","Arial","Helvetica", "sans-serif";
font-size: 9pt;
min-height: 101%;
background:transparent url('/skins/summerGarden/images/bg.jpg') repeat-x;
background-color: #FAF7EF;
}
table {
border-collapse: collapse;
border-spacing:;
}
fieldset, img {
border:;
}
ul {
word-break: break-all;
}
li {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
a:link {
color: #464646;
text-decoration: none;
}
a:visited {
color: #464646;
text-decoration: none;
}
a:hover {
color: #4c4f8b; }
a:active {
color: #464646;
text-decoration: none;
}
.clear {
clear: both;
} #home {
margin: 0 auto;
width:95%;
min-width: 930px;
position:relative; }
#header {
background: url('/skins/summerGarden/images/header.jpg') no-repeat right top;
height:146px;
padding-top:30px;
}
#blogTitle {
height: 80px;
clear: both;
color:#4c4f8b;
} #blogTitle a:link,#blogTitle a:visited,#blogTitle a:active{
color:#4c4f8b;
}
#blogTitle a:hover{
color:#ff6600; } #blogTitle h1 {
font-size: 200%;
font-weight: bold;
line-height: 1.5em;
margin-left: 1em;
margin-top: 10px;
width: 50%;
float: left;
}
#blogTitle h2 {
margin-left: 4em;
line-height: 1.5em;
width: 50%;
float: left;
}
#lnkBlogLogo{
display:none;
}
#blogLogo {
float: right;
}
#navigator {
clear: both;
}
#navList {
float: left;
}
#navList li {
float: left;
}
#navList a {
float: left;
padding-top: 8px;
margin-left:20px;
}
#navList a:link, #navList a:visited, #navList a:active {
color: #666; }
#navList a:hover {
color:#ff6600; } .aHeaderXML img{
display:none;
} .blogStats {
float: right;
color: #bbb;
margin-top: 8px;
margin-right: 2px;
text-align: right;
} #main{
width: 100%;
min-width: 950px;
text-align: left;
}
#mainContent .forFlow{
margin-left: 24em;
float: none;
width: auto;
} #mainContent {
min-height: 200px;
padding: 0px 0px 10px 0;
*padding-top:10px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all; float: right;
margin-left: -25em;
width: 100%
}
.day {
min-height: 10px;
_height: 10px;
margin-bottom: 20px;
border-bottom:1px dotted #6466b3;
padding-bottom: 15px;
}
.dayTitle {
width: 100%;
color: #6466b3;
font-weight: bold;
line-height: 1.5em;
font-size: 110%;
margin-top: 3px;
margin-bottom: 10px;
clear:both;
text-align:center;
display: none;
}
.postTitle {
font-size: 110%;
font-weight: bold;
float: right;
line-height: 1.5em;
width: 100%;
clear:both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #6466b3;
}
.postTitle a:hover {
color: #ff6600; }
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear:both;
padding: 10px 0;
}
.postDesc {
float: right;
width: 100%;
clear:both;
text-align: right;
padding-right: 5px;
color: #666;
margin-top: 5px;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
color: #666;
}
.postDesc a:hover {
color: #F60;
text-decoration: none;
}
.postSeparator {
clear: both;
height: 5px;
width: 100%;
clear:both;
float: right;
margin: 0 auto 15px auto;
} #sideBar {
width: 230px;
min-height: 200px;
padding: 16px 0 0px 5px;
float: left;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
color:#88866F;
}
.newsItem .catListTitle {
display: none;
}
.newsItem {
padding: 15px 0 5px 0px;
margin-bottom: 8px;
}
/**日历控件样式开始**/
#calendar {
width: 229px;
}
#calendar .Cal {
width: 100%;
line-height: 1.5em;
}
.Cal {/**日历容器table**/
border: none;
color: #666;
}
#calendar table a:link, #calendar table a:visited, #calendar table a:active {
font-weight: bold;
}
#calendar table a:hover {
color: #6466b3;
text-decoration: none;
background-color: #6466b3;
}
.CalTodayDay{/**今天日期样式**/
color:#6466b3;
border: dotted 1px #6466b3;
}
#calendar .CalNextPrev a:link,#calendar .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
font-weight: bold;
}
.CalDayHeader{
border-bottom:1px solid #ccc;
}
.CalTitle{/**日历年月头部样式**/
width:100%;
color:#333;
border-bottom:1px solid #666;
}
/**日历控件样式结束**/ #leftcontentcontainer ul a:link,#leftcontentcontainer ul a:visited,#leftcontentcontainer ul a:active{
color:#88866F;
}
#leftcontentcontainer ul a:hover{
color:#4c4f8b;
text-decoration:none;
} .catListTitle {
font-weight: bold;
line-height: 1.5em;
font-size: 110%;
margin-top: 15px;
text-align: center;
color:#6466b3;
}
.catListComment {
line-height: 1.5em;
}
.divRecentComment {
text-indent: 1em;
}
#sideBarMain ul {
line-height: 1.5em;
}
/*****侧边栏结束********************************/ /****查看文章页面开始*************************/
#topics {
width: 100%;
min-height: 200px;
padding: 0px 0px 10px 0;
/*float: left;*/
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
}
#topics .postTitle {
font-size: 130%;
font-weight: bold;
float: left;
line-height: 1.5em;
width: 100%;
padding-left: 5px;
margin-bottom:15px;
}
.postBody {
padding: 5px 2px 5px 5px;
line-height: 1.5;
color: #000;
border-bottom: 1px solid black;
}
#EntryTag { }
#EntryTag a {
margin-left: 5px;
}
#EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
color: #4c4f8b;
}
#EntryTag a:hover {
color: #6466b3; }
#topics .postDesc {
float: right;
width: 100%;
text-align: right;
padding-right: 5px;
color: #666;
margin-top: 5px;
}
.feedback_area_title {
font-weight: bold;
margin-top: 20px;
border-bottom: 1px solid #333;
margin-bottom: 10px;
padding-left: 8px;
}
.louzhu {
background:transparent url('/skins/summerGarden/images/icoLouZhu.gif') no-repeat scroll right top;
padding-right:16px;
}
.feedbackListSubtitle {
color: #666;
}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
color: #666;
font-weight: normal;
}
.feedbackListSubtitle a:hover {
color: #f60;
text-decoration: none;
}
.feedbackManage {
width: 220px;
text-align: right;
float: right;
}
.feedbackCon {
border-bottom: 1px solid #ccc;
background: url('/skins/summerGarden/images/comment.gif') no-repeat 5px 0px;
padding: 15px 18px 10px 40px;
min-height: 35px;
_height: 35px;
margin-bottom: 1em;
line-height: 1.5em;
width:95%;
}
#divRefreshComments {
text-align: right;
margin-bottom: 10px;
}
.commenttb {
width: 320px;
}
.feedbackListSubtitle b{
font-weight:normal;
}
/****查看文章页面开始*************************/ /****列表页面开始******************************/
.entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
font-size: 110%;
font-weight: bold;
border-bottom: 1px solid #6466b3;
text-align: right;
padding-bottom: 3px;
padding-right: 10px;
color:#6466b3;
} .entrylistDescription {
color: #666;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
margin-bottom: 10px;
}
.entrylistItem {
min-height: 20px;
_height: 20px;
margin-bottom: 30px;
padding-bottom: 5px;
width: 100%;
}
.entrylistPosttitle {
font-size: 110%;
font-weight: bold;
border-bottom: 1px dotted #6466b3;
line-height: 1.5em;
width: 100%;
padding-left: 5px; }
.entrylistPosttitle a:link,.entrylistPosttitle a:visited,.entrylistPosttitle a:active{
color:#6466b3;
}
.entrylistPosttitle a:hover {
color:#4c4f8b; }
.entrylistPostSummary {
margin-top: 5px;
padding-left: 5px;
margin-bottom: 5px;
}
.entrylistItemPostDesc {
text-align: right;
color: #666;
}
.entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
color: #666;
}
.entrylistItemPostDesc a:hover {
color: #f60; }
.entrylist .postSeparator {
clear: both;
width: 100%;
font-size:;
line-height:;
margin:;
padding:;
height:;
border: none;
} .pager {
text-align: right;
margin-right: 10px;
}
.PostList {
border-bottom: 1px dotted #6466b3;
clear: both;
min-height: 1.5em;
_height: 1.5em;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 5px;
}
.postTitl2 {
float: left;
}
.postDesc2 {
color: #666;
float: right;
margin-right: ;
}
.postText2 {
clear: both;
color: #666;
}
.pfl_feedback_area_title {
text-align: right;
line-height: 1.5em;
font-weight: bold;
border-bottom: 1px solid #666;
margin-bottom: 10px;
}
.pfl_feedbackItem {
border-bottom: 1px solid black;
margin-bottom: 20px;
}
.pfl_feedbacksubtitle {
width: 100%;
border-bottom: 1px dotted #666;
height: 1.5em;
}
.pfl_feedbackname {
float: left;
}
.pfl_feedbackManage {
float: right;
}
.pfl_feedbackCon {
color: black;
padding-top: 5px;
padding-bottom: 5px;
}
.pfl_feedbackAnswer {
color: #F40;
text-indent: 2em;
}
.tdSentMessage {
text-align: right;
}
.errorMessage {
width: 300px;
float: left;
} /****列表页面结束******************************/ /****相册页面开始******************************/
.divPhoto {
border: 1px solid #6466b3;
padding: 2px;
margin-right: 10px;
} .thumbDescription {
color: #666;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 10px;
margin-bottom: 10px;
}
/****相册页面开始******************************/ /*****留言页面开始*****************************/
#footer {
text-align: center;
height: 41px;
margin-top: 10px;
background:url('/skins/summerGarden/images/footer.jpg') no-repeat 220px 0;
padding-top:40px;
}
/*留言查看页面的个人信息*/
.personInfo {
margin-bottom: 20px;
}
/*留言分页区域*/
.pages {
text-align: right;
}
/*****留言页面结束*****************************/
/*****第三部分结束*******************************/ /*文章内部常用标签格式*/
.postBody {
line-height: 1.5;
color:#393939;
font-size:14px;
}
.postBody p,.postCon p{
margin: 0 auto 1em auto;
}
.postBody h2{
font-size: 150%;
margin: 15px auto 2px auto;
font-weight:bold;
}
.postBody h3 {
font-size: 120%;
margin: 15px auto 2px auto;
font-weight:bold;
}
.postBody h4{
font-size:110%;
margin:15px auto 2px auto;
font-weight:bold;
color:#333;
} .postBody h5{
font-size:100%;
margin:15px auto 2px auto;
font-weight:bold;
color:#333;
} .postBody a:link,.postBody a:visited,.postBody a:active{
color:#6466b3;
text-decoration:underline;
}
.postBody a:hover{
color:#4c4f8b;
}
.postCon a:link,.postCon a:visited,.postCon a:active{
text-decoration:underline;
}
.postCon a:hover{
color:#4c4f8b;
} .postBody ul,.postCon ul{
margin-left:2em;
} .postBody li,.postCon li{
list-style-type:disc;
margin-bottom:1em;
} .postBody blockquote{
background:url('/skins/summerGarden/images/comment.gif') no-repeat 25px 0px;
padding:10px 60px 5px 60px;
min-height:35px;
_height:35px;
line-height:1.6em;
color:#333;
}
/*****第四部分结束*******************************/ .newsItem fieldset{padding:5px;} .input_my_zzk{width:140px;} .login_tips a{text-decoration: underline;} .blog_comment_body a:link{ text-decoration:underline; }

Make Blog Beautiful的更多相关文章

  1. 推荐一些python Beautiful Soup学习网址

    前言:这几天忙着写分析报告,实在没精力去研究django,虽然抽时间去看了几遍中文文档,还是等实际实践后写几篇操作文章吧! 正文:以下是本人前段时间学习bs4库找的一些网址,在学习的可以参考下,有点多 ...

  2. Python学习笔记之Beautiful Soup

    如何在Python3.x中使用Beautiful Soup 1.BeautifulSoup中文文档:http://www.crummy.com/software/BeautifulSoup/bs3/d ...

  3. [转]python下很帅气的爬虫包 - Beautiful Soup 示例

    原文地址http://blog.csdn.net/watsy/article/details/14161201 先发一下官方文档地址.http://www.crummy.com/software/Be ...

  4. codeforces 336D Vasily the Bear and Beautiful Strings(组合数学)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Vasily the Bear and Beautiful Strings Vas ...

  5. Beautiful Soup 定位指南

    Reference: http://blog.csdn.net/abclixu123/article/details/38502993 网页中有用的信息通常存在于网页中的文本或各种不同标签的属性值,为 ...

  6. windows 安装Beautiful Soup(转)

    Beautiful Soup是一个Python的一个库,主要为一些短周期项目比如屏幕抓取而设计.有三个特性使得它非常强大: 1.Beautiful Soup提供了一些简单的方法和Python术语,用于 ...

  7. python beautiful soup库的超详细用法

    原文地址https://blog.csdn.net/love666666shen/article/details/77512353 参考文章https://cuiqingcai.com/1319.ht ...

  8. LeetCode - Beautiful Array

    For some fixed N, an array A is beautiful if it is a permutation of the integers 1, 2, ..., N, such ...

  9. Beautiful Soup (一)

    一.Beautiful Soup库的理解 1.Beautiful Soup库可以说是对HTML进行解析.遍历.维护“标签树”的功能库 2.pip install bs4 3.from bs4 impo ...

随机推荐

  1. 浅谈iOS视频开发

     浅谈iOS视频开发 这段时间对视频开发进行了一些了解,在这里和大家分享一下我自己觉得学习步骤和资料,希望对那些对视频感兴趣的朋友有些帮助. 一.iOS系统自带播放器 要了解iOS视频开发,首先我们从 ...

  2. 让你的APP支持iPhone5

    让你的APP支持iPhone5 前言 国庆节前,为了支持 iPhone5 的屏幕分辨率 (640 象素 x 1136 象素),我尝试着升级粉笔网 iPhone 客户端.整个过程花了大概一天的时间,我把 ...

  3. My租房网

    阶段一:采用分页top关键字进行查询 实现6条~~10条出租信息 阶段2:查询指定客户发布的租房信息 查询客户张三的信息,使用连接查询实现. 阶段3:按区县制作房屋出租清单

  4. div居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. java 中的2个接口 Comparable和Comparator

    像Integer.String这些类型的数据都是已经实现Comparable接口的,所以对这些类型可以直接通过Arrays.sort(...)和Collections.sort(...)方法进行排序. ...

  6. java之数组(笔记)

    1.与c++不同的声明 int[] i, j; int i[], j; 这两种声明在c++中是同等的,但是在Java中,前者是声明两个,后者是只有i是数组. 2.数组可以看作是特殊的类 3.数组的cl ...

  7. Linux 搭建svn服务器

    一.安装svn服务器端yum install subversion      从镜像下载安装svn服务器端 如果后面执行“svnadmin create /usr/local/svn/sunny”提示 ...

  8. Eclipse new server : Cancnot create a server using the selected type

    1.退出 eclipse 2.到[工程目录下]/.metadata/.plugins/org.eclipse.core.runtime 3.把org.eclipse.wst.server.core.p ...

  9. nginx的worker_processes,worker_cpu_affinity及worker_connections

    worker_processes:nginx要开启的进程数,一般为cpu的核数 worker_cpu_affinity:为每个进程绑定一个cpu,减少cpu切换的开销 配置示例: worker_pro ...

  10. Cocoapods配置

    这真是蛋疼的东西,配置了几次,每次都不同,每次都折腾半天.这一段时间应该不会变了,记录下来. 一 换源 看了教程都说官方源https://rubygems.org/不能访问,我特意点了一下,发现能访问 ...