【WordPress 教程】为文章正文标题、二级标题、三级标题增加底色

孤狼
171
文章
95
评论
2018年12月13日17:47:51 42 25,771 1498字阅读4分59秒
摘要

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

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

正文标题增加底色

在Style.css查找以下内容

  1. /** 正文 **/
  2. .entry-header h1 {
  3.     positionrelative;
  4.     font-size20px;
  5.     font-size: 2.0rem;
  6.     line-height30px;
  7.     text-aligncenter;
  8.     margin35px 0 0 0;
  9.     padding5px 0;
  10. }

替换为

此处为隐藏的内容!
发表评论并刷新,方可查看

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

将以下代码

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

替换为

此处为隐藏的内容!
发表评论并刷新,方可查看

增加底色可以很好的增强文章内容的层次感,增强了用户体验。

继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
  • 本文由 发表于 2018年12月13日17:47:51
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

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

评论:42   其中:访客  40   博主  2
    • 呜呜呜 呜呜呜

      使用

      • 呜呜呜 呜呜呜

        烟笼寒水月笼沙,夜泊秦淮近酒家—-【唐·杜牧·泊秦淮】

        • 优秀 优秀

          有情芍药含春泪,无力蔷薇卧晓枝—-【宋·秦观·春日】

          • 1 1

            挂云帆济沧海

            • 425454 425454

              长风破浪会有时,直挂云帆济沧海—-【唐·李白·行路难】

              • gdxiao gdxiao

                知者不惑,仁者不忧,勇者不惧—-【论语·子罕】

                • 454255388 454255388

                  今夜偏知春意暖,虫声新透绿窗纱—-【唐·刘方平·夜月】

                  • 竹林听雨 竹林听雨

                    不错,学习了。

                    • 这不是虾米 这不是虾米

                      美了美了

                      • 这不是虾米 这不是虾米

                        他山之石,可以攻玉—-【诗经·小雅·鹤鸣】