直接使用代码
图片素材
点击下载本素材所包含的图片,js文件
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: "Source Han Sans CN", "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: "Source Han Sans CN", "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>