直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
/* 上部栏目文字*/
.com-topArctype{padding:20px; background:url(http://www.bootfastui.cn/img/2021/0509-4/bg_lanmu.jpg) no-repeat right bottom; padding-bottom:40px;}
.com-topArctype h5{ height:40px; line-height:40px; padding-left:15px; border-left:6px solid #337ab7; font-size:25px; color:#337ab7}
.com-topArctype h5 span{ display:block; line-height:40px; color: #aaa;font-size:20px; }
/*新闻动态*/
#list-article .main{ background:#f9f9f9; min-height:700px;}
#list-article .main .news .kuai{ padding:15px; background:#fff; box-shadow:0 0 5px #999; margin:20px;}
#list-article .main .news .kuai:hover{box-shadow:0 0 5px #337ab7;}
#list-article .main .news .kuai .title{ font-size:18px; color:#333; display:block; padding-bottom:15px; font-weight:200}
#list-article .main .news .kuai:hover .title{ color:#337ab7}
#list-article .main .news .kuai .date span{ display:inline-block; background:#337ab7; padding:4px 15px; color:#fff; margin-right:15px;}
#list-article .main .news .kuai .description{ margin-top:15px; line-height:25px; font-size:14px}
.article-content{ min-height:500px;}
.more-btn{display:inline-block;padding:6px 15px;background:#337ab7;color:#fff;border-radius:3px;}
.more-btn:hover{background:#3d7aad;color:#fff;}
</style>
HTML+JS代码
<section class="container">
<div class="f16 line60">
<span class="glyphicon glyphicon-home"></span> <a href="/">首页</a> > 公司新闻
</div>
<div id="list-article" class="row">
<div class="col-md-9">
<div class="main">
<!-- <img src="http://www.bootfastui.cn/img/news1.jpg" width="100%"/>-->
<div class="com-topArctype">
<h5>公司新闻</h5>
</div>
<br>
<div class="news">
<div class="kuai clear row">
<div class="col-md-3 pad-left0">
<img src='/Public/images/img43.jpg' width="100%" />
</div>
<div class="col-md-9 pm">
<a href="/article/77" class="title">1#楼喜封金顶</a>
<div class="date">
<span>公司新闻</span>
2020-08-31 14:12:48
</div>
<p class="description">
1#楼喜封金顶金秋送爽，礼炮阵阵。8月27日上午，湖溪苑项目1#楼主体喜封金顶仪式在工地现场隆重举行，建设、施工、监理等单位人员参加，由郑州辉航置业总....</p>
</div>
<div class="clear"></div>
</div>
<div class="kuai clear row">
<div class="col-md-3 pad-left0">
<img src='/Public/images/img43.jpg' width="100%" />
</div>
<div class="col-md-9 pm">
<a href="/article/58" class="title">这个夏天 一线城市的租房市场有些微妙</a>
<div class="date">
<span>公司新闻</span>
2019-07-17 09:07:12
</div>
<p class="description">每到六七月份，租房市场就迎来了市场需求的小高潮。毕业季，数万学子走向社会，面临的第一个难题就是“该住哪里”，而租房成为大多数应届毕业生的首选。不过，租房....
</p>
</div>
<div class="clear"></div>
</div>
<div class="kuai clear row">
<div class="col-md-3 pad-left0">
<img src='/Public/images/img43.jpg' width="100%" />
</div>
<div class="col-md-9 pm">
<a href="/article/55" class="title">中国房地产市场拒绝“大起大落”</a>
<div class="date">
<span>公司新闻</span>
2019-07-17 09:05:51
</div>
<p class="description"> 六月份七十个大中城市商品住宅销售价格涨幅稳中有降 7月15日，国家统计局发布了6月份70个大中城市商品住宅销售价格变动情况以及1—6月份全国房地产开发投资....
</p>
</div>
<div class="clear"></div>
</div>
<div class="clear"><br /></div>
<nav aria-label="Page navigation" class="pad-left20">
</nav>
</div>
<!--news end -->
<div class="clear"></div>
</div>
</div>
<!-- 公用右侧 -->
<div class="col-md-3">
<div class="row">
<div class="thumbnail">
<img src="http://www.bootfastui.cn/img/2021/0509-4/about.jpg" alt="..." class="img-responsive">
<div class="caption">
<h3>湖溪苑项目工程</h3>
<p>湖溪苑项目位于郑州市中原区苑南路北，湖东路东，占地面积6160.24平方米。该项目包括1#楼、2#楼及地下车库，总建筑规模26923.24平方米...</p>
<a href="/article/51" class="more-btn">了解更多</a>
</div>
</div>
</div>
<div class="row">
<div class="list-group">
<a href="#" class="list-group-item active">
通知公告
</a>
<a href="/article/70" class="list-group-item sheng">在售项目</a>
<a href="/article/62" class="list-group-item sheng">房屋预售</a>
<a href="/article/57" class="list-group-item sheng">涨幅全面回落 三季度房市预期“降温”</a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</section>
