项目要求
模仿小鹅通首页页面，完整开发页面效果
小鹅通首页图片-样式图
image.png
image.png
image.png
代码示例
使用Trae CN工具进行编写，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鹅通风格页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
.product-ability {
padding: 50px 100px;
text-align: center;
}
.product-ability h2 {
font-size: 28px;
margin-bottom: 30px;
}
.phone-image {
width: 100%;
max-width: 1200px;
margin: 0 auto 40px;
border-radius: 8px;
}
.product-list {
display: flex;
justify-content: space-around;
gap: 30px;
}
.product-item {
flex: 1;
text-align: left;
padding: 20px;
border: 1px solid #e8e8e8;
border-radius: 8px;
}
.product-item h3 {
color: #007AFF;
font-size: 18px;
margin-bottom: 15px;
}
.product-item p {
color: #666;
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
.product-item a {
color: #007AFF;
text-decoration: none;
font-size: 14px;
}
/* 新增图片模块样式（可根据实际调整） */
.new-image-section {
padding: 50px 100px;
text-align: center;
}
.new-image-section img {
width: 100%;
max-width: 1200px;
margin: 0 auto;
border-radius: 8px;
}
body {
background-color: #f0f9ff;
}
.main-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.main-banner img {
width: 100%;
height: auto;
display: block;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px 80px;
display: flex;
justify-content: space-between;
align-items: center;
background: transparent;
transition: all 0.3s ease;
}
header:hover {
background: linear-gradient(180deg, #e6f7ff 0%, #f0f9ff 100%);
}
.logo {
display: flex;
align-items: center;
}
.logo img {
height: 36px;
}
.logo span {
margin-left: 10px;
font-size: 22px;
font-weight: bold;
color: #007AFF;
}
nav ul {
display: flex;
list-style: none;
gap: 30px;
}
nav ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
}
.header-btns button {
margin-left: 15px;
padding: 8px 20px;
border: 1px solid #007AFF; /* 统一添加边框 */
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.merchant-login {
background: transparent;
color: #007AFF;
}
.free-trial {
background: #007AFF;
color: white;
border-color: #007AFF; /* 明确边框颜色 */
}
.header-btns button:active {
transform: scale(0.98);
}
.scene-solution {
padding: 60px 150px;
text-align: center;
}
.scene-solution h2 {
font-size: 28px;
margin-bottom: 30px;
}
.tab-nav {
margin-bottom: 30px;
}
.tab-btn {
display: inline-block;
padding: 8px 25px;
margin: 0 5px;
border: 1px solid #e0e0e0;
border-radius: 20px;
cursor: pointer;
background: white;
color: #333;
font-size: 14px;
transition: all 0.3s ease;
}
.tab-btn.active {
background: #007AFF;
color: white;
border-color: #007AFF;
}
.scene-content {
display: flex;
justify-content: center;
gap: 40px;
background: white;
padding: 30px;
border-radius: 8px;
}
.scene-img {
width: 50%;
}
.scene-text {
width: 50%;
text-align: left;
}
.scene-text h3 {
font-size: 22px;
margin-bottom: 15px;
}
.scene-text p {
font-size: 14px;
line-height: 1.8;
color: #666;
margin-bottom: 10px;
}
.scene-text ul {
padding-left: 20px;
}
.scene-text li {
list-style: none;
position: relative;
margin-bottom: 15px;
}
.scene-text li::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #007AFF;
margin-right: 10px;
}
.btn-group {
margin-top: 20px;
}
.btn-free {
padding: 10px 25px;
background: #007AFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
.btn-detail {
padding: 10px 25px;
background: white;
color: #007AFF;
border: 1px solid #007AFF;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main-banner">
<img src="./img/bg.webp" alt="主视觉图">
<header>
<div class="logo">
<img src="./img/小鹅通logo.png" alt="小鹅通logo">
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">产品服务</a></li>
<li><a href="#">价格</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">渠道合作</a></li>
<li><a href="#">下载与帮助</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
<div class="header-btns">
<button class="merchant-login">我是学员</button>
<button class="merchant-login">商家登录</button>
<button class="free-trial">免费试用</button>
</div>
</header>
</div>
<section class="product-ability">
<h2>我们的产品能力</h2>
<img src="./img/chanpin1.webp" class="phone-image" alt="手机展示图">
<div class="product-list">
<div class="product-item">
<h3>知识店铺</h3>
<p>1分钟搭建您的知识商城<br>助力高效知识变现</p>
<a href="#">免费试用 →</a>
</div>
<div class="product-item">
<h3>私域直播</h3>
<p>企业级专属私域直播平台<br>实现私域流量高效运营</p>
<a href="#">免费试用 →</a>
</div>
<div class="product-item">
<h3>企微SCRM</h3>
<p>企业微信私域运营神器<br>数据洞察驱动业绩增长</p>
<a href="#">免费试用 →</a>
</div>
</div>
</section>
<section class="scene-solution">
<h2>我们的场景解决方案</h2>
<div class="tab-nav">
<span class="tab-btn active">公域获客</span>
<span class="tab-btn">私域运营</span>
<span class="tab-btn">直播带货</span>
<span class="tab-btn">内容交付</span>
<span class="tab-btn">数据化运营</span>
</div>
<div class="scene-content">
<div class="scene-img">
<!-- 修改图片大小，去除 width 属性，让图片自适应容器 -->
<img src="./img/www.图片-tech.com_.png" alt="场景示意图">
</div>
<div class="scene-text">
<h3>公域获客</h3>
<p>多渠道获客，沉淀私域流量池</p>
<ul>
<li>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</li>
<li>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</li>
<li>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</li>
</ul>
<div class="btn-group">
<button class="btn-free">免费试用</button>
<button class="btn-detail">了解详情</button>
</div>
</div>
</div>
</section>
<script>
// 获取所有选项卡按钮
const tabBtns = document.querySelectorAll('.tab-btn');
// 绑定点击事件
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 移除所有按钮的active类
tabBtns.forEach(tab => tab.classList.remove('active'));
// 添加active类到当前点击的按钮
btn.classList.add('active');
// 此处可扩展内容切换逻辑（后续根据不同选项卡加载对应内容）
console.log(`点击了${btn.textContent}选项卡`);
});
});
</script>
</body>
</html>
网页效果
成品
