直接使用代码
图片素材
点击下载本素材所包含的图片,js文件
css代码
<style>
.com-top-arctype {padding:30px ;text-align:center;color:#6ac3ba}
.com-top-arctype h1{font-size:50px;font-weight:500;font-family: Arial, Helvetica, sans-serif}
.com-top-arctype h4{font-size:20px;font-weight:bold;background:url(http://www.bootfastui.cn/img/2021/0329-8/bg_arctype.png) no-repeat center top;height:60px; }
.list-news{box-shadow: 0 0 10px #ccc;padding:30px 10px;margin-bottom:50px;}
.news-tuijian .tuijian-title{color:#bd943a;font-size:24px;margin-top:0;padding-top:0;line-height:35px;}
.news-tuijian p{line-height:25px;margin:27px 0;}
.news-tuijian .more{display:inline-block;padding:6px 15px;background:#333;color:#fff;border-radius:6px}
.news-tuijian .relative{position: relative;}
.news-tuijian .relative .date{position: absolute;top:0;left:15px;width:80px;text-align:center;color:#fff;background:#bd943a;padding:15px 0 6px 0;}
.news-tuijian .relative h5{font-size:40px;margin:0;padding:0}
.news-item{margin:0 20px;padding:20px 0;border-bottom:1px solid #eee;}
.news-item .left-block{background:#efefef;text-align:center;padding:10px 0;height:70px;margin-left:50px;}
.news-item .left-block span{font-size:16px;}
.news-item .left-block p{font-size:25px;margin:0;padding:0}
.news-item a h5{font-size:20px; color:#000;margin-top:0;padding-top:0;}
.news-item a:hover h5{color:#53cabe}
.news-item a p{line-height:25px;margin:20px 0;}
</style>
HTML+JS代码
<!--新闻动态-->
<div class="container">
<div class="com-top-arctype">
<h1>NEWS DYNAMIC</h1>
<h4>新闻动态</h4>
</div>
<!-- 主体内容 -->
<div class="list-news">
<!-- 推荐新闻 -->
<div class="news-tuijian">
<div class="col-md-4">
<div class="relative">
<img src="/Public/images/img32.jpg" width="100%" />
<div class="date">
<div>2021-03</div>
<h5>29</h5>
</div>
<div class="clear"></div>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h4 class="tuijian-title">少儿艺术培训:政策催化行业洗牌 依靠监管账户建立新型教培市场</h4>
<p>
《国务院办公厅关于规范校外培训机构发展的意见》印发以来,大多数校外培训机构严格执行有关管理规定,依法依规开展培训业务。但近期也发现,仍有部分培训机构无资质、无证照开展培训活动,还有部分培训机构以充值优惠、买多送多等方式,
</p>
</a>
<a class="more" href="http://www.bootfastui.cn">MORE+</a>
</div>
</div>
<div class="clear"><br /></div>
<div class="clear mar-y30" style="border-bottom:1px solid #aaa;"></div>
<!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-03</span>
<p>26</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>如何监管校外培训机构最有力?监管账户是关键</b></h5>
<p>
近年,校外培训机构无序生长,全面整顿治理的脚步刻不容缓。超纲超标教学、教师素质良莠不齐、收费贵... </p>
</a>
</div>
<div class="clear"></div>
</div><!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-03</span>
<p>22</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>校外培训机构乱象如何治理:找到病灶还要对症下药</b></h5>
<p>
自2018年8月国办印发《关于规范校外培训机构发展的意见》以来,按照党中央、国务院的决策部署,... </p>
</a>
</div>
<div class="clear"></div>
</div><!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-03</span>
<p>17</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>对校外艺术培训机构的监管应该适当地加强</b></h5>
<p>
从整个社会来说,培训机构是艺术培训的主战场。青少年的艺术教育,极大的依赖着校外艺术培训机构。随... </p>
</a>
</div>
<div class="clear"></div>
</div><!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-03</span>
<p>12</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>选择校外艺术培训机构擦亮双眼!“一看、二查、三问”精准筛选</b></h5>
<p>
家长该如何科学、合理地选择校外培训机构?家长选择校外培训机构时,签合同和缴费上要注意哪些问题?... </p>
</a>
</div>
<div class="clear"></div>
</div><!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-01</span>
<p>29</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>郑州舞韵艺术违背国家政策采取年收费形式!明知故犯到底为哪般?</b></h5>
<p>
近年,随孩子们对教育培训的需求增强,更多的校外培训机构也如雨后春笋般应运而生,但紧跟其后的并不... </p>
</a>
</div>
<div class="clear"></div>
</div><!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-01</span>
<p>27</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>艺培机构首批“黑名单”,舞韵舞蹈名列其中!诚信办学任重道远</b></h5>
<p> 从之前的采访可以看出,大部分机构和家长都十分支持校外艺术培训机构学费监管账户的落地。有些机构默默耕... </p>
</a>
</div>
<div class="clear"></div>
</div><!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-01</span>
<p>25</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>校外艺术培训机构怎么挑,关注郑州电视台——《测评在行动》</b></h5>
<p>
面向中小学生的校外培训机构开展非学历教育培训是学校教育的补充,对于满足中小学生发展兴趣特长,拓... </p>
</a>
</div>
<div class="clear"></div>
</div><!-- 新闻列表项 -->
<div class="news-item">
<div class="col-md-2 col-md-offset-1">
<div class="left-block">
<span>21-01</span>
<p>25</p>
</div>
</div>
<div class="col-md-8">
<a href="http://www.bootfastui.cn">
<h5><b>资金监管账户设立!妈妈再也不用担心我的培训机构跑路啦!</b></h5>
<p>
近年来,随着国内教培行业的兴盛,各地校外培训机构如雨后春笋般成立,然而,由于入行门槛很低,导致... </p>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</div>