This commit is contained in:
yiqiu
113
css/index.css
113
css/index.css
@@ -1,66 +1,41 @@
|
|||||||
/* banner */
|
/* banner */
|
||||||
.banner-cont {
|
.banner {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
background: #f7f9fa;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-cont .swiper-slide {
|
/* 轮播图作为背景层，图片负责铺满顶部区域 */
|
||||||
width: 100%;
|
.banner-bg {
|
||||||
background: linear-gradient(0, #f7f9fa, #f9fafb);
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-cont .swiper-slide .img {
|
|
||||||
/* 保持图片占满宽度，避免拉伸过度 */
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 文案区域：固定在左侧，顶部留出一致间距，避免切换时轻微位移 */
|
|
||||||
.banner-cont .banner-text {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 420px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-bg .banner-cont,
|
||||||
|
.banner-bg .banner-cont .swiper-wrapper,
|
||||||
|
.banner-bg .banner-cont .swiper-slide {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-bg .banner-cont .swiper-slide {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-bg .banner-cont .swiper-slide .img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
object-fit: cover;
|
||||||
align-items: center; /* 垂直居中，水平方向由内部 .section-content 控制 */
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-cont .banner-text .section-content {
|
.banner-bg .banner-cont .swiper-pagination {
|
||||||
/* 继承 .section-content 的左右 padding 和宽度，只单独控制上下间距 */
|
bottom: 24px;
|
||||||
padding-top: 120px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 文案块：控制具体的左边距，让其与下方 banner-s 第一列内容对齐 */
|
.banner-bg .banner-cont .swiper-pagination-bullet {
|
||||||
.banner-cont .banner-copy {
|
|
||||||
max-width: 560px;
|
|
||||||
text-align: left; /* 与下方内容同样左对齐 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-cont .banner-copy h1 {
|
|
||||||
font-size: 40px;
|
|
||||||
line-height: 1.2;
|
|
||||||
color: #111827;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-cont .banner-copy .banner-desc {
|
|
||||||
font-size: 16px;
|
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
max-width: 550px;
|
|
||||||
color: rgba(0, 0, 0, 0.65);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 按钮保持可点击 */
|
|
||||||
.banner-cont .banner-text .btn {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner-cont .swiper-pagination-bullet {
|
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: #D7DCE4;
|
background: #D7DCE4;
|
||||||
@@ -68,10 +43,44 @@
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-cont .swiper-pagination-bullet-active {
|
.banner-bg .banner-cont .swiper-pagination-bullet-active {
|
||||||
background: rgba(255, 103, 57, 1);
|
background: rgba(255, 103, 57, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 文案 + 下方模块共用一个 section-content 容器，天然同宽 */
|
||||||
|
.banner-main {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
padding-top: 140px; /* 控制文案距离顶部的位置 */
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-copy {
|
||||||
|
max-width: 560px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-copy #bannerTitle {
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-copy .banner-desc {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
max-width: 550px;
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-copy #bannerButton {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.banner .banner-s {
|
.banner .banner-s {
|
||||||
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
|
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
|||||||
86
index.html
86
index.html
@@ -13,52 +13,54 @@
|
|||||||
|
|
||||||
<!-- banner -->
|
<!-- banner -->
|
||||||
<section class="section banner">
|
<section class="section banner">
|
||||||
<div class="swiper banner-cont">
|
<!-- 背景轮播图，只负责展示图片 -->
|
||||||
<div class="swiper-wrapper" id="bannerWrapper"></div>
|
<div class="banner-bg">
|
||||||
<!-- 如果需要分页器 -->
|
<div class="swiper banner-cont">
|
||||||
<div class="swiper-pagination"></div>
|
<div class="swiper-wrapper" id="bannerWrapper"></div>
|
||||||
<!-- 固定文案区域，使用第一张轮播图的标题/描述/按钮 -->
|
<div class="swiper-pagination"></div>
|
||||||
<div class="banner-text">
|
</div>
|
||||||
<div class="section-content">
|
</div>
|
||||||
<div class="banner-copy">
|
|
||||||
<h1 id="bannerTitle"></h1>
|
<!-- 内容区域，和下方模块共用同一个 section-content 容器 -->
|
||||||
<p class="banner-desc" id="bannerDesc"></p>
|
<div class="section-content">
|
||||||
<a
|
<div class="banner-main">
|
||||||
class="btn btn2 btn-normal"
|
<div class="banner-copy">
|
||||||
href="javascript:;"
|
<h1 id="bannerTitle"></h1>
|
||||||
id="bannerButton"
|
<p class="banner-desc" id="bannerDesc"></p>
|
||||||
style="display: none;"
|
<a
|
||||||
></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>
|
||||||
</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>
|
||||||
|
|
||||||
<!-- 服务内容 -->
|
<!-- 服务内容 -->
|
||||||
|
|||||||
Reference in New Issue
Block a user