实现前端效果，请教一下

img
实现前端效果，请教一下
实现前端效果，请教一下
实现前端效果，请教一下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .box {
      margin: auto;
      width: 600px;
    }
    .box ul li {
      list-style: none;
      float: left;
      width: 100px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
      border-bottom: 3px solid #D2D2D2;
    }
    .box li:hover {
      color: #2E8CCE;
      border-bottom: 3px solid #2E8CCE;
    }
  </style>

</head>
<body>
<div class="box">
  <ul>
    <li>房源概述</li>
    <li>图片集锦</li>
    <li>众筹明细</li>
    <li>专业投资建议</li>
    <li>转让份额</li>
    <li>合同文件</li>
  </ul>
</div>
</body>
</html>

img

我这里设的是鼠标移入字体变蓝
你要是想点击字体变蓝，设置一下点击事件就可以了

好多前端框架有现成的tab标签页，比如elementui