博客第一次变更后的一些CSS样式增修展示

2018年4月初对我的博客进行了一次大换血，并且自己手动添加了一些CSS样式来丰富文章页面的排版和内容，以下为样式展示部分

.~~hong-bt~~ ~~.huang-bt~~ ~~.lan-bt~~ ~~.lv-bt~~ ~~.hong~~ ~~.huang，上面两个用的div标签~~
~~.lan.lv这两个用的span，添加了新的kbd样式~~
自带的kbd标签Ctrl+C
仿照code标签制作了.green .blue .yellow这几个挺漂亮的，那我之前还做那么多用来高亮的干嘛，根本用不到嘛
添加了9种button样式类，由于某些元素会覆盖样式，所以button除了font-size外均设置了!important属性
Github 百度一下本地下载 Github 百度一下本地下载 Github 百度一下本地下载

网盘下载本地下载 Github

~~添加展开折叠样式~~
~~+展开~~

.mac-dark mac-dark-head

.mac-dark-body 使用时候只能用div元素，不然会出现对不齐的情况，可内嵌添加

标题

超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试
自带a标签链接
WordPress为自带编辑器添加自定义功能按钮
a标签修改style链接
WordPress为自带编辑器添加自定义功能按钮

add_filter( 'mce_external_plugins', 'add_plugin' );

add_filter( 'mce_buttons', 'register_button' );

function register_button( $buttons ) {

array_push( $buttons, "|", "myadvert" ); //添加一个myadvert按钮

return $buttons;

}

function add_plugin( $plugin_array ) {

$plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadvert.js'; //myadvert按钮的js路径

return $plugin_array;

}

.mac-dark-head 这是单个标题，去掉了阴影box-shadow

.mac-light .mac-light-head

.mac-light-body 使用同上，无代码高亮
code里添加文字示例：

超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试超长内容测试

添加code示例:

add_filter( 'mce_external_plugins', 'add_plugin' );

add_filter( 'mce_buttons', 'register_button' );

function register_button( $buttons ) {

array_push( $buttons, "|", "myadvert" ); //添加一个myadvert按钮

return $buttons;

}

function add_plugin( $plugin_array ) {

$plugin_array['myadvert'] = get_bloginfo( 'template_url' ) . '/js/myadvert.js'; //myadvert按钮的js路径

return $plugin_array;

}

.mac-light-head 这是单个标题,去掉了阴影box-shadow

添加了几个社交组件

QQ号Wechat新浪微博腾讯微博GithubE-mail以下几个为bootstrap.css自带的，然而我才知道

.alert alert-success

.alert alert-info

.alert alert-warning

.alert alert-danger

修改了.progress-bar的颜色从#337ab7到#00a2ff，.progress-bar-striped, .progress-striped .progress-bar样式下添加动画animation:progress-bar-stripes 1s linear infinite;

100%

90%

80%

70%

60%

div class="text-center"内容居中显示，不止是文字居中，也可以用于button和其他元素

另一种占屏宽非100%，先居中后class

其他更多样式修改

Cosy
style.css 3983行，链接样式强调，不能直接对a标签下划线，又丑，所有标签都会又下划线

.post-content p a:visited,

.post-content p a {

text-decoration: none;

border-bottom: 1px solid #3d464d;

padding-bottom: 2px;

}

可以试试链接仿照成按钮的样式，hover伪类下变黑

style.css 3983行，链接方框

.post-content p a:visited,

.post-content p a {

text-decoration: none;

border-radius:5px;

border: 1px solid #888888;

padding: 1px 1px 1px 1px;

}

.post-content p a:hover {

border-radius:5px;

background-color: #000;

border-color: #000;

color: #FFF;

}

bigger-share图title不居中
functions.php 664行
title left加个括号(750 - $title_width )/ 2;
bigger-share图手机端看不到底部关闭按钮
style.css 4579行
.dialog_overlay
height改成88%;
style.css 4637行
.dialog-content .btn-close
bottom改成60px;
style.css 4598行
.dialog_overlay的阴影注释掉
/*background: rgba(55, 58, 71, 0.9);*/
/*opacity: 1;*/
评论按钮修改
style.css 6319行
.comment-author-from .form-submit .btn-primary
border-radius:60px;/*改成圆角，radius大于宽度一半就是最大圆角*/
style.css 39行
.btn-primary
background-color: #444;
border-color: #444;
background-color: #fff !important;
border: 1px solid #444 !important;，/*颜色和hover伪类都有小修改*/
修改标签大小一致
style.css 5598行
.widget_tag_cloud .tagcloud a
font-size:12px !important;有!important规则的标签优先级最高
修改标题h1h2h3h4h5h6居中
style.css 4072行
.post-content
text-align: center;
用了之后一些video播放器，手机端有时候没有自适应
bootstrap.css里的audio, canvas, progress, video下改成width:100%;
更改css需清除缓存刷新，因为引入的是缓存文件css?ver=0.0.1
bigger-share图生成不了显示网络错误，升级php版本
WP-Syntax
wp-syntax.css 79行
.wp_syntax pre 下的font-family改成code标签的font-family，即Menlo,Monaco,Consolas,"Courier New",monospace!important;
wp-syntax.css 14行
.wp_syntax 添加了box-shadow: 0 3px 10px 0px rgba(0,0,0,0.4);
所有浅灰色改成#efefef;
增加了滚动条样式，并将小尺寸时候滚动条消失，参考CSS3自定义滚动条样式

.wp_syntax::-webkit-scrollbar {

background-color:#fff;

height: 12px;

}

.wp_syntax::-webkit-scrollbar-track {

background-color:#fff;

}

.wp_syntax::-webkit-scrollbar-thumb {

background-color:#efefef;

@media screen and (max-width: 1024px){.wp_syntax::-webkit-scrollbar {

height: 0px;

}}

}

参照csdn博客修改了样式为浅蓝色#f6f8fa，增大了上下边距padding-bottom&top，代码行数部分文字居中，width改成48px

Plyr
播放器某些地方颜色改成了黑色

CSS WordPress

Hungway

If not me,who?If not now,when?

文章评论（5）

rexhan

学习了。

2018年5月24日

Muse

@rexhan 你是怎么找到这里的...

2018年7月11日

回复

cialis

Excellent article! We are linking to this particularly great content on our website.
Keep up the good writing.

2019年2月24日

Сialis

What's up everyone, it's my first pay a quick visit at this web page, and piece of writing
is truly fruitful in favor of me, keep up posting these types of
posts.

2019年3月15日

;-)

2019年9月12日