2025-03-21

代码演示
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="../css/总体.css">
  <link rel="stylesheet" href="../css/小鹅通网页.css">
</head>

<body>
  <!-- 第一个网页 -->
  <div class="one">
    <div class="head">
      <div class="xiaoetong">
        <img src="../images/下载.png" alt="">
      </div>
      <table>
        <tr>
          <th>首页</th>
          <th>解决方案</th>
          <th>产品服务</th>
          <th>价格</th>
          <th>活动</th>
          <th>案例</th>
          <th>渠道合作</th>
          <th>下载与帮助</th>
          <th>关于我们</th>
        </tr>
      </table>
      <div class="tail">
        <button>我是学员</button>
        <button>商家登录</button>
        <button>免费试用</button>
      </div>
    </div>
    <div class="main">
      <img src="../images/微信图片_20250317225632.jpg" alt="">
    </div>
  </div>
  <!-- 第一个网页 -->
  <!-- 第二个网页 -->
  <div class="two">
    <div class="head2">
      我们的产品能力
    </div>
    <div class="main2">
      <img src="../images/微信图片_20250318225836.jpg" alt="">
    </div>
    <div class="footer2">
      <ul class="zhishi">
        <li class="start">知识店铺</li>
        <li>一分钟搭建你的知识商城</li>
        <li>助力高效知识变现</li>
        <li class="free">免费试用</li>
      </ul>
      <ul class="zhishi">
        <li class="start">私域直播</li>
        <li>企业级专属私域直播平台</li>
        <li>实现私域流量高效运营</li>
        <li class="free">免费试用</li>
      </ul>
      <ul class="zhishi">
        <li class="start">企微SCRM</li>
        <li>企业微信私域运营神器</li>
        <li>数据洞察驱动业绩增长</li>
        <li class="free">免费试用</li>
      </ul>
    </div>
    <!-- 第二个网页 -->
    <!-- 第三个网页 -->
    <div class="three">
      <div class="title">我们的场景解决方案</div>
      <ul class="nav">
        <li>公域获客</li>
        <li>私域运营</li>
        <li>直播带货</li>
        <li>内容交付</li>
        <li>数字化运营</li>
      </ul>
      <div class="intro">
        <div class="left">
          <img src="../images/m10c72vn0zzo.webp" alt="">
        </div>
        <div class="right">
          <h1>公域获客</h1>
          <h2>多渠道获客，沉淀私域流量池</h2>
          <p><span><img src="../images/下载 (1).png" alt=""></span>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现
          </p>
          <p><span><img src="../images/下载 (1).png" alt=""></span>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</p>
          <p><span><img src="../images/下载 (1).png" alt=""></span>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景,提升广告ROI</p>
          <div class="btns">
            <div>免费试用</div>
            <div>了解详情</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三个网页 -->
    <!-- 第四个网页 -->
    <div class="fourth">
      <div class="head4">
        我们的行业解决方案
      </div>
      <div class="main4">
        <img src="../images/屏幕截图 2025-03-19 194300.png" alt="">
      </div>
    </div>
    <!-- 第四个网页 -->
    <!-- 第五个网页 -->
    <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>
    <!-- 第五个网页 -->
    <!-- 第六个网页 -->
    <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>
    <!-- 第六个网页 -->
    <!-- 第七个网页 -->
    <div class="head7">
      <p>他们都在使用小鹅通</p><br>
      <p>(*排名不分先后顺序)</p>
    </div>
    <div class="main7">
      <div class="start7">
        <div class="pt71"><img src="../images/微信图片_20250321165702.jpg" alt="">
          <p>小能熊科学学习</p>
          <p>小能熊学院以学习科学化为使命，专注提供学习方法和自我管理解决方案，陪伴严肃、耐心、永不妥协的终生学习者！</p>
        </div>
        <div class="pt72"><img src="../images/微信图片_20250321165703.jpg" alt="">
          <p>刘润·进化的力量</p>
          <p>刘润,润米咨询创始人,“5分钟商学院”课程主理人,著名商业顾问,曾为海尔、中远、恒基、百度等企业提供过战略咨询服务,每年10月举办“进化的力量·年度演讲”,为创业者企业家提供年度规划的参考方向,一起...</p>
        </div>
        <div class="pt73"><img src="../images/微信图片_20250321165704.jpg" alt="">
          <p>佰君易直播间</p>
          <p> 佰君易直播间,由培养过10万项目管理师的王远航老师打造,为各行业提供项目管理实战培训。佰君易直播间与小鹅通深度合作,帮助职场小伙伴升职加薪</p>
        </div>
      </div>
      <div class="foot7">
        <img src="../images/屏幕截图 2025-03-21 170917.png" alt="">
      </div>
      <div class="last7">
        <button class="anniu7">查看更多案例</button>
      </div>
    </div>
    <!-- 第七个网页 -->
    <!-- 第八个网页 -->
    <div class="bg8">
      <div class="head8">
        立即扫码咨询,领取你的专属解决方案
      </div>
      <div class="main8">
        <div class="saoma">
          <img src="../images/微信图片_20250321193010.jpg" alt="">
        </div>
        <div class="right8">
         <p>扫码添加客户经理</p>
         <p>或者你也可以选</p>
         <button>免费试用</button>
        </div>
      </div>
    </div>
    <!-- 第八个网页 -->
     <!-- 第九个网页 -->
      <div class="main9">
        <img src="../images/屏幕截图 2025-03-21 174008.png" alt="">
      </div>
      <!-- 第九个网页 -->
</body>

</html>
css样式
body{
overflow: scroll;
display: flex;
flex-direction: column;
gap: 50px;
}
/* 第一个网页 */
.one{
width: 100%;
height: 800px;
/* background-color: #7187bc;  */
}
.xiaoetong img{
    height: 45px;
    width: 150px;
    margin-top: 10px;
    padding-left: 25px;
    background-color: #fff;
}
.head{
    width: 100%;
    height: 60px;
    margin-top: 20px;
    /* background-color: #c98282; */
    display: flex;
    align-items: center;
    gap: 25px;
}
th{
        margin-left: 50px;
        height: 100%;
        width: 125px;
        font-size: 20px;
        cursor: pointer;
    }
th:hover{
        color: #94c9e7;
    }           
.tail{
    height: 100%;
    flex: 1;
    background-color: #fff;
    text-align: center;
    margin-right: 25px;
} 
.tail button{
    font-size: 15px;
    background-color: #94c9e7;
    padding: 10px;
    margin-left: 5px;
    cursor: pointer;
}
.tail button:hover{
color: aliceblue;
background-color: #66aedc;
}
.main img{
    width: 100%;
    height: 100%;
}
/* 第一个网页 */
/* 第二个网页 */
.two{
margin-top: 35px;
width: 100%;
height: 1000px;
display: flex;
flex-direction: column;
gap: 20px;
/* background-color: #94c9e7; */
}
.head2{
    font-size: 38px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 5px;
}
.main2 img{
    width: 100%;
    height: 100%;
}
.footer2{
    display: flex;
    gap: 180px;
    width: 100%;
    height: 130px;
}
.zhishi{
    border-radius: 5px;
    box-shadow: 5px 5px 5px;
    background-color: #fff;
    height: 140px;
    width: 400px;
    list-style: none;
    margin-left: 30px;
    margin-bottom: 50px;
}
.zhishi li{
    margin-top: 10px;
    margin-left: 20px;
}
.free{
    color: #66aedc;
    font-weight: 50px;
    cursor: pointer;
}
.start{
    font-size: 25px;
    font-weight: 30px;
}
/* 第三个网页 */
.three{
    width: 100%;
    height: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    /* background-color: #a2c589; */
    gap: 50px;
}
.title{
    margin-top: 25px;
    font-size: 38px;
    font-weight:600;
    letter-spacing: 5px;
}
.left{
    width: 700px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #474888;
}
.left img{
    width: 700px;
    height: 100%;
}
.nav{
    width: 850px;
    height: 40px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    border-radius: 20px;
    background-color: #fff;
    }
.nav li{
    width: 150px;
    height: 40px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    border-radius: 15px;
}
.nav li:hover{
    color: #f0f0f5;
    background-color: #8bc1d3;
}
.right h1{
    font-size: 35px;
    margin-left: 20px;
    margin-top: 45px;
}
.right h2{
    font-size: 20px;
    margin-left: 20px;
}
.intro{
    width: 1400px;
    height: 650px;;
    display: flex;
    justify-content: space-evenly;
    border: solid 2px;
    overflow: hidden;
     align-items: center;
}
.right{
    height:100%;
    flex: 1;
    display:flex;
     justify-content: space-around;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
}
.btns{
    /* width: 100%;
    height: 30px; */
    display: flex;
    gap: 30px;
}
.btns div{
    width: 100px;
    height: 45px;
    border: solid 1px #8bcced;
    cursor:pointer;
    text-align:center;
    border-radius: 5px;
    line-height: 38px;
}
.btns div:hover{
    color: #fff;
    background-color: #72b9dc;
}
.right p{
    font-size: 18px;
    margin-left: 20px;
}
/* 第三个网页 */
/* 第四个网页 */
.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;
}
/* 第四个网页 */
/* 第五个网页 */
.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;
}
/* 第五个网页 */
/* 第六个网页 */
.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;
}
/* 第六个网页 */
/* 第七个网页 */
.head7 p:nth-of-type(1){
    font-size: 38px;
    font-weight: 600;
    text-align: center;
    margin-top: 50px;
}  
.head7 p:nth-of-type(2){
    text-align: center;
    margin-top: 15px;
}
.main7{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 1500px;
}
.start7 img{
    width: 460px;
    height: 300px;
}
.start7{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 600px;
    /* background-color: #bd8f8f; */
}
.start7 p:nth-of-type(1){
    font-size: 25px;
    font-weight: 400;
}
.pt71 {
    width: 500px;
    height: 550px;
    /* background-color: #72b9dc; */
}
.pt72 {
    width: 500px;
    height: 550px;
    /* background-color: #312fc1; */
}
.pt73 {
    width: 500px;
    height: 550px;
    /* background-color: #72b9dc; */
}
.start7 p{
    margin-top: 35px;
}
.last7{
    width: 100px;
    height: 50px;
    border-color: #8bcced;
    /* background-color: #c24f4f; */
}
.anniu7{
    border-color: #8bcced;
    border-width: 2px;
    border-style: solid;
    
}
/* 第七个网页 */
/* 第八个网页 */
.bg8{
    height:1000px;
    width: 100%;
    background-color:rgb(18, 84, 169);
}
.head8{
    font-size: 38px;
    font-weight: 600;
    color: white;
    width: 100%;
    height: 60px;
    text-align: center;
    margin-top: 30px;
}
.main8{
    flex: 1;
    width: 100%;
    display: flex;
    /* background-color:red;                                                                                                                                                             #fff; */
}
.saoma{
    /* background-color: #fff; */
    height: 100%;
    width: 800px;
}
.saoma img{
height: 300px;
width: 300px; 
margin-left: 500px;                                                                                                                                                                                         
}
.right8{
    height: 300px;
    width: 500px;
    /* background-color: #54b664; */
    text-align: left;
    margin-left: 35px;
}
.right8 p:nth-of-type(1){
    font-size: 30px;
    font-weight: 400;
    color: white;
    margin-top: 80px;
}
.right8 p:nth-of-type(2){
    margin-top: 20px;
}
.right8 button{
    margin-top: 20px;
    /* border-top: 15px; */
    border-color: #66aedc;
    color: #8bcced;
}
/* 第八个网页 */
/* 第九个网页 */
.main9{
    width: 100%;
    height: 1000px;
}
.main9 img{
    width: 100%;
    height: 100%;
}
/* 第九个网页 */
图片展示