[分享]css两行文本后接一行大字

在我们的网页开发中，会遇到两行普通文本后接一行大字标题的需求。这个需求在一些页面排版上显得很自然和合理。那么，怎样实现这个排版效果呢？ / CSS代码 / p { fontsize: 16px; l...

在我们的网页开发中，会遇到两行普通文本后接一行大字标题的需求。这个需求在一些页面排版上显得很自然和合理。那么，怎样实现这个排版效果呢？

  /* CSS代码 */
     p {
         font-size: 16px;
         line-height: 24px;
     }
     p + p {
         font-size: 16px;
         line-height: 24px;
         margin-top: 0;
     }
     p + p:before {
         content: ';
         display: block;
         height: 24px;
         margin-top: -24px;
     } 

以上是实现这个排版效果所需的CSS代码。我们先来解释下其中的代码含义：

  /* 第一个p标签样式 */
     p {
         font-size: 16px; /* 文本字号为16px */
         line-height: 24px; /* 行高为24px */
     }

     /* 第二个p标签样式 */
     p + p {
         font-size: 16px; /* 文本字号为16px */
         line-height: 24px; /* 行高为24px */
         margin-top: 0; /* 去掉上边距，与上面的文本紧靠 */
     }

     /* 前面插入的空白块样式 */
     p + p:before {
         content: '; /* content属性必须有，但可以为空 */
         display: block; /* 显示为块级元素，占用空间 */
         height: 24px; /* 高度为行高 */
         margin-top: -24px; /* 上边距为行高的负数，与下面的文本紧靠 */
     } 

通过以上代码，我们实现了两行普通文本后接一行大字的排版效果。这个排版方式在一些场景中可以使内容更加醒目突出，适用性广泛。