作业标题
模仿小鹅通首页页面，完整开发网页效果
网页代码
使用VsCode开发工具
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鹅通</title>
<link rel="stylesheet" href="./小鹅通.css">
</head>
<body>
<div class="bg">
<div class="nav">
<!--左侧部分：logo＋导航-->
<ul>
<li><img src="./img/logo.png" alt=""></li>
<li>首页</li>
<li>解决方案</li>
<li>产品服务</li>
<li>价格</li>
<li>活动</li>
<li>案例</li>
<li>渠道合作</li>
<li>下载与帮助</li>
<li>关于我们</li>
</ul>
<div class="btns">
<div>我是学员</div>
<div>商家登录</div>
<div>免费试用</div>
</div>
</div>
</div>
<!-- 首屏图片 -->
<section class="shoupin">
<img src="./img/toubu.webp" alt="">
</section>
<div class="juzhong">
<h2 class="biaoti">我们的产品能力</h2>
<div class="chanpintupian">
<img src="./img/chanpinnengli.webp" alt="" class="zhutupian">
</div>
<div class="gongnengliebiao">
<div class="gongnengxiang">
<h3>知识店铺</h3>
<p>1分钟搭建您的知识商城<br>
助力高效知识变现</p>
<a href="#">免费试用</a>
</div>
<div class="gongnengxiang">
<h3>私域直播</h3>
<p>企业级专属私域直播平台<br>
实现私域流量高效运营</p>
<a href="#">免费试用</a>
</div>
<div class="gongnengxiang">
<h3>企微SCRM</h3>
<p>企业微信私域运营神器<br>
数据洞察驱动业绩增长</p>
<a href="#">免费试用</a>
</div>
</div>
</div>
<div class="bgs">
<div class="contents">
<div class="titlee">我们的场景解决方案</div>
<ul class="nave">
<li class="active">公域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数据化运营</li>
</ul>
<div class="introe">
<!--左侧图片-->
<div class="lefts">
<img src="./img/kecheng.webp" alt="">
</div>
<!--右侧内容-->
<div class="rights">
<h3>公域获客</h3>
<h4>
多渠道获客，沉淀私域流量池
</h4>
<p>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</p>
<p>
多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池
</p>
<p>
丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI
</p>
<div class="btns">
<div>免费试用</div>
<div>了解详情</div>
</div>
</div>
</div>
</div>
</div>
<!--行业解决方案-->
<div class="solution-wrapper">
<h1 class="main-title">我们的行业解决方案</h1>
<div class="content-container">
<div class="sidebar">
<div class="category active">
<i class="icon store-icon"></i>
<span>新零售门店</span>
</div>
<div class="category">
<i class="icon training-icon"></i>
<span>职业培训</span>
</div>
<div class="category">
<i class="icon konwledge-icon"></i>
<span>知识付费</span>
</div>
<div class="category">
<i class="icon beauty-icon"></i>
<span>美业直播</span>
</div>
</div>
<div class="content">
<div class="solution-content">
<h2 class="solution-title">新零售门店解决方案</h2>
<p class="solution-desc">私域直播带货+ 推广门店体系，助力商家私域流量高效变现</p>
<div class="feature-list">
<div class="feature">
<i class="icon live-sell-icon"></i>
<span>直播带货</span>
</div>
<div class="feature">
<i class="icon online-mall-icon"></i>
<span>在线商城</span>
</div>
<div class="feature">
<i class="icon online-store-icon"></i>
<span>门店管理</span>
</div>
<div class="feature">
<i class="icon store-hexiao-icon"></i>
<span>门店核销</span>
</div>
<div class="feature">
<i class="icon store-write-off-icon"></i>
<span>渠道活码</span>
</div>
<div class="feature">
<i class="icon live-red-packed-icon"></i>
<span>直播红包</span>
</div>
<div class="feature">
<i class="icon live-lottery-icon"></i>
<span>直播抽奖</span>
</div>
<div class="feature">
<i class="icon invite-influence-icon"></i>
<span>邀请达人榜</span>
</div>
<div class="feature">
<i class="icon product-flash-sale-icon"></i>
<span>商品秒杀</span>
</div>
</div>
<div class="action-buttons">
<button class="btn free-trial-btn">免费试用</button>
<button class="btn learn-more-btn">了解详情</button>
</div>
</div>
<div class="case-section">
<h2 class="case-title">行业案例</h2>
</div>
</div>
</div>
</div>
<!--我们的技术优势-->
<div class="tech-advantage-container">
<h1>我们的技术优势</h1>
<div class="image-item">
<img src="./img/chaowendin.webp" alt="">
<p>超稳定</p>
<ul>
<li>多云负载均衡/全球CDN加速</li>
</ul>
</div>
<div class="image-item">
<img src="./img/gaobingfa.webp" alt="">
<p>高并发</p>
<ul>
<li>支持多用户同时在线</li>
</ul>
</div>
<div class="image-item">
<img src="./img/chaoliuchang.webp" alt="">
<p>超流畅</p>
<ul>
<li>观看端自动探测并自动跨云线路切换</li>
</ul>
</div>
</div>
<!--运营服务·-->
<div class="operation-service-container">
<h1>我们的运营服务</h1>
<div class="service-item">
<img src="./img/shequn(1).png" alt="">
<p>社群服务</p>
<span>标杆商家分享，同行商家交流，总比别人快一步</span>
</div>
<div class="service-item">
<img src="./img/guanjia.png" alt="">
<p>管家服务</p>
<span>客户经理、服务管家、多角色在群，服务全面包围</span>
</div>
<div class="service-item">
<img src="./img/dake.png" alt="">
<p>大客服务</p>
<span>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</span>
</div>
<div class="service-item">
<img src="./img/yunwei.png" alt="">
<p>运维服务</p>
<span>需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</span>
</div>
<div class="nav-buttons">
<span class="prev"><</span>
<span class="next">></span>
</div>
</div>
<!--他们都在用小鹅通-->
<div class="case-container">
<h1>他们都在用小鹅通</h1>
<span class="sub-text">(*排名不分先后顺序)</span>
<div class="case-item">
<img src="./img/xiaoxiong.webp" alt="">
<h2>小能熊科学学习</h2>
<p>小能熊学院以学习科学化为使命，专注提供学习方法和自我管理解决方案，陪伴严肃、耐心、永不妥协的终生学习者!</p>
</div>
<div class="case-item">
<img src="./img/liurun.webp" alt="">
<h2>刘润·进化的力量</h2>
<p>刘润，润米咨询创始人，“5分钟商学院”课程主理人，著名商业顾问，曾为海尔、中远、恒基、百度等企业提供过战略咨询服务，每年10月举办“进化的力量”年度演讲，为创业者企业家提供年度规划的参考方向，一...</p>
</div>
<div class="case-item">
<img src="./img/baijunyi.webp" alt="">
<h2>佰君易直播间</h2>
<p>佰君易直播间，由培养过10万项目管理师的王远航老师打造，为各行业提供项目管理实战培训。佰君易直播间与小鹅通深度合作，帮助职场小伙伴升职加薪</p>
</div>
<div class="sub-cases">
<div class="sub-case-item">
<img src="./img/qingsong.png" alt="">
<p>轻松玩</p>
</div>
<div class="sub-case-item">
<img src="./img/liuzhi.png" alt="">
<p>刘智工作室MBAMPAcc</p>
</div>
<div class="sub-case-item">
<img src="./img/qingpei.png" alt="">
<p>清培注考</p>
</div>
<div class="sub-case-item">
<img src="./img/tuma.png" alt="">
<p>兔妈文案创业学堂</p>
</div>
<div class="sub-case-item">
<img src="./img/lengyun.png" alt="">
<p>冷芸时尚圈</p>
</div>
<div class="sub-case-item">
<img src="./img/tongxin.png" alt="">
<p>童心沃SEL社会与情绪学习</p>
</div>
<div class="sub-case-item">
<img src="./img/ppt.png" alt="">
<p>旁门左道PPT服务号</p>
</div>
<div class="sub-case-item">
<img src="./img/singbu.png" alt="">
<p>森部落职场训练营</p>
</div>
<div class="sub-case-item">
<img src="./img/hfit.png" alt="">
<p>3HFIT能量站</p>
</div>
<div class="sub-case-item">
<img src="./img/miaobai.png" alt="">
<p>喵湃气球云课堂</p>
</div>
<div class="sub-case-item">
<img src="./img/kunlun.png" alt="">
<p>昆仑讲堂</p>
</div>
<div class="sub-case-item">
<img src="./img/qunzhi.png" alt="">
<p>群智企业教练</p>
</div>
</div>
<div class="more-cases">
<a href="#">查看更多案例</a>
</div>
</body>
</html>
css样式
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
.bg{
width: 100%;
height: 72px;
display: flex;
justify-content: center;
border-bottom: solid 1px #ddd;
}
.nav{
width: 2000px;
height: 72px;
display: flex;
justify-content: space-between;
}
ul{
width: 800px;
height: 72px;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
li{
cursor: pointer;
}
li:hover{
font-weight: 700;
}
li img{
width: 120px;
height: 36px;
}
.shoupin img{
width: 100%;
height: 400px;
}
.btns{
width: 500px;
height: 72px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.btns div:nth-of-type(1):hover{
color: #4872f6;
font-weight: 600;
cursor: pointer;
}
.btns div:nth-of-type(2),
.btns div:nth-of-type(3){
width: 120px;
height: 38px;
border: solid 1px #4872f6;
color: #4872f6;
background-color: #fff;
text-align: center;
line-height: 38px;
border-radius: 10px;
font-weight: 300;
font-size: 16px;
cursor:pointer;
transition: all .2s;
}
.btns div:nth-of-type(2):hover,
.btns div:nth-of-type(3){
background-color: #4872f6;
color: white;
transition: all .2s;
}
/* 第一部分*/
.shoupin{
width: 100%;
display: block;
}
.juzhong{
width: 90%;
margin: 20px auto;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
padding: 20px;
}
.biaoti{
text-align: center;
margin-bottom: 20px;
}
.zhutupian{
max-width: 100%;
height: auto;
border: 1px solid#ccc;
}
.gongnengliebiao{
display: flex;
justify-content: space-around;
}
.gongnengxiang{
width: 30%;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
background-color: #f9f9f9;
}
a{
display: block;
margin-top: 10px;
color: #4872f6;
text-transform: none;
}
.bgs{
padding: 0 5%;
width: 100%;
height: 1000px;
background: linear-gradient(90deg,#f2fefe,#e2e2f1);
display: flex;
justify-content: center;
}
.contents{
width: 1400px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.titlee{
font-size: 38px;
font-weight: 600;
}
.nave{
width: 850px;
height: 40px;
border-radius: 25px;
background-color: #fff;
list-style: none;
display: flex;
justify-content: space-between;
}
.nave li{
width: 130px;
height: 50px;
text-align: center;
line-height: 40px;
background-color: #f0f0f0;
color: #666;
}
.nave li.active{
background-color: #4872f6;
color: white;
border-radius: 25px;
}
.introe{
width: 1400px;
height: 600px;
border-radius: 10px;
border: solid 2px #fff;
overflow: hidden;
background-color: #fff;
display: flex;
}
.lefts,
.lefts img{
width: 700px;
height: 600px;
}
.rights{
width: 700px;
height: 600px;
padding: 80px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.rights h3{
font-size: 28px;
}
.rights h4{
font-size: 26px;
font-weight: 400;
}
.rights p{
color: gray;
background-image: url(./img/tubiao.png);
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 30px;
line-height: 1.6;
margin-bottom: 12px;
}
.rights .btns{
display: flex;
gap: 30px;
}
.rights .btns div{
width: 100px;
height:30px;
border: solid 1px #4872f6;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: #4872f6;
cursor: pointer;
font-size: 14px;
}
.rights .btns div:nth-of-type(1){
background-color: #4872f6;
color: white;
}
.rights .btns div:nth-of-type(2){
background-color: transparent;
}
/*行业解决方案*/
.solution-wrapper{
background-image: url(./img/shensebg.webp);
background-size: contain;
background-position: center;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
padding: 50px;
}
.main-title{
font-size: 36px;
margin-bottom: 50px;
}
.content-container{
background-color: rgba(0,0,0,0.3);
padding: 20px;
display: flex;
}
.sidebar{
width: 200px;
margin-right: 50px;
padding-left: 10px;
}
.category{
display: flex;
align-items: center;
padding: 15px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.category.active{
background-color: rgba(0,0,0,0.2);
border-left: 10px solid #4872f6;
padding-left: 15px;
}
.category:hover{
background-color: rgba(0,0,0,0.2);
}
.icon{
width: 20px;
height: 20px;
margin-right: 10px;
background-size: contain;
background-repeat: no-repeat;
}
.store-icon{
background-image: url(./img/xin.webp);
}
.training-icon{
background-image: url(./img/training.webp);
}
.konwledge-icon{
background-image: url(./img/konwledge.webp);
}
.beauty-icon{
background-image: url(./img/beauty.webp);
}
.content{
flex: 1;
display: flex;
}
.solution-content{
flex: 1;
}
.solution-title{
font-size: 24px;
margin-bottom: 20px;
}
.solution-desc{
margin-bottom: 30px;
}
.feature-list{
display: flex;
flex-wrap: wrap;
gap: 30px;
}
.feature{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100px;
}
.feature.icon{
width: 40px;
height: 40px;
}
.live-sell-icon{
background-image: url(./img/zhibo.svg);
}
.online-mall-icon{
background-image: url(./img/zaixian.svg);
}
.online-store-icon{
background-image: url(./img/mendian.svg);
}
.store-hexiao-icon{
background-image: url(./img/hexiao.svg);
}
.store-write-off-icon{
background-image: url(./img/qudao.svg);
}
.live-red-packed-icon{
background-image: url(./img/hongbao.svg);
}
.live-lottery-icon{
background-image: url(./img/choujiang.svg);
}
.invite-influence-icon{
background-image: url(./img/daren.svg);
}
.product-flash-sale-icon{
background-image: url(./img/miaosha.svg);
}
.action-buttons{
margin-top: 30px;
display: flex;
gap: 20px;
}
.btn{
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}
.free-trial-btn{
background-color: #4872f6;
color: white;
}
.free-trial-btn:hover{
background-color: #0255ad;
}
.learn-more-btn{
background-color:transparent;
border: 1px solid white;
color: white;
}
.learn-more-btn:hover{
background-color: rgba(255,255,255,0.1);
}
.case-section{
width: 300px;
margin-left: 50px;
}
.case-title{
font-size: 24px;
margin-bottom: 20px;
}
/*技术优势*/
.tech-advantage-container{
text-align: center;
padding: 50px;
}
.tech-advantage-container h1{
margin-bottom: 50px;
}
.image-item{
display: inline-block;
width: 300px;
margin: 0 20px;
vertical-align: top;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}
.image-item img{
width: 100%;
height: auto;
margin-bottom: 10px;
}
/*运营服务*/
.operation-service-container{
text-align: center;
padding: 50px;
}
.operation-service-container h1{
margin-bottom: 50px;
}
.service-item{
display: inline-block;
width: 250px;
margin: 0 20px;
vertical-align: top;
text-align: left;
}
.service-item img{
width: 100%;
height: auto;
margin-bottom: 10px;
border-radius: 5px;
}
.service-item p{
margin-bottom: 5px;
font-size: 18px;
}
.service-item span{
font-size: 14px;
}
.nav-buttons{
margin-top: 30px;
}
.nav-buttons span{
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #ccc;
border-radius: 50%;
line-height: 30px;
cursor: pointer;
}
/*他们都在用小鹅通*/
.case-container{
text-align: center;
background: linear-gradient(to bottom,#e6f7ff,white);
padding: 50px 20px;
max-width: 1200px;
margin: 0 auto;
}
.case-container h1{
margin-bottom: 20px;
}
.sub-text{
display: block;
margin-bottom: 40px;
font-size: 14px;
color: #666;
}
.case-item{
display: inline-block;
width: 300px;
margin: 0 15px 30px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 20px;
vertical-align: top;
overflow: hidden;
}
.case-item img{
width: 100px;
height: 100px;
margin-bottom: 20px;
}
.case-item h2{
margin-bottom: 10px;
font-size: 18px;
}
.case-item p{
font-size: 14px;
line-height: 1.5;
max-height: 60px;
overflow: hidden;
}
.more-cases{
margin-top: 40px;
clear: both;
}
.more-cases a{
display: inline-block;
padding: 10px 20px;
border: 1px solid #069afd;
border-radius: 20px;
color: #069afd;
text-decoration: none;
}
.sub-cases{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.sub-case-item{
width:170px;
margin: 10px;
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 15px 0;
text-align: center;
box-sizing: border-box;
}
.sub-case-item img{
width: 77px;
height: 77px;
margin-bottom: 10px;
}
.sub-case-item p{
font-size: 12px;
font-weight: 500;
color: #333;
}
.more-cases a{
transition: all 0.3s;
background-color: #069afd;
color: white !important;
}
.more-cases a:hover{
background-color: #0578c5;
}
网页效果
xet1.png
xet2.png
xet3.png
xet4.png
xet5.png
xet6.png
xet7.png
xet8.png
