样式重构

index.html

@@ -13,51 +13,51 @@
 
   <!-- 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">
-          <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="section-content banner-layout">
+      <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 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>
+  </section>
 
   <!-- 服务内容 -->
   <section class="section service">