div+css布局实现图文大事记时间线效果代码-html代码-BFW代码库

div+css布局实现图文大事记时间线效果代码

代码语言：html

代码描述：div+css布局实现图文大事记时间线效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:where(.ui-chronology) {
  --ui-chronology-bdrs: 50%;
  --ui-chronology-bdw: 12px;
  --ui-chronology-connect: 48px;

  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  row-gap: 1ch;

  ol {
    display: grid;
    grid-template-rows: var(--ui-chronology-connect) 1fr 1fr 1fr var(--ui-chronology-connect);
    margin: 0;
    padding: 0;

    /* ODD COLUMNS */
    &:nth-of-type(odd) {
      li[value="0"] {
        &:last-of-type { /* Bottom Left Corner */
          &::before { 
            border-block-width: 0 var(--ui-chronology-bdw);
            border-inline-width: var(--ui-chronology-bdw) 0;
            border-end-start-radius: var(--ui-chronology-bdrs);
            justify-self: end;
          }
          i {
            border-block-end: var(--ui-chronology-bdw) solid var(--CanvasText);
          }
        }
      }
      /* FIRST COLUMN ONLY */
      &:first-of-type {
        li[value="0"]:first-of-type {
          &::before { display: none; } /* Hide Top Left Corner */
          i { grid-column: span 2; } /* Headline */
        }
      }
      &:not(:first-of-type) { 
        li[value="0"] {
          &:first-of-type { /* Top Left Corner: Reverse */
            &::before { 
              border-block-width: var(--ui-chronology-bdw) 0;
              border-inline-width: 0 var(--ui-chronology-bdw);
              border-start-end-radius: var(--ui-chronology-bdrs);
              justify-self: start;
            }
          }
        }
      }

      &:last-of-type li[value="0"]:last-of-type i {
        width: calc(100% - var(--ui-chronology-bdw));
      }
      /* Round dot at the end of the last list */
      &:last-of-type li[value="0"]:last-of-type i::after {
        aspect-ratio: 1;
        background-color: var(--CanvasText);
        border-radius: 50%;
        content: "";
        inset-inline-end: calc(0px - (1 * var(--ui-chronology-bdw)));
        inset-block-end: calc(0px - (1.5 * var(--ui-chronology-bdw)));
        position: absolute;
        width: calc(2 * var(--ui-chronology-bdw));
      }
    }

    /* EVEN COLUMNS */
    &:nth-of-type(even) {
      li[value="0"] {
        &:first-of-type { /* Top Left Corner */
          &::before {
            border-block-width: var(--ui-chronology-bdw) 0;
            border-inline-width: var(--ui-chronology-bdw) 0;
            border-start-start-radius: var(--ui-chronology-bdrs);
            justify-self: end;
          }
          i {
            border-block-start: var(--ui-chronology-bdw) solid var(--CanvasText);
          }
     .........完整代码请登录后点击上方下载按钮下载查看