直接使用代码

图片素材

无

css代码

    
<style type="text/css">
  /*首页-优点列表*/
  #index-good .content ul { padding-top:50px;}
  #index-good .content ul li{ line-height:50px; font-size:14px}
  #index-good .content ul li em{ display:inline-block; width:30px; height:30px; margin-right:10px; border-radius:15px; background:#096; text-align:center; line-height:30px; color:#fff; font-weight:bold}
  /* 首页-特色服务 */
  #index-server{background:url(/Public/images/demo/index5/bg_banner.jpg) no-repeat center top}
  #index-server .content { text-align:center; line-height:20px;}
  .f1{background:url(/Public/images/demo/index5/41.png) no-repeat right bottom; padding:50px 35px}
  .f2{background:url(/Public/images/demo/index5/42.png) no-repeat left bottom; padding:50px 50px}
  .f3{background:url(/Public/images/demo/index5/43.png) no-repeat right top; padding:50px 35px}
  .f4{background:url(/Public/images/demo/index5/44.png) no-repeat left top; padding:50px 35px}
  @media screen and (max-width:760px){
  .f1{background:none; padding:20px; min-height:150px;}
  .f2{background:none; padding:20px; min-height:150px;}
  .f3{background:none; padding:20px; min-height:150px;}
  .f4{background:none; padding:20px; min-height:150px;}
  #index-server .content  div { padding:0 10px;}
  }
  
  </style>

HTML+JS代码

    
<!--优点列表 -->
<div id="index-good" style="background:#ebf7fd">
    <div class="container pad-bottom30 ">
      <h3 class="text-center line40">我们的优点</h3>
  
      <div class="col-md-6">
        <img src="/Public/images/demo/index5/zhuanli.png" class="img-responsive" />
      </div>
  
      <div class="col-md-6 content">
        <ul>
          <li><em>1</em>独占市场 一种产品只要授予专利权 等于在市场拥有独占权</li>
          <li><em>2</em>防止新的技术与产品被他人抄袭与仿造 保护企业技术成果</li>
          <li>
            <em>3</em>专利作为一种无形资产，具有巨大的商业价值
            可作为商品出售（转让）
          </li>
          <li><em>4</em>专利有利于宣传效果好，增加产品可靠性，提高企业知名度</li>
          <li>
            <em>5</em>申报高新技术企业、创新基金等各类计划、项目的必要前提条件
          </li>
        </ul>
      </div>
    </div>
  </div>
  
  <!--服务保障 -->
  <div id="index-server"  >
    <div class="container pad-bottom30 ">
      <h3 class="text-center line40">服务保障</h3>
  
      <div class="col-md-6 bg-fff col-xs-6">
        <div class="f1">
          <h3>信息保密</h3>
          <p>
            所有客户信息严格保密，保护客<br />
            户信息免遭外泄
          </p>
        </div>
      </div>
  
      <div class="col-md-6 bg-fff col-xs-6">
        <div class="f2">
          <h3 class="text-right">明码标价</h3>
          <p class="text-right">
            一次性收费，从申请到领证<br />
            全程无附加费用
          </p>
        </div>
      </div>
  
      <div class="col-md-6 bg-fff col-xs-6">
        <div class="f3">
          <h3>专人专办</h3>
          <p>
            全程由专业人士进行操作，<br />
            业务限时完成
          </p>
        </div>
      </div>
  
      <div class="col-md-6 bg-fff col-xs-6">
        <div class="f4">
          <h3 class="text-right">快速响应</h3>
          <p class="text-right">
            下单24小时内响应，关键环节<br />
            重点提醒
          </p>
        </div>
      </div>
    </div>
  </div>