直接使用代码
图片素材
无
css代码
<style>
/*文章列表*/
.com-tree{background:#f1f1f1;line-height:40px;font-size:15px;padding-left:10px;}
.my-arctype-title{ width:100%; height:35px; border-bottom:1px solid #CCC; position:relative; z-index:1;font-size:16px;}
.my-arctype-title p.title{padding:0; margin:0; display:inline-block;height:35px; border-bottom:1px solid #00907e;
position:absolute;z-index:2; font-size:20px; color:#00907e;font-weight: bold;}
#list-article{ min-height:600px; margin-top:20px;}
/*新闻动态*/
#list-article .main .news .kuai{ padding:10px;padding-top:15px; background:#fff; box-shadow:0 0 10px #c0d6e9; margin:30px 0;}
#list-article .main .news .kuai:hover{box-shadow:0 0 10px #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;}
</style>
HTML+JS代码
<div class="container">
<img src="http://bootfastui.cn/Public/images/banner1.jpg" alt="" width="100%">
<div class="com-tree">
当前位置：<span class="glyphicon glyphicon-home"></span> <a href="http://bootfastui.cn">首页</a> > 医院动态 > 内容列表
</div>
</div>
<div class="container">
<div id="list-article" class="row">
<!-- 公用右侧 -->
<div class="col-md-3">
<div class="list-group">
<a href="http://bootfastui.cn" class="list-group-item active f18">
<b>医院动态</b>
</a>
<a href="http://bootfastui.cn" class='list-group-item sheng '>
工作动态
<span class="glyphicon glyphicon-chevron-right fright"></span>
</a>
<a href="http://bootfastui.cn" class='list-group-item sheng '>
图片新闻
<span class="glyphicon glyphicon-chevron-right fright"></span>
</a>
<a href="http://bootfastui.cn" class='list-group-item sheng '>
视频新闻
<span class="glyphicon glyphicon-chevron-right fright"></span>
</a>
</div>
<div class='clear mar-y15'><a href="http://bootfastui.cn"><img src='http://bootfastui.cn/Public/images/img31.jpg' width='100%' /></a>
</div>
<div class='clear mar-y15'><a href="http://bootfastui.cn"><img src='http://bootfastui.cn/Public/images/img31.jpg' width='100%' /></a>
</div>
</div>
<div class="col-md-9">
<div class="main">
<div class="my-arctype-title">
<p class="title">医院动态</p>
</div>
<div class="news">
<div class="kuai clear row">
<div class="col-md-12 ">
<a href="http://bootfastui.cn" class="title">强化培训 助推三级医院创建</a>
<div class="date">
<span>工作动态</span>
2021-03-08 09:56:18
</div>
<p class="description">
—玉门市第一人民医院开展三级医院创建专题培训（二）3月6日下午，玉门市第一人民医院创建三级医院第二次专题培训会召开，会议由医院副院长、三级医院创建办公室....</p>
</div>
<div class="clear"></div>
</div>
<div class="kuai clear row">
<div class="col-md-12 ">
<a href="http://bootfastui.cn"
class="title">玉门市第一人民医院召开学习贯彻习近平新时代中国特色社会主义思想提升领导干部能力素质研讨班学习会议</a>
<div class="date">
<span>图片新闻</span>
2021-03-04 16:33:28
</div>
<p class="description">
3月3日，玉门市第一人民医院召开学习贯彻习近平新时代中国特色社会主义思想提升领导干部能力素质研讨班学习会议。会议由党委书记、院长龚学全主持，医院领导班子....</p>
</div>
<div class="clear"></div>
</div>
<div class="kuai clear row">
<div class="col-md-12 ">
<a href="http://bootfastui.cn" class="title">玉门市第一人民医院开展“爱耳日”义诊活动</a>
<div class="date">
<span>工作动态</span>
2021-03-04 15:25:27
</div>
<p class="description">
3月3日是我国第22个全国爱耳日，今年的主题是“人人享有听力健康——筛查·康复·沟通”。为普及爱耳护耳知识，关注听力健康，关爱听障群体，近日医院组织耳鼻喉科医师....</p>
</div>
<div class="clear"></div>
</div>
<div class="kuai clear row">
<div class="col-md-12 ">
<a href="http://bootfastui.cn" class="title">强化培训 助推三级医院创建</a>
<div class="date">
<span>图片新闻</span>
2021-03-03 16:34:14
</div>
<p class="description">
——玉门市第一人民医院开展三级医院创建专题培训 为进一步推进三级医院创建，加强日常学科管理工作，使我院在医疗技术、服务质量、管理水平等方面达到三级乙....</p>
</div>
<div class="clear"></div>
</div>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1</span></li>
<li><a href="http://bootfastui.cn">2</a></li>
<li><a href="http://bootfastui.cn">3</a></li>
<li><a href="http://bootfastui.cn">4</a></li>
<li><a href="http://bootfastui.cn">5</a></li>
<li><a href="http://bootfastui.cn">6</a></li>
<li><a href="http://bootfastui.cn">7</a></li>
<li><a href="http://bootfastui.cn" rel="next">»</a></li>
</ul>
</nav>
</div>
<!--news end -->
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
