<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>考试题</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .clearfix {
        *zoom: 1;
      }
      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-size: 100%;
        font-weight: normal;
      }

      ul {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #000000;
      }

      .wrap {
        width: 1200px;
        margin: 30px auto;
      }

      .wrap .k_top {
        /* font-size: 22px;
        font-weight: bold;
        line-height: 40px; */
        font: bold 22px/40px "微软雅黑";
        border-bottom: 2px solid #c1c1c1;
        color: red;
      }

      .wrap .k_ul {
        margin-top: 20px;
        font-size: 15px;
      }

      .wrap ul {
        float: left;
        margin-right: 60px;
      }

      .wrap ul i {
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #d3d3d3;
        vertical-align: middle;
      }

      .wrap ul li {
        line-height: 30px;
        width: 350px;
      }

      .wrap ul .bt {
        font-size: 18px;
        margin-bottom: 10px;
      }

      .wrap ul li span {
        float: right;
        font-size: 14px;
        color: #999999;
      }
      .wrap .mr{
        margin-right: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div class="k_top">
        <h2>考试题库</h2>
      </div>
      <div class="k_ul clearfix">
        <ul class="zt">
          <li class="bt">真题</li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制历史历史
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制历史
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
        </ul>

        <ul class="mn">
          <li class="bt">模拟题</li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制历史
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
        </ul>

        <ul class="mr">
          <li class="bt">每日一练</li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制历史
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
          <li>
            <i></i>
            <a href="javascript:;">
              16公共基础知识:历史-占田制
              <span>08-04</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

列表html案例_html案例