HTML部分：
<!DOCTYPE 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/style.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 页头banner图 -->
<div class="bg header">
<!-- 页头导航 -->
<div class="nav">
<div class="content">
<!-- 左侧菜单 -->
<div class="nav-menus">
<div class="logo"></div>
<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>
</div>
<!-- 右侧登录 -->
<div class="nav-login">
<div>我是学员</div>
<div>商家登录</div>
<div>免费试用</div>
</div>
</div>
</div>
<!-- banner图 -->
<div class="banner"></div>
</div>
<!-- 产品介绍 -->
<div class="bg intro">
<h1>我们的产品能力</h1>
<img src="./images/m3moa2m10v5k.webp" alt="">
<div class="info">
<div>
<h3 class="title active">知识店铺</h3>
<p>1分钟搭建您的知识商城<br>
助力高效知识变现</p>
<a href="#">免费试用 - →</a>
</div>
<div>
<h3 class="title">私域直播</h3>
<p>企业级专属私域直播平台<br>
实现私域流量高效运营</p>
<a href="#">免费试用 - →</a>
</div>
<div>
<h3 class="title">企微SCRM</h3>
<p>企业微信私域运营神器<br>
数据洞察驱动业绩增长</p>
<a href="#">免费试用 - →</a>
</div>
</div>
</div>
<!-- sence -->
<div class="bg sence">
<h1>我们的场景解决方案</h1>
<ul class="list">
<li>公域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数据化运营</li>
</ul>
<div class="info">
<img src="./images/m10c72vn0zzo.webp" alt="">
<div class="msg">
<h2>公域获客</h2>
<h3>多渠道获客，沉淀私域流量池</h3>
<ul>
<li>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</li>
<li>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</li>
<li>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</li>
</ul>
<div class="btns">
<div>免费试用</div>
<div>了解详情</div>
</div>
</div>
</div>
</div>
<!-- 行业解决方案 -->
<div class="bg industry">
<h1>我们的行业解决方案</h1>
<div class="iono">
<div class="left">
<ul>
<li><img src="./images/sc.webp"> 新零售门店</li>
<li><img src="./images/bb.webp">职业培训</li>
<li><img src="./images/dd.webp">知识付费</li>
<li><img src="./images/rr.webp">美业直播</li>
</ul>
</div>
<div class="content">
<div class="obt">
<h2>知识付费行业解决方案</h2>
<h3>提供内容变现能力，助力品牌IP打造</h3>
<div class="zdl">
<img src="./images/zxc7.png">
</div>
<div class="btns">
<div>免费试用</div>
<div>了解详情</div>
</div>
</div>
</div>
<div class="right">
<h2>行业案例</h2>
<div class="mlp">
<img src="./images/xy1.webp">
<img src="./images/xy2.webp">
</div>
</div>
</div>
</div>
<!-- 技术优势 -->
<div class="bg tech">
<h1>我们的技术优势</h1>
<div class="xty">
<div class="aaa">
<h1>超稳定</h1>
<h2>多云负载均衡/全球CDN加速</h2>
</div>
<div class="sss">
<h1>高并发</h1>
<h2>支持多用户同时在线</h2>
</div>
<div class="ddd">
<h1>超流畅</h1>
<h2>观看端自动探测并自动跨云线路切换</h2>
</div>
</div>
</div>
<!-- 运营服务 -->
<div class="bg service">
<h1>我们的运营服务</h1>
<div class="tyl">
<div class="qqq">
<img src="./images/服务_本地社群(1).png">
<h2>社群服务</h2>
<h3>标杆商家分享，同行商家交流，总比别人快一步</h3>
</div>
<div class="www">
<img src="./images/摄图网_501221054_商务女士打电话（企业商用）@3x.png">
<h2>管家服务</h2>
<h3>客户经理、服务管家、多角色在群，服务全面包围</h3>
</div>
<div class="eee">
<img src="./images/大客服务.png">
<h2>大客服务</h2>
<h3>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</h3>
</div>
</div>
</div>
<!-- 小鹅通 -->
<div class="bg xiaoet">
<h1>他们都在用小鹅通</h1>
<h2>（*排名不分先后顺序）</h2>
<div class="tyu">
<div class="tt1">
<img src="./images/m1h8lf0u08nd.webp">
<h3> 小红书·种草学</h3>
<p>小红书种草学是小红书官方营销学习平台，为不同行业、
不同成长阶段的品牌和商家提供丰富多元的学习内容。
小红书种草学与小鹅通深度合作，通过搭建培训平台让
赋能客户变得更高效</p>
</div>
<div class="tt2">
<img src="./images/m1h8lf0q0gqq.webp">
<h3> 刘润·进化的力量</h3>
<p>主要提供商业和管理相关知识传播并和为企业提供商业战
略咨询服务。小鹅通为刘润打造了专属进化岛圈子，为
刘润和用户提供了深度互动平台</p>
</div>
<div class="tt3">
<img src="./images/m1h8lf0v0sw4.webp">
<h3> 博商大课堂</h3>
<p>专注于为中小民营企业家提供管理培训/咨询辅导和
资源互助等全生命周期服务，构筑横跨全球17座城
市的教学网络，汇聚高校专家与实战导师帮助10万余
企业家实现成长升华，并多次荣登中国最佳企管培训
机构榜单前列</p>
</div>
</div>
<div class="hyu">
<div class="ht1">
<img src="./images/一行.png">
</div>
<div class="ht2">
<img src="./images/2行.png">
</div>
<div class="ht3">
<img src="./images/3行.png">
</div>
</div>
<div>
<div class="jjk">查看更多案例</div>
</div>
</div>
<!-- 咨询 -->
<div class="bg advisory">
<h1>立即扫码咨询，领取您的专属解决方案</h1>
<div class="opo">
<div class="left">
<img src="./images/wwm.webp">
</div>
<div class="right">
<h2>扫码添加客户经理</h2>
<h3>或者您也可以先</h3>
<h4>免费试用</h4>
</div>
</div>
</div>
<!-- 友情链接、公司信息 -->
<div class="bg message">
<div class="sss">
<div class="lb1">
<h1>场景</h1>
<ul>
<li>全域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数据化运营</li>
<li>企业内训</li>
</ul>
</div>
<div class="lb2">
<h1>行业</h1>
<ul>
<li>零售电商</li>
<li>私域运营</li>
<li>职业培训</li>
<li>知识付费</li>
<li>企业营销</li>
<li>美业直播</li>
<li>企业培训</li>
<li>社区团购</li>
<li>营销会务</li>
</ul>
</div>
<div class="lb3">
<h1>产品</h1>
<ul>
<li>知识店铺</li>
<li>私域直播</li>
<li>企微 SCRM</li>
<li>企学院</li>
<li>智能投放</li>
<li>海外版 eLink</li>
<li>小鹅云</li>
</ul>
</div>
<div class="lb4">
<h1>服务</h1>
<ul>
<li>小鹅创业社区</li>
<li>本地社群</li>
<li>教练联盟/li>
<li>小鹅通训练营</li>
<li>对话标杆</li>
</ul>
</div>
<div class="lb5">
<h1>关于我们</h1>
<ul>
<li>公司简介</li>
<li>加入我们</li>
<li>媒体报道/li>
<li>更多资讯</li>
<li>客户案例</li>
<li>帮助中心</li>
</ul>
</div>
<div class="lb6">
<h1>媒体报道</h1>
<ul>
<li>D轮融资1.2亿美元，小鹅通究竟在做什么？</li>
<li>知识付费用户达5.27亿，内容创业的下半场风口在“服务”</li>
<li>知识工作者的终极梦想，可能是拥有一个“第二大脑”</li>
<li>小鹅通：让知识更有价值</li>
<li>小鹅通联合艾瑞咨询发布《2023年中国私域运营</li>
</ul>
</div>
<div class="lb7">
<h1>400-102-6665</h1>
<h2>周一至周日 9:00-21:00</h2>
<div class="zy">
<img src="./images/下载.png">
<p>关注小鹅通公众号</p>
<img src="./images/小鹅创业社区-公众号二维码-20240102163357.jpg">
<P>进入小鹅创业社区</P>
</div>
</div>
</div>
<div class="zzz">
<div class="lxb1">
<ul>
<li>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</li>
<li>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</li>
<li>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</li>
</ul>
</div>
<div class="lxb2">
<ul>
<li>商务合作：support@xiaoe-tech.com</li>
<li>渠道合作：partner@xiaoe-tech.com</li>
<li>投诉意见：xiaoeks@xiaoe-tech.com</li>
</ul>
</div>
<div class="lxb3">
<ul>
<li>互联网违法和不良信息举报电话：0755-26409534</li>
<li>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</li>
<li>安全漏洞反馈邮箱：security@xiaoe-tech.com</li>
</ul>
</div>
</div>
<div class="vvv">
<div class="line">
<p></p>
<div>友情链接
知识付费软件
知识付费平台
小鹅通企学院
私域直播工具
小鹅通APP
小鹅创业社区
小鹅通移动版
小鹅通学员版</div>
<p></p>
</div>
</div>
<div class="xxx">
<img src="./images/微信图片_20250208181548.png">
</div>
</div>
</body>
</html>CSS部分：indtx；style
indtx：
.bg {
width: 100%;
}
.header {
background-image: url(../images/m28mek5n0yyx.webp);
background-size: cover;
background-position: center;
}
.nav {
height: 72px;
/* background-color:aqua; */
background-color: transparent;
display: flex;
justify-content: center;
}
.nav:hover {
background-color: white;
/* css3样式：过渡动画，让样式过渡持续指定时间 */
transition: .2s all;
}
.nav .content {
width: 1600px;
/* background-color:antiquewhite; */
display: flex;
justify-content: space-between;
}
.logo {
height: 72px;
width: 120px;
background-image: url(../images/logo.png);
background-size: 115px 35px;
background-repeat: no-repeat;
background-position: 0 20px;
}
.nav-menus {
width: 900px;
display: flex;
justify-content: space-between;
}
.nav-menus ul {
list-style: none;
display: flex;
}
.nav-menus li {
line-height: 72px;
padding: 0 15px;
}
.nav-menus li a {
color: #333;
text-decoration: none;
cursor: pointer;
}
.nav-menus li a:hover {
color: blue;
}
.nav-login {
display: flex;
align-items: center;
gap: 20px;
}
.nav-login div:nth-of-type(2),
.nav-login div:nth-of-type(3),
.info .msg .btns div:nth-of-type(1),
.info .msg .btns div:nth-of-type(2),
.industry .content .obt .btns div:nth-of-type(1){
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: solid 1px #4872f6;
border-radius: 5px;
background-color: white;
color: #4872f6;
}
.industry .content .obt .btns div:nth-of-type(2) {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: solid 1px #4872f6;
border-radius: 5px;
background-color:rgba(57, 65, 76, .5);
color: #4872f6;
}
.info .msg .btns div:nth-of-type(1),
.info .msg .btns div:nth-of-type(2):hover,
.nav-login div:nth-of-type(3),
.nav-login div:nth-of-type(2):hover ,
.industry .content .obt .btns div:nth-of-type(1),
.industry .content .obt .btns div:nth-of-type(2):hover{
color: white;
background-color: #4872f6;
translate: .5 all;
}
.info .msg .btns div:nth-of-type(1):hover,
.nav-login div:nth-of-type(3):hover,
.industry .content .obt .btns div:nth-of-type(1):hover {
background-color: #819cf8;
}
.banner {
height: 454px;
/* background-color:bisque; */
}
.intro {
padding: 90px;
height: 995px;
background-color: #f5faff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.intro h1,
.sence h1 {
font-size: 42px;
}
.intro img {
width: 1263px;
height: 490px;
}
.intro .info {
width: 1263px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.info>div {
width: 407px;
height: 194px;
background-color: white;
border-radius: 12px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.info .title {
color: #333;
font-size: 26px;
font-weight: 400;
}
.intro .info div:nth-of-type(1) {
border-top: solid 5px #4872f6;
}
.info .active {
color: #4872f6;
}
.info p {
color: gray;
}
.info a {
color: #4872f6;
text-decoration: none;
}
.sence {
padding: 90px;
height: 885px;
background: linear-gradient(0deg, #ffffff, #edf1f9);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.sence .list {
list-style: none;
background-color: white;
width: 725px;
height: 42px;
border-radius: 21px;
display: flex;
justify-content: space-evenly;
}
.list li {
height: 42px;
width: 145px;
border-radius: 21px;
text-align: center;
line-height: 42px;
font-size: 14px;
font-weight: 400;
}
.list li:nth-of-type(1) {
background-color: #4872f6;
color: white;
}
.sence .info {
background-color: #f5f8fc;
width: 1263px;
height: 527px;
display: flex;
flex-direction: row;
border-radius: 12px;
overflow: hidden;
border: solid 5px white;
}
.sence .info img {
width: 650px;
height: 527px;
}
.sence .info .msg {
width: 100%;
height: 100%;
padding: 50px;
}
.sence .msg h2 {
font-size: 32px;
}
.sence .msg h3 {
font-size: 26px;
font-family: "黑体";
font-weight: 400;
}
.sence .msg ul {
list-style: none;
/* list-style-image: url(../images/ul.png); */
/* list-style-position: inside; */
color: gray;
height: 200px;
/* background-color:#819cf8; */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sence .msg ul li {
background-image: url("../images/ul.png");
background-repeat: no-repeat;
background-position: 0 10px;
padding-left: 25px;
}
.msg .btns,.industry .content .obt .btns {
display: flex;
gap: 20px;
}
.industry {
padding: 90px;
height: 732px;
/* background-color:aquamarine; */
background-image: url(../images/m0w7ssdh01vr\(1\).png);
background-size: cover;
background-position: center;
color: white;
display: flex;
flex-direction: column;
align-items: center;
}
.industry h1{
font-size: 42px;
margin-bottom: 30px;
}
.industry .iono{
display: flex;
flex-direction: row;
}
.industry .left {
width: 200px;
height: 400px;
background-color: rgba(57, 65, 76, .5);
}
.industry .left li {
padding: 25px;
list-style: none;
height: 50px;
width: 150px;
border-radius: 10px;
text-align: center;
line-height: 80px;
font-size: 15px;
font-weight: 500;
}
.industry .left img{
width: 15px;
height: 15px;
}
.industry .content {
width: 600px;
height: 400px;
background-color: rgba(255, 255, 255, .1019607843);
display: flex;
justify-content: center;
align-items: center;
}
.industry h2{
font-size: 25px;
font-weight: 400;
padding: 10px;
}
.industry h3{
font-size: 15px;
font-weight: 500;
padding: 10px;
}
.industry .right {
width: 300px;
height: 400px;
background-color: rgba(255, 255, 255, .1019607843);
display: flex;
flex-direction: column;
align-items: center;
}
.right h2{
font-size: 17px;
font-weight: 500;
}
.right img{
width: 80px;
height: 80px;
}
.tech {
padding: 90px;
height: 700px;
background-color: #f5f7fa;
display: flex;
flex-direction: column;
align-items: center;
}
.tech .xty{
width: 1200px;
display: flex;
flex-direction: row;
gap: 15px;
color: #ffffff;
}
.tech div{
display: flex;
flex-direction: column;
justify-content: center;
}
.tech .xty h1{
height: 25px;
font-size: 30px;
font-weight: 500;
padding: 30px;
}
.tech .xty h2{
height: 12px;
font-size: 15px;
font-weight: 500;
}
.tech h1{
font-size: 42px;
margin-bottom: 50px;
}
.tech .aaa{
width: 600px;
height: 400px;
/* background-color:brown; */
background-image: url("../images/m04n363d0eas.webp");
border-radius: 2%;
}
.tech .sss{
width: 600px;
height: 400px;
/* background-color:aqua; */
background-image: url("../images/m04n363709k8.webp");
border-radius: 2%;
}.tech .ddd{
width: 600px;
height: 400px;
/* background-color:#4872f6; */
background-image: url("../images/m04n363e0jjz.webp");
border-radius: 2%;
}
.service {
height: 734px;
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
padding: 90px;
}
.service .tyl{
display: flex;
flex-direction: row;
gap: 35px;
}
.service h1{
font-size: 42px;
margin-bottom: 50px;
}
.service h2{
font-size: 23px;
font-weight: 500;
margin-bottom: 15px;
color: #333333;
}
.service h3{
font-size: 15px;
font-weight: 500;
color: #666666;
}
.service .qqq{
width: 400px;
height: 200px;
/* background-color: aqua; */
border-radius: 2%;
}
.service .tyl img{
width: 400px;
height: 200px;
border-radius: 2%;
}
.service .www{
width: 400px;
height: 200px;
/* background-color: rgb(255, 0, 144); */
border-radius: 2%;
}
.service .eee{
width: 400px;
height: 200px;
/* background-color: rgb(28, 239, 77); */
border-radius: 2%;
}
.xiaoet {
height: 1058px;
/* background-color:bisque; */
background-image: url(../images/lzuvu9jp0vcl\(1\).png);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 90px;
}
.xiaoet h1{
font-size: 42px;
margin-bottom: 20px;
font-weight: 600;
}
.xiaoet h2{
font-size: 17px;
font-weight: 400;
color: #666666;
margin-bottom: 40px;
}
.xiaoet h3{
font-size: 25px;
color: #333333;
padding: 10px;
}
.xiaoet p{
font-size: 16px;
color: #666666;
padding: 10px;
}
.xiaoet .tyu{
display: flex;
flex-direction: row;
gap: 35px;
}
.xiaoet .tyu img{
width: 450px;
height: 250px;
border-radius: 2%;
}
.xiaoet .tt1{
width: 450px;
height: 420px;
background-color: #ffffff;
border-radius: 2%;
}
.xiaoet .tt2{
width: 450px;
height: 420px;
background-color: #ffffff;
border-radius: 2%;
}
.xiaoet .tt3{
width: 450px;
height: 420px;
background-color: #ffffff;
border-radius: 2%;
}
.xiaoet .hyu img{
height: 100px;
}
.xiaoet .jjk{
cursor: pointer;
width: 140px;
height: 40px;
line-height: 40px;
text-align: center;
border: solid 1px #4872f6;
border-radius: 5px;
background-color:#ffffff;
color: #4872f6;
}
.advisory {
height: 264px;
/* background-color:aquamarine; */
background-image: url(../images/m201jna00mof.png);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
}
.advisory .opo{
display: flex;
flex-direction: row;
gap: 35px;
}
.advisory .opo img{
width: 100px;
height: 100px;
}
.advisory h1{
font-size: 42px;
margin-bottom: 20px;
font-weight: 600;
color: #ffffff;
}
.advisory h2{
font-size: 20px;
color: #ffffff;
}
.advisory h3{
font-size: 15px;
color: #ffffff;
font-weight: 500;
margin-bottom: 20px;
}
.advisory h4{
cursor: pointer;
width: 140px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 13px;
font-weight: 500;
border: solid 1px #4872f6;
border-radius: 5px;
background-color:#ffffff;
color: #4872f6;
}
.message {
height: 800px;
background-color: #161e30;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px;
}
.message .sss{
display: flex;
flex-direction: row;
gap: 50px;
}
.message h1{
font-size: 17px;
font-weight: 500;
color: #ffffff;
margin-bottom: 20px;
}
.message li{
color: #999999;
list-style: none;
margin-bottom: 20px;
}
.message .zy img{
width: 100px;
height: 100px;
display: flex;
flex-direction: row;
padding: 10px;
}
.message .lb7 h1{
font-size: 30px;
}
.message .lb7 h2{
font-size: 13px;
font-weight: 500;
color: #999999;
}
.message .lb7 p{
font-size: 13px;
font-weight: 500;
color: #999999;
}
.message .zzz{
display: flex;
flex-direction: row;
gap: 50px;
}
.line p {
flex: 1;
height: 2px;
background-color: #ccc;
}
.line div {
height: 30px;
width: 1300px;
font-size: 15px;
font-weight: 500;
color: #ccc;
text-align: left;
}
.message .xxx img{
height: 150px;
width: 1400px;
}style：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width:100%;
height:100%;
font-family: "微软雅黑";
font-size: 16px;
}网页效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
