业务介绍

直接使用代码

图片素材

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;}


.com-title{margin-bottom:40px;text-align:center}
.com-title .c-title{display:inline-block;margin:0 auto;padding:0 20px;line-height: 60px;border-bottom:3px solid #ef730c;clear:both;font-size:32px;}
.com-title .c-description {line-height:30px;margin-top:30px;}

.index-com-box{padding-top:50px;}
.index-com-box .index-com-title{font-size:32px;text-align:center;color:#000;font-weight: bold;}
.index-com-box .index-com-descption{text-align: center;font-size:14px;line-height: 30px;color:#444;;margin-bottom:40px;}

</style>

HTML+JS代码

 
<div class=" container">
  <div class="com-tree">
    <a href="/">首页</a>>

    <a href="/" class="current">祺呈旅行卡</a>
  </div>

  <img src="http://www.bootfastui.cn/img/2021/0329-4/logo.png" class="center-block" width="250" />
</div>

<!-- 课程列表 -->
<div class="index-com-box">
  <div class="container">
    <div class="com-title ">
      <h3 class="c-title"> 祺呈旅行卡</h3>
      <p class="c-description">
        祺呈旅行卡——是介于传统参团游和自由行之间<br />
        相对集中了两种类型的优势<br />
        即参团游的价格优势和自由行的时间优势。参加目的地旅游的游客可享受自由行的乐趣，<br />
        又得到参团游的实惠，可谓一举两得。目的地旅游是未来旅游不可或缺的旅游形式。
      </p>
    </div>

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

<!-- 课程特色 -->
<div class="index-com-box">
  <div class="container">
    <div class="com-title ">
      <h3 class="c-title">卡品特色</h3>
      <div class="clear"><br /><br /></div>
      <img src="http://www.bootfastui.cn/img/2021/0329-4/c2.jpg" width="100%" />
    </div>
  </div>
</div>


<!-- 已上线课程 -->
<div class="index-com-box ">
  <div class="container">
    <h3 class="index-com-title">精品线路</h3>
    <p class="index-com-descption">世界那么大，我想去看看</p>
    <div class="row">
      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>
      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>
      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>
      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>

      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>
      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>
      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>
      <div class="col-md-3 mar-top20">
        <img src="http://www.bootfastui.cn/img/2021/0329-4/1.jpg" width="100%" />
      </div>
    </div>

  </div>
</div>