专业网站建设品牌,十四年专业建站经验,服务6000+客户--广州京杭网络
免费热线:400-683-0016      微信咨询  |  联系我们

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

当前位置:网站建设 > 技术支持
资料来源:网络整理       时间:2023/3/4 0:56:43       共计:3602 浏览

 

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学习

Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有    粤ICP备16019765号 

广州京杭网络科技有限公司 版权所有