美化文章的排版

一个好的排版，能够极大提升阅读体验，因此定制一个好的排版非常有必要。

我网站里的文章排版样式，借用的是 mdnice 的主题，个人非常喜欢。

/* 二级标题 */

.view-content h2 {

  margin: 40px 20px auto;

  height: 40px;

  background-color: rgb(251, 251, 251);

  border-bottom: 1px solid rgb(246, 246, 246);

  overflow: hidden;

  box-sizing: border-box;

}

/* 二级标题内容 */

.view-content h2  {

  margin-left: -10px;

  display: inline-block;

  width: auto;

  height: 40px;

  background-color: rgb(33, 33, 34);

  border-bottom-right-radius:100px;

  color: rgb(255, 255, 255);

  padding-right: 30px;

  padding-left: 30px;

  line-height: 40px;

  font-size: 16px;

}

/* 二级标题修饰 请参考有实例的主题 */

.view-content h2:after {

}

/* 三级标题内容 */

.view-content h3 {

  margin-top: 5px;

  padding-top: 20px;

  padding-right: 5px;

padding-bottom: 5px;

  padding-left: 5px;

  font-size: 17px;

  border-bottom: 2px solid rgb(33, 33, 34);

  line-height: 1.1;

}

/* 引用文字 */

.view-content blockquote p {

    color: #353535;

    font-size: 16px;

    margin: 0 10px;

    display: block;

}

.view-content .blockquote:after {

    content: "”";

    float: right;

    display: block;

    font-size: 2em;

    color: rgb(248, 57, 41);

    font-family: Arial, serif;

    line-height: 1em;

    font-weight: 700;

}

/* 二维码显示 */

header .gongzhonghao {

    color: #fff;

    font-size: 14px;

    position: absolute;

    bottom: 30px;

}

header .weixinhao {

    color: #fff;

    font-size: 14px;

    position: absolute;

    bottom: 180px;

}