index.html

@@ -13,52 +13,54 @@
 
   <!-- banner -->
   <section class="section banner">
-    <div class="swiper banner-cont">
-      <div class="swiper-wrapper" id="bannerWrapper"></div>
-      <!-- 如果需要分页器 -->
-      <div class="swiper-pagination"></div>
-      <!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
-      <div class="banner-text">
-        <div class="section-content">
-          <div class="banner-copy">
-            <h1 id="bannerTitle"></h1>
-            <p class="banner-desc" id="bannerDesc"></p>
-            <a
-              class="btn btn2 btn-normal"
-              href="javascript:;"
-              id="bannerButton"
-              style="display: none;"
-            ></a>
+    <!-- 背景轮播图，只负责展示图片 -->
+    <div class="banner-bg">
+      <div class="swiper banner-cont">
+        <div class="swiper-wrapper" id="bannerWrapper"></div>
+        <div class="swiper-pagination"></div>
+      </div>
+    </div>
+
+    <!-- 内容区域，和下方模块共用同一个 section-content 容器 -->
+    <div class="section-content">
+      <div class="banner-main">
+        <div class="banner-copy">
+          <h1 id="bannerTitle"></h1>
+          <p class="banner-desc" id="bannerDesc"></p>
+          <a
+            class="btn btn2 btn-normal"
+            href="javascript:;"
+            id="bannerButton"
+            style="display: none;"
+          ></a>
+        </div>
+
+        <div class="banner-s">
+          <div class="banner-list">
+            <div class="banner-item" id="cloud-box">
+              <h5>云服务器专场</h5>
+              <p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
+              <span class="banner-tag">4核8G仅需228元</span>
+            </div>
+            <div class="banner-item" id="domain-box">
+              <h5>域名注册</h5>
+              <p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
+              <span class="banner-tag">.top 88元起</span>
+            </div>
+            <div class="banner-item" id="cps-box">
+              <h5>CPS推广</h5>
+              <p class="title-desc mt-10 mb-10">多种产品高达30%高额佣金</p>
+              <span class="banner-tag">最高可返佣金5W</span>
+            </div>
+            <div class="banner-item" id="logon-box">
+              <h5>注册有礼</h5>
+              <p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
+              <span class="banner-tag">价值2000元</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    </div>
-    <div class="banner-s">
-      <div class="section-content banner-list">
-        <div class="banner-item" id="cloud-box">
-          <h5>云服务器专场</h5>
-          <p class="title-desc mt-10 mb-10">无数个人用户的共同选择</p>
-          <span class="banner-tag">4核8G仅需228元</span>
-        </div>
-        <div class="banner-item" id="domain-box">
-          <h5>域名注册</h5>
-          <p class="title-desc mt-10 mb-10">优选主流域名注册服务</p>
-          <span class="banner-tag">.top 88元起</span>
-        </div>
-        <div class="banner-item" id="cps-box">
-          <h5>CPS推广</h5>
-          <p class="title-desc mt-10 mb-10">多种产品高达30%高额佣金</p>
-          <span class="banner-tag">最高可返佣金5W</span>
-        </div>
-        <div class="banner-item" id="logon-box">
-          <h5>注册有礼</h5>
-          <p class="title-desc mt-10 mb-10">免费注册领取专属礼包</p>
-          <span class="banner-tag">价值2000元</span>
-        </div>
-      </div>
-
-    </div>
   </section>
 
   <!-- 服务内容 -->