记录点滴
分享实用资源

WordPress H标题美化

DUX大前端糖果七用了一段时间,感觉的H标签不太醒目,动手改了一下css的内容,又参考各大博客的美化样式,改完好看多了,H标签一方面可以有效地帮助网站访问者快速理解文章结构,获取文章主要内容;另一方面如果我们后期想为文章做个目录的话,使用H标签也可以方便我们后期自动生成目录。

H标签页可以更好的掌控文章权重,有利于SEO的优化。

css美化效果展示

css美化代码

.article-content h1 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid red;
padding: 5px 12px;
border-left: 5px solid red;
margin: 12px 0px;
}

.article-content h2 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FF1493;
padding: 5px 12px;
border-left: 5px solid #FF1493;
margin: 12px 0px;
}

.article-content h3 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #4169E1;
padding: 5px 12px;
border-left: 5px solid #4169E1;
margin: 12px 0px;
}

.article-content h4 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #3CB371;
padding: 5px 12px;
border-left: 5px solid #3CB371;
margin: 12px 0px;
}

.article-content h5 {
font-weight: bold;
background-color: #f6f6f6;
margin: 20px 0;
border-bottom: 0px solid #FFC0CB;
padding: 5px 12px;
border-left: 5px solid #FFC0CB;
margin: 12px 0px;
}

css代码使用说明

这个美化代码在在你主题里的Style.css替换相应样式即可。

找到主题模板中的main.css也就是style.css,之后找到里边的前缀.article-content h1文章样式的h1或其他h标签.将其对应修改为以上代码.不同代码的前缀可能不同,改下就好。

代码注释:

.article-content h5{/*类选择器*/
    font-size:10px;/*字体大小*/
    font-weight:bold;/*字体加粗,值可以为数字也可以为bold(加粗)*/
    background-color: #fefeea;/*背景颜色*/
    border-bottom: 1px solid;/*下边框样式:1px为宽度,solid边框样式*/
    padding使用方法一样: 5px 12px;/*内边距属性:5px为上内边距和下内边距,12px为右内边距和左内边距*/
    border-left: 5px solid;/*左边框的样式:和border-bottom使用方法一样*/
    margin:18px 0px;/*外边距属性:和上边的padding使用方法一样*/
}
赞(0) 有赏
转载请注明出处:糖果七 » WordPress H标题美化
分享到: 更多 (0)

相关推荐

  • 暂无文章

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

欢迎小主打赏

支付宝扫一扫打赏

微信扫一扫打赏