直接使用代码
图片素材
无
css代码
<style>
.com-h1{font-size:40px;margin-top:40px;padding-bottom:0;margin-bottom:0;text-align:center}
.new-item{height:180px;border:1px solid #ccc;border-radius:6px;box-shadow:0 0 5px #ccc;padding:40px 30px;position:relative;font-size:18px;margin:10px 15px}
.new-item .n-title{transition:all .3s ease;height:50px}
.new-item .n-more{color:#096;line-height:50px;margin-top:30px}
.n-footer{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#096;font-size:16px}
.new-item:hover{box-shadow:0 0 5px #096}
.new-item:hover .n-title{color:#096;margin-top:-10px}
.btn-about{padding:7px 35px;border:2px solid #096;border-radius:4px;display:inline-block;font-size:18px;color:#096;cursor:pointer;margin-top:30px}
</style>
HTML+JS代码
<div class="container text-center" >
<h1 class="com-h1">Aipharmacy工程师的技术见解</h1>
<div class="row mar-top40">
<div class="col-md-4">
<a href='#'
title="只见药品不见人,优控无接触自助取药机正深刻改变传统就医取药模式">
<div class="new-item">
<div class="n-title">只见药品不见人,优控无接触自助取药机正深刻改变传统就医取药模式</div>
<div class="n-more">2021-02-27</div>
<div class="n-footer"></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='#'
title="优控取药机:稳定运行“0故障”耐用高可靠书写“长跑记录”">
<div class="new-item">
<div class="n-title">优控取药机:稳定运行“0故障”耐用高可靠书写“长跑记录”</div>
<div class="n-more">2021-02-08</div>
<div class="n-footer"></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='#'
title="24小时无人药房取药机稳定运行是关键">
<div class="new-item">
<div class="n-title">24小时无人药房取药机稳定运行是关键</div>
<div class="n-more">2021-02-06</div>
<div class="n-footer"></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='#'
title="只见药品不见人,优控无接触自助取药机正深刻改变传统就医取药模式">
<div class="new-item">
<div class="n-title">只见药品不见人,优控无接触自助取药机正深刻改变传统就医取药模式</div>
<div class="n-more">2021-02-27</div>
<div class="n-footer"></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='#'
title="优控取药机:稳定运行“0故障”耐用高可靠书写“长跑记录”">
<div class="new-item">
<div class="n-title">优控取药机:稳定运行“0故障”耐用高可靠书写“长跑记录”</div>
<div class="n-more">2021-02-08</div>
<div class="n-footer"></div>
</div>
</a>
</div>
<div class="col-md-4">
<a href='#'
title="24小时无人药房取药机稳定运行是关键">
<div class="new-item">
<div class="n-title">24小时无人药房取药机稳定运行是关键</div>
<div class="n-more">2021-02-06</div>
<div class="n-footer"></div>
</div>
</a>
</div>
</div>
<a href="http://bootfastui.cn" class="btn-about">查看更多</a>
</div>