2025-03-23

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹅通网页开发</title>
    <link rel="stylesheet" href="../style/style.css">

   <link rel="stylesheet" href="./hangye.css">
    <link rel="stylesheet" href="../homework/font_lo1821imo9/iconfont.css">
    <link rel="stylesheet" href="./jishu.css">
    <link rel="stylesheet" href="./yunying.css">
    <link rel="stylesheet" href="./jiejian.css">
    <style>
        
        .header{
            width: 100%;
            height: 409px;
            background-image: url(../imgs/diyizhang.webp);
            background-size:cover;        
            }
        .product{
            background: linear-gradient(to right,#f3f8f8,#ecf0f0 );
            width: 100%;
            height: 750px;
            display: flex;
            justify-content: space-evenly;
        }
        .scence{
            background: linear-gradient(162deg, rgb(255, 255, 255) 13.07%, rgb(238, 242, 250) 40.59%, rgb(227, 236, 247) 103.39%);
            width: 100%;
            height: 700px;
            display: flex;
            justify-content: center;
        }
            
        .ly{
            width: 100%;
            height: 48PX;
            display: flex;
            justify-content: space-between;
            position: fixed;
            top: 0;
            z-index: 1000;
            
        }
        
        .ly2{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content:space-evenly;
            flex-direction: column;
            align-items: center;
        }    
        
            
        .diyizhang{
            width: 100%;
            height: 100%;
        }
        .nav1{
            width:670px;
            height: 48px;
            display: flex;
            justify-content: space-evenly;
            list-style: none;
            align-items: center;

        }  
        .xiaoetong{
            width: 72px;
            height: 24px;
        }
        .ziti{
            font-size: 12px;
            color:#333;
        }
        .ziti1{
            color: #333;
        }
        .right1{
            height: 48px;
            width: 280px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        button{
            width:72px;
            height: 28px;
            border-radius: 2px;
            border: solid 1px #1474f9;;
        }
        .shangjiadenglu{
            font-size: 12px;
            color:#1474f9; 
        }
        .mianfeishiyong0{
            font-size: 12px;
            color: white;
            background-color: #1474f9;
        }
        .mianfeishiyong1{
            font-size: 12px;
            color: #1474f9;

        }
        
        .tt1{
            font-size: 36px;
            font-weight: 600;
            transform: translate(0px,10px);
        }
        
        .dierzhang{
            height: 380PX;
            width: 1100PX;
        }
        .chanpinxia{
            display: flex;
            justify-content: space-between;
            width: 1100px;
        }
        .nav{
            border:1px solid white;
            background-color: white;
            width: 355px;
            height: 150px;
            border-radius: 6px;
            transform: translate(0px,-25px);
            display: flex;
            flex-direction: column;
            justify-content:space-around;
            padding: 20px;
        }
        .chanpinxia div:nth-of-type(1){
            box-shadow:#2e84fc 0px -3px 0px;
        }
        .zhishidianpu{
            color: #1472ff;
        }
        .ziti2{
            font-size: 20px;
            font-weight: 500;
        }
        .ziti3{
            color: #666;
        }
.bj3{
    width: 1100px;
    height: 700px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;

}

.bt2{
    font-size: 36px;
    font-weight: 600;
    transform: translate(0px,10px);

}

.nav2{
    width: 550px;
    height: 36px;
    list-style: none;
    display: flex;
    justify-content:space-around;
    border: solid 1px white;
    background-color: white;
    border-radius: 25px;
    transform: translate(0px,-10px);
}
.nav2 li{
    width: 110px;
    height: 36px;
    text-align: center;
    line-height: 36px;
}
.nav2 li.a{
    background-color: #1472ff; 
    border-radius: 25px;
    color: white;
}
.dibu{
    width: 1100px;
    height: 410px;
    border-radius: 8px;
    overflow: hidden;
    border:solid 2px #fff;
    background-color: #fff;
    display: flex;
    transform: translate(0px,-20px);
}
.left,
.disanzhang
{
    width: 550px;
    height: 410px;
}
.right2
{
    flex: 1;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.9));
}
.xiaobj{
    height: 280px;
    width: 390px;
    display: flex;
    flex-direction: column;
    justify-content:space-between;
    transform: translate(0px,-20px);
}
.xiaobiaoti1{
    font-size: 26px;
    font-weight: 600;
    color: #191919;
}

.xiaobiaoti2{
    font-size: 18px;
    font-weight: 500;
}
.xiaobj div{
    background-image: url(../imgs/x.png);
    background-repeat:no-repeat;
    background-position:0 center;
    padding-left: 26px;
    background-size: 2.5%;
}

.anniu1{
    width: 390px;
    height: 36px;
    display: flex;
    gap: 15px;

}
.anniu1 div{
    width: 100px;
    height: 36px;
    border-radius: 6px;
    border: solid 1px #4872f6;
    text-align: center;
    line-height: 36px;
    color: #4872f6;
    cursor: pointer;
}
.anniu1 div:nth-of-type(1){
    background-color: #4872f6;
    color: white;
}

        
        
    </style>
</head>
<body>
    <div class="header">
        <div class="ly">
            <ul class="nav1">
                <li><img src="../imgs/xiaoetong.png" alt="" class="xiaoetong"></li>
                <li class="shouye ziti">首页</li>
                <li class="jiejuefangan ziti">解决方案</li>
                <li class="chanpinfuwu ziti">产品服务</li>
                <li class="jiage ziti">价格</li>
                <li class="huodong ziti">活动</li>
                <li class="anli ziti">案例</li>
                <li class="qudaohezuo ziti">渠道合作</li>
                <li class="xiazaiyubangzhu ziti">下载与帮助</li>
                <li class="guanyuwomen ziti">关于我们</li>
            </ul>
            <div class="right1">
                <div class="woshixueyuan ziti1">我是学员</div>
                <button class="shangjiadenglu ziti1">商家登录</button>
                <button class="mianfeishiyong0 ziti1">免费试用</button>
            </div>
        </div>
        
    </div>
        
    <div class="product">
        <div class="ly2">
           <div class="tt1"> 我们的产品能力</div>
           <div class="img2"><img src="../imgs/dierzhang.webp" alt="" class="dierzhang"></div>
           <div class="chanpinxia">
                <div class="nav">
                     <h2 class="zhishidianpu ziti2">知识店铺</h2>
                     <p class="center ziti3">1分钟搭建您的知识商城<br>
                        助力高效知识变现</p>
                     <p class="mianfeishiyong1">免费试用 →</p>   
                </div>
                <div class="nav">
                    <h2 class="siyuzhibo ziti2">私域直播</h2>
                    <p class="center ziti3">企业级专属私域直播平台<br>
                        实现私域流量高效运营</p>
                    <p class="mianfeishiyong1">免费试用 →</p>   
               </div>
               <div class="nav">
                <h2 class="qiwei ziti2">企微SCRM</h2>
                <p class="center ziti3">企业微信私域运营神器<br>
                    数据洞察驱动业绩增长</p>
                <p class="mianfeishiyong1">免费试用 →</p>   
           </div>
           </div>
        </div>
    </div>
 <div class="scence">
        <div class="bj3">
            <div class="bt2">我们的场景解决方案</div>
            <ul class="nav2">
                <li class="a">公域获客</li>
                <li>私域运营</li>
                <li>直播带货</li>
                <li>内容交付</li>
                <li>数据化运营</li>
            </ul>
            <div class="dibu">
                <div class="left"><img src="../imgs/m10c72vn0zzo.webp" alt="" class="disanzhang"></div>
                <div class="right2">
                    <div class="xiaobj">
                        <span class="xiaobiaoti1">公域获客</span> 
                        <span class="xiaobiaoti2">
                        多渠道获客，沉淀私域流量池</span>
                        <div class="ziti3">
                        打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速
                       开启知识变现
                        </div>
                        <div class="ziti3">
                        多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到
                       私域流量池
                        </div> 
                        <div class="ziti3">
                        丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI
                        </div>
                    </div>
                    <div class="anniu1">
                        <div>免费试用</div>
                        <div>了解详情</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
前三网页
第4
 <div class="fourth">
      <div class="head4">
        我们的行业解决方案
      </div>
      <div class="main4">
        <img src="../images/屏幕截图 2025-03-19 194300.png" alt="">
      </div>
    </div>
.css.fourth{
    background-color: #16171a;
    width: 100%;
    height: 1500px;
    display: flex;
    flex-direction: column;
    gap: 45px;
    align-items: center;
}
.head4{
    width: 100%;
    height: 100px;
    font-size: 38px;
    font-weight: 600;
    text-align: center;
    margin-top: 50px;
    color: #fff;
}
.main4 img{
    width: 1400px;
    height: 500px;
}

第5
 <div class="five">
      <div class="head5">我们的技术优势</div>
      <div class="main5">
        <div class="pt1">
          <img src="../images/微信图片_20250320084245.jpg" alt="">
          <p class="write">超稳定<br>
            多云负载均衡/全球CDN加速
          </p>
        </div>
        <div class="pt2">
          <img src="../images/微信图片_20250320084239.jpg" alt="">
          <p class="write">
            高并发<br>
            支持多用户同时在线
          </p>
        </div>
        <div class="pt3">
          <img src="../images/微信图片_20250320084232.jpg" alt="">
          <p class="write">
            超流畅<br>
            观看端自动探测并主动跨云线路切换
          </p>
        </div>
      </div>
    </div>
.css
.five{
    width: 100%;
    height: 1500px;
    display: flex;
    gap: 30px;
    align-items: center;
    /* background-color: #a555c2; */
    flex-direction: column;
}
.head5{
    font-size: 38px;
    font-weight: 600;
    width: 100%;
    height: 100px;
    background-color: #fff;
    text-align: center;
    margin-top: 30px;
}
.main5{
    /* background-color: #d38c8c; */
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.pt1{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px;
    width: 500px;
}
.pt1 img{
    height: 400px;
    width: 560px;
    filter: brightness(80%);
}
.pt2{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px;
    width: 500px;
}
.pt2 img{
    height: 400px;
    width: 560px;
    filter: brightness(80%);
}
.pt3{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 400px;
    width: 500px;
}
.pt3 img{
    height: 400px;
    width: 560px;
    filter: brightness(80%);
}
.write{
    position: absolute;
    top: 50%;
    color: #f7f8fa;
    font-size: 25px;
}
第6
 <div class="head6">我们的运营服务</div>
    <div class="main6">
      <div class="pt6">
        <img src="../images/微信图片_20250321162051.jpg" alt="">
        <img src="../images/微信图片_20250321162050.jpg" alt="">
        <img src="../images/微信图片_202503211620491.jpg" alt="">
        <img src="../images/微信图片_20250321162049.jpg" alt="">
      </div>
      <div class="wz6">
        <div class="part1">
          <p>社群服务</p><br>
          <p>标杆商家分享,同行商家交流,总比别人快一步</p>
        </div>
        <div class="part2">
          <p>管家服务</p><br>
          <p>客户经理,服务管家,多角色在群,服务全面包围</p>
        </div>
        <div class="part3">
          <p>大客服务</p><br>
          <p>设置夜班服务管家/假期值班管家,24小时在线服务,<br>
            服务从不掉线</p>
        </div>
        <div class="part4">
          <p>运维服务</p><br>
          <p>需求24小时反馈,需求处理率大于90%,产品经理1v1回复</p>
        </div>
      </div>
    </div>
.css
.head6{
    text-align: center;
    font-size: 38px;
    font-weight: 600;
}  
.main6{
    width: 100%;
    height: 450px;
    /* background-color: #f38e8e; */
}
.pt6 img{
    height: 260px;
    width: 400px;
    margin-left: 10px;
}
.wz6{
    display: flex;
     align-items: center;
     justify-content: space-evenly;
}
.wz6 p{
    margin-left: 35px;
}
第789
<div class="y">
        <div class="y1">他们都在用小鹅通</div>
        <div class="y2">
            <div class="y21">
              <div class="y211"><img src="../imgs/Snipaste_2025-03-23_14-34-05.png" alt=""></div>
            </div>
        </div>
        <div class="y3">
            <div class="y31"><img src="../imgs/Snipaste_2025-03-23_14-35-05.png" alt=""></div>
        </div>
        <div class="y4">
            <div class="y41">更多案例</div>
        </div>
    </div>
    <!-- 他们都在用小鹅通结束 -->
     <!-- 解决方案开始 -->
    <div class="u">
        <div class="u1">
            <div class="u11">
                立即扫码咨询，领取您的专属解决方案
            </div>
            <div class="u12">
                <div class="u121"><img src="../imgs/Snipaste_2025-03-23_14-45-24.png" alt=""></div>
                <div class="u122">
                    <div class="wai">
                        <div class="u1221">扫码添加客户经理</div>
                        <div class="u1222">或者您也可以先</div>
                        <div class="u1223">免费试用</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 解决方案结束 -->
    <!-- 底部开始 -->
    <div class="i"><img src="../imgs/Snipaste_2025-03-23_14-46-59.png" alt=""></div>
    <!-- 底部结束 -->
</body>
</html>
.css
.y{width: 100%;height: 758px;background: linear-gradient(to bottom, #a9d7e9, #FFFFFF);;display: flex;flex-direction: column;align-items: center;justify-content: space-between;}
.y1{width: 1000px;height: 72px;;font-size: 35px;font-weight:700;color:black;display: flex;align-items: center;justify-content: center;}
.y21{width: 1100px;height: 300px;background-color: white;}
.y31{width: 1100px;height: 300px;background-color: white;}
.y211 img{width: 100%;height: 100%;}
.y31 img{width: 100%;height: 100%;}
.y4{width: 1000px;height: 50px;background-color: white;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;}
.y41{width: 100px;height: 30px;background-color:white;display: flex;align-items: center;justify-content: center;}
.y41:hover{background-color: white;color:#4872f6;}
.y41{cursor: pointer;}
.y41{border: solid 1px #4872f6;}

.u{display: flex;flex-direction: column;align-items: center;justify-content: space-between;}
.u1{width: 100%;height: 240px;background-color: blue;display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;}
.u11{width: 1000px;height: 100px;background-color: blue;display: flex;align-items: center;justify-content: center;}
.u11{font-size: 30px;font-weight: 600;color: white;}
.u12{width: 100%;height: 120px;background-color: blue;display: flex;align-items: center;justify-content: center;}
.u122{display: flex;flex-direction: column;justify-content: space-between;align-items: center;}
.u1221{font-size: 20px;font-weight: 600;color: white;}
.u1222{font-size: 12px;color: white;}
.u1223{font-size: 12px;color: white;}
.u122{width: 200px;height: 100px;}
.wai{width: 180px;height: 90px;background-color: blue;display: flex;flex-direction: column;justify-content: space-between;}
.u1223{font-size: 12px;color: #4872f6;border-bottom: solid 1px #4872f6;cursor: pointer;}
.u1223{width: 100px;height: 30px;background-color: white;display: flex;align-items: center;justify-content: center;}

.i img{width: 100%;height: 100%;}
···
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2025-03-23
    哦！你还在啊！ 提醒我才来的。为什么没来，还断更了？ 因为有了更重要的事情了呗！ 我还会坚持多久日更保持？ 不知道...
    时光漫卷_素笺写流年阅读 12评论 0赞 1
  • 2025-03-23|论语|良心是幽闭千年的山谷中射进来的一道光
    子曰：“志士仁人，无求生以害仁，有杀身以成仁。” ----孔子《论语·卫灵公》 孔子说：“志向远大与充满仁心的人，...
    陆颜阅读 45评论 0赞 0
  • 2025-03-23
    （原创）孩子长大的标志 不论我们自己是否养育过孩子，一定年龄的人一般都见证过孩子成长的过程。或者，还能部分地通过自...
    与真理约会阅读 28评论 0赞 0
  • 2025-03-23
    大家好 今天由我给大家分享，请指教。 【部 门 】业务一部 【分 享 人】张沐妍 【分享时间】2025年3月22...
    小娴鱼阅读 30评论 0赞 0
  • 2025-03-23
    加强领导干部作风建设，永葆党的先进性和纯洁性 党的干部是联系群众的桥梁和纽带，党和人民的血肉联系主要靠...
    smile1111阅读 21评论 0赞 0