直接使用代码

图片素材

无

css代码

 <style>
.aligncenter{padding:30px 0;text-align:center}
.aligncenter h2{font-weight:700}
.skill-home{margin-bottom:50px}
.c1{border:#ed5441 1px solid;background:#ed5441}
.c2{border:#24c4db 1px solid;background:#24c4db}
.c3{border:#1891ec 1px solid;background:#1891ec}
.c4{border:#609cec 1px solid;background:#609cec}
.skill-home .icons{display:inline-block;display:inline-table;padding:0;width:144px;height:144px;border:4px solid #c00;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:0;border-radius:50%;background:0 0;background:#fff;color:#fff;color:#29448e;text-align:center;font-size:42px;font-size:38px;-ms-border-radius:50%}
.skill-home .icons img{width:100%}
.skill-home h2{padding-top:20px;font-weight:700;font-size:36px}
.box-area{margin-top:-31px;padding:15px;border:4px solid #f3f3f3;background:#fff}
.box-area h3{padding:15px 10px;font-weight:600;font-size:17px}
.box-area p{color:#666}

</style>

HTML+JS代码

 <section id="content">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="aligncenter">
          <h2 class="aligncenter">最新产品</h2>
         <p class="gray"> 我们拥有研发、设计、生产一线化的工业体制，生产出的产品进经过国际认证。我们拥有研发、设计、生产一线化的工业体制，生产出的产品进经过国际认证。</p>
        </div>
        <br />
      </div>
    </div>
    <div class="row">
      <div class="skill-home">
        <div class="skill-home-solid clearfix">
          <div class="col-md-3 text-center">
            <span class="icons c1"><img src="http://www.bootfastui.cn/Public/images/img11.jpg" class="img-circle" /></span>
            <div class="box-area">
              <h3>疯狂动物城系列</h3>
              <p>著名设计师张一一之手设计，同名动画片同步推出</p>
            </div>
          </div>
          <div class="col-md-3 text-center">
            <span class="icons c2"><img src="http://www.bootfastui.cn/Public/images/img11.jpg" class="img-circle" /></span>
            <div class="box-area">
              <h3>圣诞老人系列</h3>
              <p>著名设计师张一一之手设计，同名动画片同步推出</p>
            </div>
          </div>
          <div class="col-md-3 text-center">
            <span class="icons c3"><img src="http://www.bootfastui.cn/Public/images/img11.jpg" class="img-circle" /></span>
            <div class="box-area">
              <h3>宠物狗系列</h3>
              <p>著名设计师张一一之手设计，同名动画片同步推出</p>
            </div>
          </div>
          <div class="col-md-3 text-center">
            <span class="icons c4"><img src="http://www.bootfastui.cn/Public/images/img11.jpg" class="img-circle" /></span>
            <div class="box-area">
              <h3>宠物猫系列</h3>
              <p>著名设计师张一一之手设计，同名动画片同步推出</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>