顶部导航产品列表

直接使用代码

图片素材

css代码

 <style>
/* 公用路径 */
.com-tree{margin:20px 0;border-bottom:1px solid #ccc;}
.com-tree a{display: inline-block;margin-right:10px;line-height:40px;color:#199ed8}
.com-tree a.current{color:#555;}

/* 栏目导航 */
.top-list-nav a{display: inline-block;padding:8px 15px;margin:10px 15px;border:1px solid #ccc;border-radius: 4px;}
.top-list-nav a:hover,.top-list-nav a.current{background:#0080ff;color:#fff}
/* 内容卡片 */
.news-item{margin:30px 0;}
.news-item .news-content{border:1px solid #ccc;border-top:none;padding:20px;color:#999}
.news-item .news-content h4{color:#333;}
.news-item .news-content a:hover h4{color:#199ed8}
.news-item .news-content .n-description{margin:15px 0;color:#999;}
.news-item .news-content .data{color:#999;}
.news-item .news-content .data img{vertical-align: middle;margin-right:10px;;}
</style>

HTML+JS代码

<section class=" container">
  <div class="com-tree">
    <a href="http://www.bootfastui.cn">首页</a>>
    <a href="http://www.bootfastui.cn" class="current">精选案例</a>
  </div>


  <div class="text-center top-list-nav">
    <a href="http://www.bootfastui.cn" class="current">精选案例</a>
    <a href="http://www.bootfastui.cn">精选案例</a>
    <a href="http://www.bootfastui.cn">精选案例</a>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="news-item">
        <img src="http://www.bootfastui.cn/img/2021/0509/96e81f0bbf1e979103dbcdfdc8521f5f.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">柬埔寨 · 太子金边公馆</h4>
            <!-- <p class="n-description" ><p><br/></p><p><br/></p><p><hr/><br/></p><p style="text-align: center;"><span style="color: rgb(51, 51, 51); font-family</p> -->
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0509/ico_time.png" width="25" />
              <span>2020-01-15 11:58:04</span>
            </p>
          </a>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="news-item">
        <img src="http://www.bootfastui.cn/img/2021/0509/0517e2011014200ee4b8a6da560aeb78.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">杭州卡尔芙酒店</h4>
            <!-- <p class="n-description" ><p style="text-align: left;"><strong><strong style="font-family: &quot;Source Han Sans CN&quot;, &quot;Microsoft Yahei&q</p> -->
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0509/ico_time.png" width="25" />
              <span>2020-01-15 11:59:01</span>
            </p>
          </a>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="news-item">
        <img src="http://www.bootfastui.cn/img/2021/0509/6afb6b624da5757cbb839f952557e8a5.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">光合院</h4>
            <!-- <p class="n-description" ><hr/><p style="margin-bottom: 0px; color: rgb(102, 102, 102); font-family: &quot;Source Han Sans CN&quot;, &quot;Microso</p> -->
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0509/ico_time.png" width="25" />
              <span>2020-01-15 13:00:02</span>
            </p>
          </a>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="news-item">
        <img src="http://www.bootfastui.cn/img/2021/0509/ee8f4415fbf9cc6fdbdcd0adfa8ded2b.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">优秀案例 · 舒宅智能影音</h4>
            <!-- <p class="n-description" ><section><section><p><br/></p><p><br/></p><hr/><p><br/></p><p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; </p> -->
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0509/ico_time.png" width="25" />
              <span>2020-01-15 12:03:25</span>
            </p>
          </a>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="news-item">
        <img src="http://www.bootfastui.cn/img/2021/0509/e02e353a3ad81ff4f4530dd1009f8a37.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">宋都 · 时间名座</h4>
            <!-- <p class="n-description" ></p> -->
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0509/ico_time.png" width="25" />
              <span>2020-01-14 18:47:06</span>
            </p>
          </a>

        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="news-item">
        <img src="http://www.bootfastui.cn/img/2021/0509/7ddee2eb7d1d688428ecca779676ec72.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">新汇 · 东海岸温泉御府</h4>
            <!-- <p class="n-description" ></p> -->
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0509/ico_time.png" width="25" />
              <span>2020-01-14 18:47:43</span>
            </p>
          </a>

        </div>
      </div>
    </div>


  </div>
</section>