小鹅通开发

代码实现
<!DOCTYPE html>
<html lang="zh">
<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;
         }
         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;
        }
        .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;
            border-radius: 10px;
            text-align: center;
            line-height: 38px;
            color: #4872f6;
            background-color: #fff;
            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: #ed8038ec;
            color: white;
            transition: all.2s;
        }
      .btns div:nth-of-type(3):hover{
            background-color: #748cdc;
            color: white;
            transition: all.2s;
        }
        .img1{
            width: 100%;
            height: 500px;
            margin: 0 auto;
            margin-top: 50px;
        }
        .img1 img{
            width: 100%;
            height: 500px;
        }
        .information-list{
            width: 100%;
            height: 120px;
            display: flex;
            justify-content: space-evenly;
        }
        .information-lift{
            width: 200px;
            height: 120px;
            display: flex;
        }
        .information-img img{
            width: 73px;
            height: 68px;
            object-fit: contain;
        }
        .information-right{
            width: 100px;
        }
        .information-number{
            width: 100px;
            height: 30px;
            display: flex;
            justify-content: space-between;
            position: relative;
        }
       .information-number-1{
            font-size: 30px;
            font-weight: 600;
        }
        .information-number-2{
            font-size: 15px;
            font-weight: 600;
            position: absolute;
            bottom: 0;
            right: 0;
        }
       .information-number-3{
            font-size: 15px;
            font-weight: 300;
        }
        .content{
            width: 100%;
            align-items: center;
            text-align: center;
        }
        .content h1{
            font-size: 60px;
            font-weight: 600;
        }
        .content-font{
            width: 100%;
            height: 770px;
        }
        .content-font h3{
            font-size: 35px;
            font-weight: 600;
            height: 90px;
        }
        .content-fent{
            width: 100%;
            display: flex;
            justify-content: space-evenly;
            gap: -100px;
        }
        .content-fent img{
            width: 500px;
            height: 558px;
        }
        .content-text{
            width: 570px;
            height: 558px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: left;
        }
        .content-text1{
            width: 570px;
            height: 174px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;

        }
        .content-text1 
        .content-up{
            width: 82px;
            font-size: 20px;
            font-weight: 300;
            display: inline-block;
            background-color: #748cdc;
            color: white;
            border-radius: 4px;
        }
        .content-text1:hover{
            color: #4872f6;

        }
        .content-text1 .content-middle{
            font-size: 25px;
            font-weight: 400;

        }
       .content-text1.content-down{
            font-size: 20px;
            font-weight: 300;
        }
        .content-text2{
            width: 172px;
            height: 52px;
            font-size: 25px;
            font-weight: 300;
            display: inline-block;
            background-color: #4872f6;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        } 
        .route{
            width: 100%;
            height: 816px;
            align-items: center;
            text-align: center;
        }
        .route h1{
            font-size: 60px;
            font-weight: 600;
        }
        .route h4{
            font-size: 30px;
            font-weight: 300;
        }
        .route-bg{
            width: 100%;
            height: 816px;
            display: flex;
            justify-content:space-evenly;
            align-items: center;
            text-align: center;
        }
        .route-text{
            width: 400px;
            height: 485px;
            border: 3px solid #03497e;
            padding: 10px;
            box-sizing: border-box;
            text-align: left;
            border-radius: 10px;
        }
        #lsw{
            width: 400px;
            height: 60px;
            font-size: 30px;
            font-weight: 300;
        }
        .route-text.text-up{
            width: 400px;
            height: 42px;
            font-size: 20px;
            font-weight: 300;
        }
        .route-text img{
            width: 320px;
            height: 271px;
        }
        .route-text2{
            width: 360px;
            height: 42px;
            font-size: 25px;
            font-weight: 300;
            display: inline-block;
            background-color: #4872f6;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }
        .fuwu{
            width: 100%;
            height: 600px;
            align-items: center;
            text-align: center;

        }
        .fuwu h1{
            font-size: 60px;
            font-weight: 600;
        }
        .fuwu h4{
            font-size: 30px;
            font-weight: 300;
        }
        .fuwu img{
            width: 100%;
            height: 400px;
        }
        .surperman{
            width: 100%;
            height: 800px;
            align-items: center;
            text-align: center;
        }
       .surperman h1{
            font-size: 60px;
            font-weight: 600;
       }
       .surperman-text{
            width: 100%;
            height: 600px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            text-align: center;
       }
       .surperman-text img{
        width: 200px;
        height: 200px;
       }
       .surperman-text span{
        font-size: 20px;
        font-weight: 300;
       }
    </style>
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
    <div class="bg">
        <div class="nav">
            <ul>
                <li><img src="./imges/下载.png" alt=""></li>
                <li>首页</li>
                <li>知识店铺</li>
                <li>小鹅通直播</li>
                <li>企学院</li>
                <li>海外版eLink</li>
                <li>客户案例</li>
                <li>价格</li>
                <li>公司简介</li>
                <li>下载专区</li>
            </ul>
            <div class="btns">
                <div>我是学员</div>
                <div>商家登录</div>
                <div>免费试用</div>
            </div>
        </div>
    </div>
    <div class="img1"><img src="./imges/1.png" alt=""></div>
    <div class="information-list">
        <div class="information-lift">
            <div class="information-img"><img src="./imges/2.1.png" alt=""></div>
            <div class="information-right">
                <div class="information-number">
                    <span class="information-number-1">160</span>
                    <span class="information-number-2">万</span>
                </div>
                <span class="information-number-3">注册客户数</span>
            </div>
        </div>
        <div class="information-lift">
            <div class="information-img"><img src="./imges/2.2.png" alt=""></div>
            <div class="information-right">
                <div class="information-number">
                    <span class="information-number-1">1000</span>
                    <span class="information-number-2">万人</span>
                </div>
                <span class="information-number-3">最高同时在线</span>
            </div>
        </div>
        <div class="information-lift">
            <div class="information-img"><img src="./imges/2.3.png" alt=""></div>
            <div class="information-right">
                <div class="information-number">
                    <span class="information-number-1">2000</span>
                    <span class="information-number-2">万</span>
                </div>
                <span class="information-number-3">知识产权数</span>
            </div>
        </div>
        <div class="information-lift">
            <div class="information-img"><img src="./imges/2.4.png" alt=""></div>
            <div class="information-right">
                <div class="information-number">
                    <span class="information-number-1">7.8</span>
                    <span class="information-number-2">亿</span>
                </div>
                <span class="information-number-3">终端用户数</span>
            </div>
        </div>
    </div>
    <div class="content">
        <h1>五大核心产品能力</h1>
        <div class="content-font">
            <h3>直播应用</h3>
            <div class="content-fent">
                <div class="content-img"><img src="./imges/直播应用.jpg" alt=""></div>
                <div class="content-text">
                    <div class="content-text1">
                       <span class="content-up">引流获客</span>
                       <span class="content-middle">微信一键打开，轻松在各个渠道直播引流</span>
                       <span class="content-down">支持多平台转播，连接公域流量并引流到直播间，把用户都沉淀到自己的小鹅通知识店铺内。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">互动体验</span>
                        <span class="content-middle">一键美颜+虚拟背景，超低延迟打造极佳互动体验</span>
                        <span class="content-down">超低延迟免流量，支持虚拟背景、美颜、圆桌会议，连麦等功能，大幅提升直播间互动体感，打造你的最佳直播间。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">带货玩法</span>
                        <span class="content-middle">花样抽奖优惠券玩法，快速下单买买买</span>
                        <span class="content-down">支持直播间抽奖、优惠券、打赏等玩法，直播间内就能下单购买，大幅提升用户购买欲望，让直播间成交率飙升。</span>  
                    </div>
                    <div class="content-text2">免费试用</div>
                </div>
            </div>
        </div>
        <div class="content-font">
            <h3>内容产品</h3>
            <div class="content-fent">
                <div class="content-img"><img src="./imges/内容产品.jpg" alt=""></div>
                <div class="content-text">
                    <div class="content-text1">
                       <span class="content-up">内容产品</span>
                       <span class="content-middle">图文/音视频多种形式，把内容变成付费产品</span>
                       <span class="content-down">支持图文、音频、视频、电子书、AI互动课等内容形式,上架你的知识店铺.能够付费购买与使用,实现内容产品化。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">沉淀体系</span>
                        <span class="content-middle">专栏/训练营打包内容，建立结构化内容体系</span>
                        <span class="content-down">可以把多个内容打包成专栏、大专栏、训练营、会员课程等形式，建立体系化的内容产品，满足系统学习需求。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">互动学习</span>
                        <span class="content-middle">打卡/学练考一体化，满足强互动式学习体验</span>
                        <span class="content-down">支持题库、考试、打卡、证书、作业本等强互动式教学工具，与内容产品相结合，扎实抓住真实学习效果。</span>
                    </div>
                    <div class="content-text2">免费试用</div>
                </div>
            </div>
        </div>
        <div class="content-font">
            <h3>营销玩法</h3>
            <div class="content-fent">
                <div class="content-img"><img src="./imges/营销玩法.jpg" alt=""></div>
                <div class="content-text">
                    <div class="content-text1">
                       <span class="content-up">引流获客</span>
                       <span class="content-middle">多种裂变+分销玩法，源源不断获取用户</span>
                       <span class="content-down">支持裂变海报、涨粉神器等裂变工具，以及推广员等分销玩法，通过用户社交关系就能快速引流获客。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">促销转化</span>
                        <span class="content-middle">秒杀拼团折扣，营造紧张刺激的促销氛围</span>
                        <span class="content-down">多种秒杀、拼团、限时折扣、优惠券等等大量促销工具，紧张刺激的氛围充满你的知识店铺，让用户疯狂买买买。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">口碑复购</span>
                        <span class="content-middle">分享试用体验，用户主动增购复购产品</span>
                        <span class="content-down">支付有礼、请好友看、免费试听/试看等功能，创造更多分享试用体验的机会，让用户主动购买你的更多产品。</span>
                    </div>
                    <div class="content-text2">免费试用</div>
                </div>
            </div>
        </div>
        <div class="content-font">
            <h3>变现能力</h3>
            <div class="content-fent">
                <div class="content-img"><img src="./imges/变现能力.jpg" alt=""></div>
                <div class="content-text">
                    <div class="content-text1">
                       <span class="content-up">商品交易</span>
                       <span class="content-middle">实物商品+虚拟商品，把生意做的更加广阔</span>
                       <span class="content-down">支持实物商品、虚拟商品售卖，还能组合售卖，实现课程带货等场景，提高客单价和营收，拓宽更多变现可能性。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">订单管理</span>
                        <span class="content-middle">订单筛选导出+发货追踪，掌握每个环节状态</span>
                        <span class="content-down">可按多个维度导出下单、交易等记录，及时掌握每个订单的最新状态，还能追踪实物商品的物流状态。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">交易分析</span>
                        <span class="content-middle">查看交易漏斗与订单构成，快速制定售卖策略</span>
                        <span class="content-down">具备交易漏斗、订单构成、商品分析等分析工具，自动化生成店铺交易环节的关键数据，助你快速制定最佳售卖策略</span>
                    </div>
                    <div class="content-text2">免费试用</div>
                </div>
            </div>
        </div>
        <div class="content-font">
            <h3>用户管理</h3>
            <div class="content-fent">
                <div class="content-img"><img src="./imges/用户管理.jpg" alt=""></div>
                <div class="content-text">
                    <div class="content-text1">
                       <span class="content-up">企微助手</span>
                       <span class="content-middle">企业活码+智能回复，保障你的用户资产</span>
                       <span class="content-down">支持企微活码、群画像，用户标签等企微助手能力，同时管理员工和用户，统一沉淀到你自己的用户资源池。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">标签分层</span>
                        <span class="content-middle">每个用户都能打标签，分层针对性运营</span>
                        <span class="content-down">支持后台给每位客户打标签做分组，对不同的客户特征、行为、需求等做针对性的运营动作，大幅提升运营效率。</span>
                    </div>
                    <div class="content-text1">
                        <span class="content-up">会员体系</span>
                        <span class="content-middle">超级会员+积分商城，构建高粘性用户关系</span>
                        <span class="content-down">支持超级会员、积分商城、活动管理等能力，运用独有的会员身份和积分体系，筛出高粘性的用户。</span>
                    </div>
                    <div class="content-text2">免费试用</div>
                </div>
            </div>
        </div>
    </div>
    <div class="route">
        <h1>全渠道经营场景</h1>
        <h4>覆盖全渠道经营场景，占据每个流量入口，流量变现快速高效</h4>
        <div class="route-bg">
            <div class="route-text">
                <span class="iconfont icon-shouji" id="lsw">微信H5店铺</span><br>
                <span class="text-up">轻量级移动经营体验</span><br>
                <span class="text-down">即开即用易传播</span>
                <span><img src="./imges/全渠道经营场景1.png" alt=""></span>
                <div class="route-text2">免费试用</div>
            </div>
            <div class="route-text">
                <span class="iconfont icon-weixinxiaochengxu" id="lsw">微信小程序</span><br>
                <span class="text-up">一键生成，无需开发</span><br>
                <span class="text-down">快速拥有自己的小程序店铺</span>
                <span><img src="./imges/全渠道经营场景2.png" alt=""></span>
                <div class="route-text2">免费试用</div>
            </div>
            <div class="route-text">
                <span class="iconfont icon-pcshangchengshouyeguanli" id="lsw">PC独立官网</span><br>
                <span class="text-up">具备产品交付和商业变现能力</span><br>
                <span class="text-down">建立专属品牌官网</span>
                <span><img src="./imges/全渠道经营场景3.png" alt=""></span>
                <div class="route-text2">免费试用</div>
            </div>
            <div class="route-text">
                <span class="iconfont icon-PullAPI" id="lsw">小鹅通助手APP</span><br>
                <span class="text-up">学员/讲师/商家都能用</span><br>
                <span class="text-down">无需开发也能在APP上经营变现</span>
                <span><img src="./imges/全渠道经营场景4.png" alt=""></span>
                <div class="route-text2">免费试用</div>
            </div>
            <div class="route-text">
                <span class="iconfont icon-appxiazai" id="lsw">PI/SDK开发</span><br>
                <span class="text-up">联接多个渠道,打通自有APP</span><br>
                <span class="text-down">实现个性化自主开发</span>
                <span><img src="./imges/全渠道经营场景5.png" alt=""></span>
                <div class="route-text2">免费试用</div>
            </div>
        </div>
    </div>
    <div class="fuwu">
        <h1>以客户为中心的陪伴式服务</h1>
        <h4>围绕客户购买后的全生命周期运营,提供1V1的陪伴服务</h4>
        <div><img src="./imges/陪伴式服务.jpg" alt=""></div>
    </div>
    <div class="surperman">
        <h1>三项“超能力”，给你稳定的技术保障</h1>
        <div class="surperman-text">
            <div class="surperman-text1">
                <div><img src="./imges/超能力1.png" alt=""></div>
                <span>音画实时同步,延迟不超过0.5秒。<br> 模拟现场感，隔空对话不尴尬。</span>
            </div>
        
            <div class="surperman-text1">
                <div><img src="./imges/超能力2.png" alt=""></div>
                <span>保障网络信息和用户数据库安全</span>
            </div>
            <div class="surperman-text1">
                <div><img src="./imges/超能力3.png" alt=""></div>
                <span>高清直播依然流畅，拒绝卡顿。<br>观看回放时，可自由调节播放清晰度。</span>
            </div>
        </div>
    </div>
</body>
</html>
网页效果
image.png
小鹅通开发

推荐阅读更多精彩内容
