【WordPress教程】为文章正文H标签一级标题、二级标题、三级标题增加底色

今天就给大家说说wordpress网站给文章H标签标题添加背景色和样式。

为文章增加正文标题、二级标题、三级标题的底色。这样做的目的就是为了增加文章内容的层次感,以达到增强用户体验的目的。

为了增加文章内容的层次感,增强用户体验,我们可以把文章正文标题、二级标题、三级标题增加不同的底色这样的wordpress美化效果以示区分。

/*  h1 标签背景颜色 */
.article-content h1{
    position: relative;
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: bolder;
    line-height: 30px;
    margin: 35px -20px 0 -20px;
    padding: 5px 20px;
    height: auto;
    color: #fff;
    text-transform: inherit;
    background-color: #1ba1e2;
    border-bottom: 1px solid #ddd;
    border-left: 5px solid #e40000;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;	
}
/*  h2 标签背景颜色 */
.article-content h2{
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bolder;
    line-height: 190%;
    margin: 10px -20px;
    padding: 0 18px;
    border-left: 5px solid #e40000;
    background-color: #ebebeb;
    border-bottom: 1px solid #e40000;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

/*  h3 标签背景颜色 */
.article-content h3{
    font-size: 16px;
    font-size: 1.6rem;
    font-weight: bolder;
    line-height: 190%;
    margin: 2px -20px 10px -20px;
    padding: 0 16px;
    border-left: 5px solid #3690cf;
    background-color: #ebebeb;
    border-bottom: 1px solid #3690cf;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

/*  h4 标签背景颜色 */
.article-content h4{
    font-size: 15px;
    font-size: 1.5rem;
    font-weight: bolder;
    line-height: 190%;
    margin: 2px -20px 10px -20px;
    padding: 0 15px;
    border-left: 5px solid  #00F;
    background-color: #ebebeb;
    border-bottom: 1px solid #00F;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

/*  h5 标签背景颜色 */
.article-content h5{
    font-size: 14px;
    font-size: 1.4rem;
    font-weight: bolder;
    line-height: 190%;
    margin: 2px -20px 10px -20px;
    padding: 0 14px;
    border-left: 5px solid  #F0F;
    background-color: #ebebeb;
    border-bottom: 1px solid #F0F;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
/*  h6 标签背景颜色 */
.article-content h6{
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: bolder;
    line-height: 190%;
    margin: 2px -20px 10px -20px;
    padding: 0 13px;
    border-left: 5px solid   #0F0;
    background-color: #ebebeb;
    border-bottom: 1px solid #0F0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	}

把上面的代码复制到 外观→主题设置→自定义代码→自动以CSS样式(如下图) 里面就可以了!

注意:每个博客主题不一样,你需要找到你文章内容所在的标签的class值,把上面的article-content换成你的文章内容标签的class值!(右键自己文章页查看源码就能看到自己文章内容所在标签的class值)
本博客效果展示实例:

H1实例效果

H2实例效果

H3实例效果

H4实例效果

H5实例效果
H6实例效果

以上是本站的展示效果,大家需要不用的背景颜色可以自己设置!

未经允许不得转载:赵斌自媒体 » 【WordPress教程】为文章正文H标签一级标题、二级标题、三级标题增加底色

顶 (0)

评论 0

◎如是广告,评论将无法显示,博主微信/QQ:80747084
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

支付宝首页搜索: 538757204 领取12月支付宝现金大红包福利

推广者专属福利,新客户无门槛领取总价值高达2775元代金券,每种代金券限量500张,先到先得。
×
刷新sitemap图标按钮 订阅图标按钮