直接使用代码

图片素材

css代码

 <style>
/********** 签证产品列表页样式 **********/
.service-item dd{height:164px;position:relative;overflow:hidden;margin-top:30px;width:100%;}
.service-item .service-item-title{color:#333;display:block;}
.service-item .service-item-title:hover{color:#0ba1e4;text-decoration:none;cursor:pointer;}
.service-item h3{margin:0;line-height:1.5em;border-bottom:1px dashed #c1c1c1;margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-wrap:break-word;}
.service-item p{margin:0;line-height:2em;}
.service-item p>span{display:inline-block;font-weight:normal;margin-right:20px;}
.star{color:#ddd;}
.star i{color:#f90;font-style:normal !important;}
.service-item .btn{position:absolute;right:15px;bottom:5px;color:#f93;border-color:#f93;}
.service-item .btn:hover{background-color:#f93;color:#fff;}
/*手机超小屏幕下的单独样式 xs < 768px */
@media (max-width:767px){.service-item{padding-top:10px;}
.service-item dd{height:82px;position:relative;overflow:hidden;-moz-background-size:62px 82px;-webkit-background-size:62px 82px;background-size:62px 82px;}
.service-item h3{font-size:18px;margin-bottom:0;}
.service-item p{margin:0;line-height:1.5em;}
.service-item p>span{margin-right:10px;}
.service-item .btn{position:absolute;right:15px;bottom:0;}
}
/*手机超小屏幕下的单独样式 xs < 768px */
/********** 签证产品列表页样式 **********/

</style>

HTML+JS代码

 <section class="container">
  <div class="row main-container-row" style="position: relative">
    <div class="col-xs-12 col-sm-12 service-list">
      <dl class="service-item">

        <dd class="liucheng">
          <div class="row">
            <div class="col-sm-2 col-xs-3">
              <img src="/Public/images/img23.jpg" width="100%" alt="">
            </div>
            <div class="col-sm-10 col-xs-9">
              <a href="http://www.bootfastui.cn" class="service-item-title">
                <h3>美国签证加急预约</h3>
              </a>
              <p class="hidden-xs">
                <span>受理范围: 全国受理</span>
                <span>入境次数: 多次往返</span>
                <span>有效期限: 十年有效</span><br />
                <span>停留期限: 海关决定</span>
                <span class="hidden-sm">是否邮寄: 无需邮寄</span>
              </p>
              <p>
                <span>办理难度: <span class="star"><i>★★★★</i>★</span></span>
              </p>
              <p>
                <span>能否加急: 可加急办理</span>
              </p>
              <a href="http://www.bootfastui.cn" class="btn btn-outline-blue">查看详情</a>
            </div>
          </div>
        </dd>      
     

        <dd class="liucheng">
          <div class="row">
            <div class="col-sm-2 col-xs-3">
              <img src="/Public/images/img23.jpg" width="100%" alt="">
            </div>
            <div class="col-sm-10 col-xs-9">
              <a href="http://www.bootfastui.cn" class="service-item-title">
                <h3>美国签证加急预约</h3>
              </a>
              <p class="hidden-xs">
                <span>受理范围: 全国受理</span>
                <span>入境次数: 多次往返</span>
                <span>有效期限: 十年有效</span><br />
                <span>停留期限: 海关决定</span>
                <span class="hidden-sm">是否邮寄: 无需邮寄</span>
              </p>
              <p>
                <span>办理难度: <span class="star"><i>★★★★</i>★</span></span>
              </p>
              <p>
                <span>能否加急: 可加急办理</span>
              </p>
              <a href="http://www.bootfastui.cn" class="btn btn-outline-blue">查看详情</a>
            </div>
          </div>
        </dd>

      </dl>

    </div>
  </div>

</section>