链接

  <style>
     .links-content{
     margin-top:1rem;
     }
     .link-navigation::after {
     content: " ";
     display: block;
     clear: both;
     }
     .card {
     width: 45%;
     font-size: 1rem;
     padding: 10px 20px;
     border-radius: 4px;
     transition-duration: 0.15s;
     margin-bottom: 1rem;
     display:flex;
     }
     .card:nth-child(odd) {
     float: left;
     }
     .card:nth-child(even) {
     float: right;
     }
     .card:hover {
     transform: scale(1.1);
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
     }
     .card a {
     border:none;
     }
     .card .ava {
     width: 3rem!important;
     height: 3rem!important;
     margin:0!important;
     margin-right: 1em!important;
     border-radius:4px;
     }
     .card .card-header {
     font-style: italic;
     overflow: hidden;
     width: 100%;
     }
     .card .card-header a {
     font-style: normal;
     color: #2bbc8a;
     font-weight: bold;
     text-decoration: none;
     }
     .card .card-header a:hover {
     color: #d480aa;
     text-decoration: none;
     }
     .card .card-header .info {
     font-style:normal;
     color:#a3a3a3;
     font-size:14px;
     min-width: 0;
     overflow: hidden;
     white-space: nowrap;
     }
  </style>
  <div class="links-content">
     <div class="link-navigation">
        <div class="card">
           <img class="ava" src="https://s2.loli.net/2022/04/18/lYMgAfU7uI9zCpV.jpg" />
           <div class="card-header">
              <div>
                 <a href="https://something.plus/">一颗荔枝味汤圆</a>
              </div>
              <div class="info">荔枝老师今天干嘛啦？</div>
           </div>
        </div>
        <div class="card">
           <img class="ava" src="https://bolo-1257033262.cos.ap-beijing.myqcloud.com/pics/16852896.jfif" />
           <div class="card-header">
              <div>
                 <a href="https://erlkonig.tech/">erlkonig</a>
              </div>
              <div class="info">啊？</div>
           </div>
        </div>
        <div class="card">
           <img class="ava" src="https://q1.qlogo.cn/g?b=qq&nk=1925798514&s=640" />
           <div class="card-header">
              <div>
                 <a href="https://expoli.tech/">糖醋鱼</a>
              </div>
              <div class="info">🐟生成长记</div>
           </div>
        </div>
        <div class="card">
           <img class="ava" src="https://s2.loli.net/2022/06/22/7lh3PsGTDJoNEzf.jpg" />
           <div class="card-header">
              <div>
                 <a href="https://cjsy.cc/">熙泱露</a>
              </div>
              <div class="info">记录是时间最好的解药。</div>
           </div>
        </div>
        <div class="card">
           <img class="ava" src="../images/goloaf.png" />
           <div class="card-header">
              <div>
                 <a href="https://goloaf.top/">Cyberl0afing</a>
              </div>
              <div class="info">摸鱼动力——一个专注于Compiler和计算机杂学的小站</div>
           </div>
        </div>
     </div>
  </div>