主要参考:http://www.cnblogs.com/houkai/p/3394402.html
以下代码插入到【管理】-->【设置】-->【博客设置】-->【页面定制CSS代码】中:
.postTitle { background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%); background: -moz-linear-gradient(top, #eee, #aaa); font-size: 18px; margin-bottom: 3px; } #topics .postTitle { font-size: 110%; font-weight: bold; border-bottom: 1px dashed #ccc; float: right; line-height:2.5em;font-size: 18px; width: 100%; clear:both; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { color: #390; transition:all 0.4s linear 0s } .postTitle a:hover { color: #F60; text-decoration: none;margin-left: 10px; } .entrylistPosttitle { background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%); background: -moz-linear-gradient(top, #eee, #aaa); font-size: 18px; margin-bottom: 3px; } #topics .entrylistPosttitle { font-size: 110%; font-weight: bold; border-bottom: 1px dashed #ccc; float: right; line-height:2.5em;font-size: 18px; width: 100%; clear:both; } .entrylistPosttitle a:link, .entrylistPosttitle a:visited, .postTitle2 a:active { color: #390; transition:all 0.4s linear 0s } .entrylistPosttitle a:hover { color: #F60; text-decoration: none;margin-left: 10px; }
首页显示效果: 博客页面显示效果:
其中包含了动态效果。。。
总结:
博客首页标题的样式标签为postTitle和postTitle2,但两者之间关联性太大,经过调试,感觉以上代码显示效果最好
另外,分类检索后的文章样式标签为entrylistPosttitle,为避免与postTitle相互影响,分开编写。