位置：广州松河 > 技术支持 > zblogPHP模板文章编辑内容区H标签CSS_CSS学习

zblogPHP模板文章编辑内容区H标签CSS_CSS学习

来源：网络整理时间：2023/3/4 0:56:43 共 3636 浏览

zblog模板制作的时候，文章内容区各种H标签是必须单独书写属性的，比如最重要的H2、H3、H4、H5，甚至H1最好也要写上，不少主题用户偶尔可能会在文章中使用H1。

今天就来分享下上图所示的H标签CSS：

<div class="article-content">

     <p><h1>h1 - zblogPHP插件 - 缩略图IMAGE</h1></p>

     <p><h2>h2 - zblogPHP插件 - 缩略图IMAGE</h2></p>

     <p><h3>h3 - zblogPHP插件 - 缩略图IMAGEIMAGE</h3></p>

     <p><h4>h4 - zblogPHP插件 - 缩略图IMAGEIMAGE</h4></p>
</div>

CSS：

.article-content h1,.article-content h2, .article-content h3, .article-content h4, .article-content h5 {

 padding:10px 0;

 margin-bottom:10px;

 color: #333;

 font-weight:bold;

 border-bottom: 1px solid #eaeaea;

 border-left: 2px solid #0073c6;

 padding-left: 12px;

}

.article-content h1 {

 font-size:24px;

 font-weight:bold;

 margin:20px 0;

}

.article-content h2 {

 font-size:18px;

 font-weight:bold;

 margin:16px 0;

}

.article-content h3 {

 font-size:16px;

}

.article-content h4 {

 font-size:15px;

}

.article-content h5 {

 font-size:14px;

}

H标签对于SEO优化，以及用户体验来说都是非常重要的，所以H标签的CSS必须书写！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS：图片列表鼠标触发显示图片标题_CSS学习 | ·下一条：border:transparent透明边框_CSS学习