WordPress H标题_H标签美化代码

H标签美化效果

一个漂亮鲜明的H标题能够让读者更好的查看文章内容,根据文章结构快速寻找读者需要的内容;另一方面如果我们后期想为文章做个目录的话,使用H标签也可以方便我们后期自动生成目录。

.post-content该代码中的post参数有些主题的可能不一样,我的是.entry-content h2所有我把post换成了entry,请根据自己的主题进行修改。

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 
.post-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;
	border-radius: 0rem;
}

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

.post-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;
	border-radius: 0rem;
}

.post-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;
	border-radius: 0rem;
}

.post-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;
	border-radius: 0rem;
}
/*圆角控制*/
border-radius: 0rem;

在代码中找到该代码,0rem根据自己的网站的喜好修改“0”这个参数,填写数字改变圆角弧度大小。

版权声明:
作者:Mankey
链接:https://l0h.cn/3426.html
来源:零零猴资源库
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
WordPress H标题_H标签美化代码
H标签美化效果 一个漂亮鲜明的H标题能够让读者更好的查看文章内容,根据文章结构快速寻找读者需要的内容;另一方面如果我们后期想为文章做个目录的话,使……
< <上一篇
下一篇>>