wordpress美化为文章正文标题、二级标题、三级标题增加底色

  • 6,610 views
    • 阅读模式
摘要

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

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

正文标题增加底色

在Style.css查找以下内容

  1. /** 正文 **/
  2. .entry-header h1 {
  3.     position: relative;
  4.     font-size: 20px;
  5.     font-size: 2.0rem;
  6.     line-height: 30px;
  7.     text-align: center;
  8.     margin: 35px 0 0 0;
  9.     padding: 5px 0;
  10. }

替换为

  1. .entry-header h1 {
  2.     position: relative;
  3.     font-size: 20px;
  4.     font-size: 1.8rem;
  5.     line-height: 30px;
  6.     text-align: center;
  7.     margin: 35px -20px 0 -20px;
  8.     padding: 5px 20px;
  9.     height: auto;
  10.     color: #fff;
  11.     text-transform: inherit;
  12.     background-color: #1ba1e2;
  13.     border-bottom: 1px solid #ddd;
  14. }

二级标题、三级标题增加底色方法

将以下代码

  1. /** 排版样式 **/
  2. .single-content h2 {
  3.     font-size: 17px;
  4.     font-size: 1.7rem;
  5.     line-height: 190%;
  6.     margin: 10px -21px;
  7.     padding: 0 44px;
  8.     border-left: 5px solid #e40000;
  9. }
  10. .single-content h3 {
  11.     font-size: 16px;
  12.     font-size: 1.6rem;
  13.     line-height: 190%;
  14.     margin: 2px -21px 10px -21px;
  15.     padding: 0 44px;
  16.     border-left: 5px solid #3690cf;
  17. }

替换为

  1. .single-content h2 {
  2.     font-size: 17px;
  3.     font-size: 1.7rem;
  4.     line-height: 190%;
  5.     margin: 10px -20px;
  6.     padding: 0 44px;
  7.     border-left: 5px solid #e40000;
  8.   background-color: #ebebeb;
  9.     border-bottom: 1px solid #e40000;
  10. }
  11. .single-content h3 {
  12.     font-size: 16px;
  13.     font-size: 1.6rem;
  14.     line-height: 190%;
  15.     margin: 2px -20px 10px -20px;
  16.     padding: 0 44px;
  17.     border-left: 5px solid #3690cf;
  18.     background-color: #ebebeb;
  19.     border-bottom: 1px solid #3690cf;
  20. }
增加底色可以很好的增强文章内容的层次感，增强了用户体验。

wordpress美化为文章正文标题、二级标题、三级标题增加底色

 

 

历史上的今天
11月
12
老张
  • 本文由 发表于 2018 年 11 月 12 日 15:02:25
  • wordpress美化
  • 标题底色
  • 二级标题
  • 三级标题
评论  4  访客  2  作者  2
    • 点滴记录
      点滴记录 4
      1F
      回复

      层次分明，排版必备

    匿名

    发表评论

    匿名网友 填写信息

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

    确定