直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
.com-tree{margin:20px 0;border-bottom:1px solid #ccc;}
.com-tree a{display: inline-block;margin-right:10px;line-height:40px;color:#199ed8}
.com-tree a.current{color:#555;}

/* --------------------我的动态---------------- */
.news-item{padding:30px 0;}
.news-item .news-content{border:1px solid #ccc;border-top:none;padding:20px;color:#999}
.news-item .news-content h4{color:#333;}
.news-item .news-content a:hover h4{color:#199ed8}
.news-item .news-content .n-description{margin:15px 0;color:#999;}
.news-item .news-content .data{color:#999;}
.news-item .news-content .data img{vertical-align: middle;margin-right:10px;;}

.news-item{
    transition: all .3s;
}
.news-item:hover {
 
    margin-top: -8px;
    padding-bottom:38px;
    /* box-shadow: 0 0 10px 5px rgba(0,193,222,.2) */
}
</style>

HTML+JS代码

 <section class=" container">
  <div class="com-tree">
    <a href="http://www.bootfastui.cn">首页</a>>
    <a href="http://www.bootfastui.cn" class="current">我的动态</a>
  </div>

  <div class="row">

    <div class="col-md-4">
      <div class="news-item">
        <img src="/Public/images/img32.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">艺智宝·华夏第六届“以德修艺”员工内训圆满结束</h4>
            <p class="n-description">教育工作者，应当回归艺术教育本质，用爱的艺术培养温、良、恭、俭、让的下一代。在艺术教育熏陶下，让孩子实现最高人格的养成</p>
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0329/ico_time.png" width="25" />
              <span>2020-01-15 22:05:42</span>
            </p>
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="news-item">
        <img src="/Public/images/img32.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">有一种修养，叫“言不及私”</h4>
            <p class="n-description">一次，身为仓库文员的我，与公司财务总监徐姐陪客户吃饭。席间，几个客户就我们公司及老板的一些情况对徐姐轮番发问。但我注意到</p>
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0329/ico_time.png" width="25" />
              <span>2020-01-15 22:12:42</span>
            </p>
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-4">
      <div class="news-item">
        <img src="/Public/images/img32.jpg" width="100%" />
        <div class="news-content">
          <a href="http://www.bootfastui.cn">
            <h4 class="sheng">有一种修养，叫“言不及私”</h4>
            <p class="n-description">一次，身为仓库文员的我，与公司财务总监徐姐陪客户吃饭。席间，几个客户就我们公司及老板的一些情况对徐姐轮番发问。但我注意到</p>
            <p class="data">
              <img src="http://www.bootfastui.cn/img/2021/0329/ico_time.png" width="25" />
              <span>2020-01-15 22:12:42</span>
            </p>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>