css布局实现p标签段落加数字和时间线显示效果代码-html代码-BFW代码库

css布局实现p标签段落加数字和时间线显示效果代码

代码语言：html

代码描述：通过css的布局实现将平庸的p段落文章排版成有时间线条隔开加数字的布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">




    <style>
        @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
        body {
          font-family: "Open Sans", sans-serif;
          margin: 0;
          padding: 0 4em;
        }
        
        main {
          min-width: 300px;
          max-width: 500px;
          margin: auto;
        }
        
        p {
          font-size: 1em;
          line-height: 1.75em;
          border-top: 3px solid;
          -o-border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
             border-image: linear-gradient(to right, #743ad5 0%, #d53a9d 100%);
          border-image-slice: 1;
          border-width: 3px;
          margin: 0;
          padding: 40px;
          counter-increment: section;
          position: relative;
          color: #34435E;
        }
        p:before {
          content: counter(section);
          position: absolute;
          border-radius: 50%;
          padding: 10px;
          height: 1.25em;
          width: 1.25em;
          background-color: #34435E;
          text-align: center;
          line-height: 1.25em;
          color: #ffffff;
          font-size: 1em;
        }
        
        p:nth-child(odd) {
          border-right: 3px solid;
          padding-left: 0;
        }
        p:nth-child(odd):before {
          left: 100%;
          margin-left: -20px;
        }.........完整代码请登录后点击上方下载按钮下载查看