更多分类文章：
网站建设 | Python | Linux | 大数据 | 数据库 | Git | Nodejs | Golang | 电脑技巧 | 计算机技术
知更鸟主题各方面功能已经很完备了，界面也漂亮，但是对样式总会有自己的一些小需求，下面是搜集摸索出的一些CSS样式修改。
关于本站图标内容修改
隐藏侧边栏关于本站中微信图标
|
1 2 3 4 |
/* 选择器：id为feed_widget的class为.weixin的所有后代*/ #feed_widget .weixin{ display:none; } |
隐藏侧边栏关于本站中微博图标
|
1 2 3 |
#feed_widget .tsina{ display:none; } |
让剩余两个图标居中
|
1 2 3 4 5 6 |
#feed_widget .feed-t { float:left; width:50%; height:40px; line-height:38px; } |
注意
“自定义样式”里的修改会覆盖掉主题目录下style.css中样式
导航栏多色彩美化
|
1 |
#site-nav .down-menu>#menu-item-30>a:hover .font-text,#site-nav .down-menu>#menu-item-30>li.sfHover>a .font-text{background:#992e1e !important}#site-nav .down-menu a{color:#444;margin:0}#site-nav .down-menu a{height:88px;line-height:88px;border-bottom:0 solid #3690cf;transition-duration:.6s}#site-nav .down-menu>.current-menu-item>a{height:88px;line-height:88px;border-bottom:2px solid #3690cf}#site-nav .down-menu>li>a:hover{height:88px;border-bottom:88px solid #333d46}#site-nav .down-menu> |
幻灯片缩略图园角美化
|
1 2 |
#slideshow #slider img{border-radius:5px;border:0} .thumbnail{border-radius:5px;border:0} |
widget选中微光特效
|
1 |
.widget{background:#fff;margin:0 0 10px 0;border:1px solid #eaeaea;border-radius:2px;box-shadow:0 1px 1px rgba(0,0,0,0.04);-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}.widget:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2} |
文章标题点击平移
|
1 |
.list-title a,.widget.like_most_img ul li a,.widget.hot_post_img ul li a,.widget.new_cat ul li a,.widget.recent_comments ul li a,.widget.hot_comment ul li a,.widget.related_post ul li a,.widget.same_post ul li a,.widget.recently_viewed ul li a{position:relative;} |
文章标题前添加箭头美化
|
1 2 3 4 5 6 |
.widget.new_cat ul li a:before,.widget.related_post ul li a:before,.widget.same_post ul li a:before,.widget.recently_viewed ul li a:before{ content: "\e77a"; font-family: be; font-size: 16px; padding: 0 5px 0 0; } |
注
这个代码已压缩移到style.css
强制文章中图片居中显示
|
1 2 3 |
.single-content p img{ margin: 0 auto; } |
修改正文字号大小
|
1 2 3 4 5 |
.single-content { font-size: 20px; font-size: 2.0rem; line-height: 2; } |
去掉幻灯上的标题文字
|
1 |
.slider-caption {display: none; } |
标题后加文字
|
1 2 3 4 5 6 7 8 9 |
#post-75 h2 a:after { content: "推荐"; font-size: 14px; background: #c40000; color: #fff; margin: 0 0 0 5px; padding: 1px 3px; border-radius: 2px; } |
原文链接：知更鸟主题样式修改CSS
