有序列表，演示图表元素，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<ol>

  <!-- 树叶 -->
  <li class="leaves1">
    <div class="content">
      <div class="num">01</div>
      <div class="left">
        <div class="title">HTML 5</div>
        <div class="descr">超文本标记语言（HTML）的第五个也是最新的重要版本</div>
      </div>
    </div>
  </li>
  <li class="leaves2">
    <div class="content">
      <div class="num">02</div>
      <div class="left">
        <div class="title">CSS 3</div>
        <div class="descr">CSS3是层叠样式表技术的升级版，它通过新增的特性如动画、变换、过渡以及更强大的选择器和布局模型</div>
      </div>
    </div>
  </li>
  <li class="leaves3">
    <div class="content">
      <div class="num">03</div>
      <div class="left">
        <div class="title">Javascript</div>
        <div class="descr">JavaScript 是一种广泛用于网页开发的轻量级、解释型或即时编译型的编程语言</div>
      </div>
    </div>
  </li>
  <li class="leaves4">
    <div class="content">
      <div class="num">04</div>
      <div class="left">
        <div class="title">Github</div>
        <div class="descr">GitHub是一个广受欢迎的开源代码托管平台，它让开发者能够轻松共享、协作和版本控制他们的项目</div>
      </div>
    </div>
  </li>
  <li class="leaves5">
    <div class="content">
      <div class="num">05</div>
      <div class="left">
        <div class="title">Bi.cool</div>
        <div class="descr">一个能够在线编辑/实时预览你的HTML/CSS/JS代码的网站</div>
      </div>
    </div>
  </li>
</ol>

</body>

SCSS

格式化

* {
  box-sizing: border-box;
}
body {
  height: 100vh;  
  background: linear-gradient(to top, #cccccc, #d4d4d4);
  display: flex;
  align-items: center;
  justify-content: center;
}
ol {
  margin: 0;
  padding: 0;
  width: 480px;
  height: 720px;
  position: relative;
  /* border: 1px solid #aaa; */
}
/* 枝干  */
ol::before {
  content: "";
  background: linear-gradient(to right, #848484, #cacaca);
  width: 70px;
  height: 100%;
  border-radius: 35px 0 35px 0;
  border-right: 1px solid #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%)
}
/* 叶子 */
li {
  list-style: none;
  width: 240px;
  height: 240px;
  background: #408ca7;
  position: absolute;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.leaves1, .leaves3, .leaves5 {
  left: 0;
  border-radius: 0 120px;
}

.leaves2, .leaves4 {
  right: 0;
  border-radius: 120px 0;
}
.leaves1 {
  --color1: #408ca7;
  --color2: #64bfdd;
  background: linear-gradient( to bottom right, var(--color1), var(--color2));
  .num, .title {
    color: var(--color1);
  }
}
.leaves2 {
  --color1: #693381;
  --color2: #94549c;
  background: linear-gradient( to bottom left, var(--color1), var(--color2));
  top: 120px;
  .num, .title {
    color: var(--color1);
  }
}
.leaves3 {
  --color1: #a2296f;
  --color2: #cd3286;
  background: linear-gradient( to bottom right, var(--color1), var(--color2));
  top: 240px;
  .num, .title {
    color: var(--color1);
  }
}
.leaves4 {
  --color1: #cc6921;
  --color2: #e39d2d;
  background: linear-gradient( to bottom left, var(--color1), var(--color2));
  top: 360px;
  .num, .title {
    color: var(--color1);
  }
}
.leaves5 {
  --color1: #dbab26;
  --color2: #edd513;
  background: linear-gradient( to bottom right, var(--color1), var(--color2));
  top: 480px;
  .num, .title {
    color: var(--color1);
  }
}

.content {
  background: #fff;
  width: 205px;
  height: 205px;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  .num {
    font-size: 32px;
    margin-left: 15px;
    font-weight: 100
  }
  .left {
    margin: 15px;
    .title {
      font-weight: bold;
      font-size: 16px;
      position: relative;
      margin-bottom: 12px;
      &::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        height: 1px;
        width: 60px;
        background: var(--color2);
      }
    }
    .descr {
      font-size: 12px;
      color: #666;
    }
  }
}

.leaves1, .leaves3, .leaves5 {
  .content {
    border-radius: 0 105px;
    background: linear-gradient( to right, #e5e5e5, #f8f8f8);
  }
}

.leaves2, .leaves4 {
   .content {
    border-radius: 105px 0;
    background: linear-gradient( to right, #e5e5e5, #f8f8f8);
  }
}

格式化

预览

控制台