新闻封面页

直接使用代码

图片素材

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/0330/bg_arctype.png) no-repeat center top;height:60px; }

/* 政策法规页面 */
.list-fagui{box-shadow: 0 0 10px #ccc;padding:30px 10px;margin-bottom:50px;}
.list-fagui .top-item{width:340px;margin:15px;float:left;padding:15px 10px;border:1px solid #ccc;border-radius:6px;}
.list-fagui .top-item .tuijian-title{height:45px;}
.list-fagui .top-item p{font-size:28px;}
.list-fagui .top-item .more{display:inline-block;padding:2px 12px;color:#333;border-radius:6px;border:1px solid #999;margin:15px 0}
.list-fagui .top-item .more:hover{background:#53cabe;border:1px solid #53cabe;color:#fff;cursor: pointer;}

.fagui-item{width:550px;float:left;margin:20px 0;height:100px;}
.fagui-item .left-block p{font-size:35px;border-right:2px solid #333;line-height:70px;font-weight: 600;color:#b20101}
.fagui-item a h5{font-size:20px; color:#000;margin-top:0;padding-top:0;}
.fagui-item a:hover h5{color:#53cabe}
.fagui-item a p{line-height:20px;margin:6px 0;font-size:14px;color:#888}

</style>

HTML+JS代码

  
<!--政策法规-->
<div class="container">
  <div class="com-top-arctype">
    <h1>POLICIES AND REGUIATIONS</h1>
    <h4>政策法规</h4>
  </div>

  <!-- 主体内容 -->
  <div class="list-fagui">
    <div class="h05 bg-ef mar-bottom10"></div>
    <!-- 推荐新闻 -->
    <div class="top-item">

      <span class="f18">2018-08-06</span>
      <div class="clear mar-top15"></div>
      <img src="/Public/images/img32.jpg" width="100%" height='160' />

      <a href="http://www.bootfastui.cn">
        <h4 class="tuijian-title">国务院办公厅关于规范校外培训机构发展的意见</h4>

      </a>
      <a class="more" href="http://www.bootfastui.cn">了解详情 &gt;</a>
    </div><!-- 推荐新闻 -->
    <div class="top-item">


      <span class="f18">2020-04-17</span>
      <div class="clear mar-top15"></div>
      <img src="/Public/images/img32.jpg" width="100%" height='160' />

      <a href="http://www.bootfastui.cn">
        <h4 class="tuijian-title">河南省教育厅办公室转发教育部办公厅关于做好2020年春季学期中小学教育教学工作的通知</h4>
      </a>
      <a class="more" href="http://www.bootfastui.cn">了解详情 &gt;</a>
    </div><!-- 推荐新闻 -->
    <div class="top-item">
      <span class="f18">2020-04-17</span>
      <div class="clear mar-top15"></div>
      <img src="/Public/images/img32.jpg" width="100%" height='160' />

      <a href="http://www.bootfastui.cn">
        <h4 class="tuijian-title">教育部提醒：校外培训机构不得违规提前预收培训费</h4>

      </a>
      <a class="more" href="http://www.bootfastui.cn">了解详情 &gt;</a>
    </div>
    <div class="clear"></div>

    <!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            01 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">
            河南省教育厅办公室转发教育部办公厅关于做好2020年春季学期中小学教育教学工作的通知
          </h5>
        </a>
      </div>
      <div class="clear"></div>
    </div><!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            02 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">教育部提醒：校外培训机构不得违规提前预收培训费</h5>
        </a>
      </div>
      <div class="clear"></div>
    </div><!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            03 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">
            教育部办公厅关于做好2020年春季学期中小学教育教学工作的通知
          </h5>
        </a>
      </div>
      <div class="clear"></div>
    </div><!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            04 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">
            关于积极发挥行业协会商会作用支持民营中小企业复工复产的通知
          </h5>
        </a>
      </div>
      <div class="clear"></div>
    </div><!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            05 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">
            关于依法科学精准做好新冠肺炎疫情防控工作的通知
          </h5>
        </a>
      </div>
      <div class="clear"></div>
    </div><!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            06 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">
            关于做好教育系统新型冠状病毒感染的肺炎疫情防控后勤保障工作的通知
          </h5>
        </a>
      </div>
      <div class="clear"></div>
    </div><!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            07 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">

            河南省教育厅办公室《关于开展校外培训机构排查整治工作的通知》的通知
          </h5>

        </a>
      </div>
      <div class="clear"></div>
    </div><!-- 新闻列表项 -->
    <div class="fagui-item">
      <div class="col-md-2">
        <div class="left-block">
          <p>
            08 </p>
        </div>
      </div>
      <div class="col-md-10">
        <a href="http://www.bootfastui.cn">
          <h5 class="line30">

            教育部等十一部门关于促进在线教育健康发展的指导意见
          </h5>

        </a>
      </div>
      <div class="clear"></div>
    </div>


    <div class="clear mar-top30">
      <hr />
    </div>

  </div>
</div>