<dl>
  <dt>
    <a href="#kittens">Cat Ipsum really speaks to people who own felines.</a>
  </dt>
  <dd id="kittens">
    <p>
      <img src="http://placekitten.com/50/50" />
      Kitten Ipsum fire cute wonderful cold cat heart loving hearts cat healing prrrrr favorite caturday rescue kitty cats chuf cake day family buddy, whisker sneak spoon belly.
    </p>
  </dd>
  <dt>
    <a href="#batman">You're taller than you look in the tabIoids, Mr. Wayne.</a>
  </dt>
  <dd id="batman">
    <p>But a man who doesn't care about the world doesn't spend half his fortune on a plan to save it. And isn't so wounded when it fails that he goes into hiding.</p>
  </dd>
  <dt>
    <a href="#fish">If you want to make your own tunaipsum.</a>
  </dt>
  <dd id="fish">
    <p><img src="http://placekitten.com/40/60" />Eucla cod inconnu; kuhli loach lightfish, daggertooth pike conger Indian mul jellynose fish: swordfish tui chub; silver hake. Cavefish cod; bonito brotula mud cat glassfish pikeblenny manefish cobbler armored searobin?</p>
  </dd>
  <dt>
    <a href="#bacon">Does your text long for something a little meatier?</a>
  </dt>
  <dd id="bacon">
    <p>Bacon ipsum dolor sit amet chicken ball tip biltong capicola chuck ham sausage turducken strip steak prosciutto flank tri-tip pastrami andouille turkey.</p>
  </dd>
</dl>

<div class="tutorials">
  <a href="https://s.juejin.cn/ds/idkVFyE1/" target="_blank">
    <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200"><path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path></svg>
  </a>
  
</div>

body {
  background: #000;
  color: #333;
  padding: 20px;
  display: flex;
  justify-content: center;
  
}

dl {
  font: 14px/1.4 sans-serif;
  width: 400px;
}

dl a {
  display: block;
  padding: 10px;
  position: relative;
  
  text-decoration: none;
  background: #3B8D8D;
  border-top: 1px solid #000;
  box-shadow: inset 0 1px rgba(255,255,255,.2);
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,.5);
}
dl a::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 10px;
}
dd {
  background: #f0f0f0;
}
dd p {
  margin: 10px;
  font-size: 12px;
}
dd img {
  float: left;
  margin-right: 5px;
  border-radius: 2px;
  box-shadow: 0 1px rgba(0,0,0,.5)
}



dd {
  overflow: hidden;
  transition: max-height .5s;
}
dd:not(:target) {
  max-height: 0;
}
dd:target {
  max-height: 100px;
}













.tutorials {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3f517e;
    padding: .5rem;
    display: grid;
    place-content: center;
    transition: all .28s linear;
    
    &:hover {
      background:#4161b2;
    }
    
    & svg {
      display: block;
      width: 100%;
      height: 100%;
      filter: invert(1);
    }
  }