专业列表

直接使用代码

图片素材

css代码

 <style>
.org-index-zhuanye .item-zhuanye{padding:20px;border-radius:10px;box-shadow:0 0 20px #ccc;margin:25px; padding-bottom:10px}
.org-index-zhuanye .item-zhuanye img{width:220px;height:400px;border-radius:10px;}
.org-index-zhuanye .item-zhuanye h3{color:#237b7c;text-align:center;font-size:30px;margin-top:0;padding-top:0}
.org-index-zhuanye .item-zhuanye .z-description{margin:12px 0;height:310px;overflow: hidden;}
.org-index-zhuanye .item-zhuanye a{display:inline-block;padding:4px 15px;border:1px solid #999;margin-right:15px;}
.org-index-zhuanye .item-zhuanye a:hover{background:#237b7c;color:#fff;}

</style>

HTML+JS代码

 

<div class="container">

  <!-- 开设专业 -->
  <img src="http://www.bootfastui.cn/img/2021/0426/title2.jpg" class="center-block org-index-title" />
  <div class="org-index-zhuanye">
    <!-- item start -->
    <div class="col-md-6">
      <div class="item-zhuanye">
        <div class="row">
          <div class="col-md-6">
            <img src="http://www.bootfastui.cn/img/2021/0426/5e72e89a838d6.jpg" />
          </div>
          <div class="col-md-6">
            <h3 class="z-title">舞蹈</h3>
            <p class="z-description">
              只有行动，才不会被动。新冠肺炎疫情让人们安静地宅在家，用沉默与守望支援这场14亿人的战“疫”。惊蛰过，春将半，正是跳舞好时节。3月14日起，中国体育舞蹈联合会持续推出“战疫情，舞在你身边——中国体育舞蹈公益课程”，由齐志峰、沈毅、邵克强、胡耀、沈宏、侯垚、庄婷、赵鹏、汪琪、程丹、李祯妮、阎棒棒、杜玉君组成的教师团队，将陆续在抖音平台进行教学直播
            </p>
            <div class="info">
              <a href="">查看详情</a>
              <span class="glyphicon glyphicon-eye-open"> 1209</span>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- item end -->
    <!-- item start -->
    <div class="col-md-6 ">
      <div class="item-zhuanye">
        <div class="row">
          <div class="col-md-6">
            <img src="http://www.bootfastui.cn/img/2021/0426/5e72e89a838d6.jpg" />
          </div>
          <div class="col-md-6">
            <h3 class="z-title">播音主持</h3>
            <p class="z-description">
              播音主持课程是一门专业课，也是一门素质课。它可以开发心智、挑战自我、培养孩子独立自主的能力，以及集体合作精神。**播音主持课程中的形体训练，从站、坐、行、舞蹈等方面入手，规范青少儿的言谈举止，培养了学生的想象力和表现力。学习播音主持课就是一门能够改变性格内向问题的课程，学习播音主持上台的机会也很多，学生可以经常上台去朗读、演讲、模拟主持等等，而这些训练都是改善性格上的懦弱、自卑的有效途径。
            </p>
            <div class="info">
              <a href="">查看详情</a>
              <span class="glyphicon glyphicon-eye-open"> 1209</span>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- item end -->
    <!-- item start -->
    <div class="col-md-6 ">
      <div class="item-zhuanye">
        <div class="row">
          <div class="col-md-6">
            <img src="http://www.bootfastui.cn/img/2021/0426/5e72e89a838d6.jpg" />
          </div>
          <div class="col-md-6">
            <h3 class="z-title">美术</h3>
            <p class="z-description">
              欧洲17世纪开始使用“美术”这一名词时，泛指具有美学意义的活动。也有
              认为“美术”一词正式出现应在18世纪中叶。18世纪产业革命后，美术范围益见扩大，有绘画、雕塑、工艺美术、建筑艺术等，在东方还涉及书法和篆刻艺术等。中国五四运动前后开始普遍应用这一名词。近数十年来欧美各国已不大使用“美术”一词，往往以“艺术”一词统摄之。欧洲17世纪开始使用“美术”这一名词时，泛指具有美学意义的活动。也有
              认为“美术”一词正式出现应在18世纪中叶。18世纪产业革命后，美术范围益见扩大，有绘画、雕塑、工艺美术、建筑艺术等，在 </p>
            <div class="info">
              <a href="">查看详情</a>
              <span class="glyphicon glyphicon-eye-open"> 1209</span>
            </div>
          </div>
        </div>
      </div>
    </div>


    <!-- item end -->
    <!-- item start -->
    <div class="col-md-6 ">
      <div class="item-zhuanye">
        <div class="row">
          <div class="col-md-6">
            <img src="http://www.bootfastui.cn/img/2021/0426/5e72e89a838d6.jpg" />
          </div>
          <div class="col-md-6">
            <h3 class="z-title">书法</h3>
            <p class="z-description">
              书法，是中国及深受中国文化影响过的周边国家和地区特有的一种文字美的艺术表现形式。包括汉字书法、蒙古文书法、阿拉伯书法和英文书法等。其“中国书法”，是中国汉字特有的一种传统艺术。 </p>
            <div class="info">
              <a href="">查看详情</a>
              <span class="glyphicon glyphicon-eye-open"> 1209</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clear"></div>

    <!-- item end -->

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

</div>