This commit is contained in:
yiqiu
@@ -1,61 +1,37 @@
|
||||
/* banner */
|
||||
.banner {
|
||||
.banner-cont {
|
||||
position: relative;
|
||||
background: #f7f9fa;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 轮播图作为背景层，图片负责铺满顶部区域 */
|
||||
.banner-bg {
|
||||
.banner-cont .swiper-slide {
|
||||
width: 100%;
|
||||
background: linear-gradient(0, #f7f9fa, #f9fafb);
|
||||
}
|
||||
|
||||
.banner-cont .swiper-slide .img {
|
||||
/* 图片撑开高度，避免被裁切 */
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 文案层：覆盖在轮播上，使用 section-content 控制左右宽度 */
|
||||
.banner-cont .banner-text {
|
||||
position: absolute;
|
||||
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 {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.banner-bg .banner-cont .swiper-pagination {
|
||||
bottom: 24px;
|
||||
}
|
||||
|
||||
.banner-bg .banner-cont .swiper-pagination-bullet {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
background: #D7DCE4;
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.banner-bg .banner-cont .swiper-pagination-bullet-active {
|
||||
background: rgba(255, 103, 57, 1);
|
||||
}
|
||||
|
||||
/* 文案 + 下方模块共用一个 section-content 容器，天然同宽 */
|
||||
.banner-main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; /* 文案在上，banner-s 靠容器底部 */
|
||||
min-height: 420px; /* 与 .banner-bg 高度保持一致 */
|
||||
padding-top: 80px; /* 文案距离顶部的内边距 */
|
||||
align-items: flex-start; /* 文案从上方开始 */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.banner-cont .banner-text .section-content {
|
||||
padding-top: 80px; /* 文案距顶部 */
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -82,12 +58,6 @@
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* banner 区域内的 section-content 不需要额外的上下 padding，由 .banner-main 控制 */
|
||||
.banner .section-content {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.banner .banner-s {
|
||||
box-shadow: 0px 0px 16px rgba(52, 52, 52, 0.16);
|
||||
border-radius: 3px;
|
||||
|
||||
86
index.html
86
index.html
@@ -13,54 +13,52 @@
|
||||
|
||||
<!-- banner -->
|
||||
<section class="section banner">
|
||||
<!-- 背景轮播图，只负责展示图片 -->
|
||||
<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 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>
|
||||
</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>
|
||||
|
||||
<!-- 服务内容 -->
|
||||
|
||||
Reference in New Issue
Block a user