网站美化三款H标题美化效果CSS代码 CSS/JS 第1张

用好H标签一方面可以有效地帮助网站访问者快速理解文章结构,获取文章主要内容;另一方面如果我们后期想为文章做个目录的话,使用H标签也可以方便我们后期自动生成目录。使用方法很简单,直接把你主题的H标签代码替换就行了(记得把CSS 命名改成你网站的)。

效果一演示:

网站美化三款H标题美化效果CSS代码 CSS/JS 第2张

效果一CSS代码:

.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;
}

相应的H标签对应相应颜色,使用方法只在在你主题里的Style.css替换相应样式即可。注:不是每个主题css都一样,请自行摸索。

border-radius: 0rem; 这行是全局圆角。重新定义一下样式不要圆角。标题方方愣愣的挺好看。你也可以删去这行。

效果二演示:

网站美化三款H标题美化效果CSS代码 CSS/JS 第3张

效果二CSS代码:

.post .entry-content h1{
    font-size:25px;
    font-weight:bold;
    color: #e50d4c;
    background-color: #fccad3;
    border-bottom: 1px solid;
    padding: 5px 15px;
    border-left: 5px solid;
    margin:18px 0px 18px 0px;
    overflow: hidden;
}
.post .entry-content h2{
    font-size:21px;
    font-weight:bold;
    color: #850de8;
    background-color: #eeeafe;
    border-bottom: 1px solid;
    padding: 5px 15px;
    border-left: 5px solid;
    margin:18px 0px 18px 0px;
    overflow: hidden;
}
.post .entry-content h3{
    font-size:17px;
    font-weight:bold;
    color: #41b0f4;
    background-color: #ddf0fe;
    border-bottom: 1px solid;
    padding: 5px 15px;
    border-left: 5px solid;
    margin:18px 0px 18px 0px;
    overflow: hidden;
}
.post .entry-content h4{
    font-size:13px;
    font-weight:bold;
    color: #20b60b;
    background-color: #ebfde5;
    border-bottom: 1px solid;
    padding: 5px 15px;
    border-left: 5px solid;
    margin:18px 0px 18px 5px;
    overflow: hidden;
}
.post .entry-content h5{
    font-size:10px;
    font-weight:bold;
    color: #f1e40f;
    background-color: #fefeea;
    border-bottom: 1px solid;
    padding: 5px 15px;
    border-left: 5px solid;
    margin:18px 0px 18px 10px;
    overflow: hidden;
}

效果三演示:

网站美化三款H标题美化效果CSS代码 CSS/JS 第4张

效果三CSS代码:带注释

font-size:24px;/*字体大小*/
font-weight:bold;/*设置文本粗细*/
background-color: #ffffff;/*背景颜色*/
border-bottom: 1px solid;/*边框宽度 *颜色定义*/
padding: 5px 15px;/*宽高*/
border-left: 8px solid;/*定位*/
margin:18px 0px 18px -20px;/*定位*/
overflow: hidden;/*溢出修剪*/
box-shadow:2px 6px 10px #5F9EA0;/*设置块阴影  水平位移   垂直位移 	模糊半径 */

利熙网同款

隐藏内容

此处内容需要权限查看

  • 注册会员用户特权:1TK
  • 高级尊贵用户特权:0.85TK8.5折
  • 永久尊贵用户特权:免费推荐

发表评论

后才能评论