小鹅通首页开发

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html,
  body {
    width: 100%;
    height: 100%;
  }

  .header {
    width: 100%;
    height: 600px;
    /* background-color: #40898a;  */
  }

  .nav {
    background-color: transparent;
    height: 72px;
    display: flex;
    justify-content: center;
    transition: all .2s;
  }

  .nav:hover {
    background-color: #fff;
    transition: all .2s;
  }

  .content {
    width: 1200px;
    height: 72px;
    /* background-color: orange; */
    display: flex;
    justify-content: space-between;
  }

  ul {
    list-style: none;
  }

  .left {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .left a {
    color: #333;
    text-decoration: none;
  }

  .left a:hover {
    color: #4872f6;
  }

  .logo img {
    width: 110px;
    height: 35px;
  }

  .right {
    display: flex;
    gap: 35px;
    align-items: center;
    text-align: center;

  }

  .right li:nth-of-type(1) {
    cursor: pointer;
    color: #333;
  }

  .right li:nth-of-type(1):hover {
    color: #4872f6;

  }

  .right li:nth-of-type(2),
  .right li:nth-of-type(3) {
    width: 120px;
    height: 45px;
    border: solid 1px #4872f6;
    border-radius: 8px;
    text-align: center;
    line-height: 45px;
    color: #4872f6;
    background-color: #f2f2f1;
    transition: all 1s;
  }

  .right li:nth-of-type(2):hover {
    background-color: #4872f6;
    color: white;
  }

  .right li:nth-of-type(3) {
    background-color: #4872f6;
    color: white;
  }

  .right li:nth-of-type(3):hover {
    background-color: #6381e0;
    color: white;
  }

  .banner {
    width: 100%;
    /* height: 528px; */
    /* background-color: orange; */
    position: relative;
  }

  .banner img {
    height: 600px;
    position: absolute;
    top: -600px;
    left: -360px;
    z-index: -1;
  }

  /* 第2个部分nnnnnnnnnnnnnnnnnn */
  .chanpin {
    width: 100%;
    height: 993px;
    /* background-color: antiquewhite;  */
    background: linear-gradient(0deg, #fff, #e2e6f4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

  }

  .biaoti {
    font-size: 44px;
    font-weight: 600;
  }

  .tupian,
  .tupian img {
    width: 1440px;
    height: 620px;
    border-radius: 10px;
  }

  .jieshao {
    display: flex;
    gap: 30px;
  }

  .jieshao div {
    width: 460px;
    height: 220px;
    background-color: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 10px;
  }

  .jieshao div p a {
    text-decoration: none;
    color: #4872f6;
  }

  .jieshao div.active {
    border-top: solid 5px #4872f6;
  }

  .jieshao div.active h3 {
    font-size: 25px;
    font-family: "微软雅黑";
    font-weight: 500;
  }

  .jieshao div p {
    color: #888;
  }

  .jieshao div p a {
    text-decoration: none;
    color: #4872f6;
  }

  /* 我们的场景解决方案lllllllllllllll */
  .changjing {
    width: 100%;
    height: 900px;
    /* background-color:antiquewhite; */
    background: linear-gradient(0deg, #fff, #f2f3f7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .first {
    font-size: 44px;
    font-weight: 800;
  }

  .title {
    width: 1000px;
    height: 50px;
    border-radius: 25px;
    background-color: #fff;
    list-style: none;
    display: flex;
    justify-content: space-around;
  }

  .title li {
    width: 200px;
    height: 50px;
    /* 文本左右居中 */
    text-align: center;
    /* 文本在50px高度下居中 */
    line-height: 50px;
  }

  .title li.active {
    background-color: #4872f6;
    color: white;
    border-radius: 25px;
  }

  .intro {
    width: 1400px;
    height: 600px;
    border-radius: 10px;
    border: solid 2px #fff;
    /* 超出边框的部分隐藏起来，圆角 */
    overflow: hidden;
    display: flex;
  }

  .lf,
  .lf img {
    width: 700px;
    height: 600px;

  }

  .rt {
    width: 700px;
    height: 600px;
    /* background-color: orange; */
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }

  .rt h3 {
    font-size: 28px;

  }

  .rt h4 {
    font-size: 26px;
    font-weight: 400;
  }

  .rt p {
    color: #333;
    background-image: url(img\aixin.png);
    background-repeat: no-repeat;
  }

  .rt .btn {
    display: flex;
    gap: 30px;
  }

  .rt .btn div {
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
  }

  .rt .btn div:nth-of-type(1) {
    background-color: #4872f6;
    color: white;
  }

  /* 第4部分我们的行业解决方案lllllllllll */
  .hangye {
    width: 100%;
    height: 820px;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-image: url(./img/changjing2img.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

  }

  .tt h2 {
    font-size: 48px;
    font-weight: 600;
    color: #e2e6f4;
  }

  .huise {
    width: 1400px;
    height: 500px;
    /* background-color: rgb(214, 185, 71); */
    display: flex;
    border-radius: 10px;
  }

  .liebiao {
    width: 300px;
    height: 500px;
    background-color: rgba(42, 52, 64, 0.5);
  }

  ul {
    list-style: none;
  }

  .md {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 40px;
  }

  .md li {
    color: #e2e6f4;
    cursor: pointer;
    width: 200px;
    height: 70px;
    border-radius: 7px;
    transition: all .2s;
    text-align: center;
    line-height: 70px;
  }

  .md li:hover {
    color: #ebeff9;
    background-color: rgba(42, 52, 64, 0.5);
  }

  .mid {
    width: 700px;
    height: 500px;
    background-color: #e2e6f4;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: rgba(29, 37, 47, 0.4);
    padding: 40px;
  }

  .mid h3 {
    font-size: 31px;
    font-weight: 500;
    color: #e2e6f4;
  }

  .mid h4 {
    font-weight: 490;
    color: #e2e6f4;
  }

  .know {
    display: flex;
    flex-direction: column;
    gap: 25px;
    background-color: rgba(29, 37, 47, 0.4);
    color: white;
  }

  .kn {

    display: flex;
    gap: 25px;
    text-align: center;
    line-height: 76px;
  }

  .kn li {
    width: 76px;
    height: 76px;
    border: solid 1px #888;
    border-radius: 3px;
    font-size: 14px;
  }

  .hb {
    display: flex;
    gap: 25px;
    text-align: center;
    line-height: 76px;

  }

  .hb li {
    width: 76px;
    height: 76px;
    border: solid 1px #888;
    border-radius: 3px;
    font-size: 14px;

  }

  .know .btns {
    display: flex;
    gap: 20px;
  }

  .know .btns div {
    width: 100px;
    height: 38px;
    border: solid 1px #4872f6;
    border-radius: 5px;
    text-align: center;
    line-height: 38px;
    color: #4872f6;
    cursor: pointer;
  }

  .know .btns div:nth-of-type(1) {
    background-color: #4872f6;
    color: white;
  }

  .know .btns div:nth-of-type(1):hover {
    background-color: #6381e0;
    color: white;
  }

  .anlie {
    width: 400px;
    /* height:500 px; */
    /* background-color: orange; */
    font-size: 23px;
    padding: 60px;
    background-color: rgba(29, 37, 47, 0.3)；
  }

  .anlie h3 {
    color: #e2e6f4;
    font-size: 23px;
    font-weight: 20px;
  }

  /* 第5部分 */
  .jishu {
    width: 100%;
    height: 900px;
    /* 
       */
    background-color: rgb(245, 247, 250);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
  }

  .pct {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    width: 1400px;
    height: 400px;


  }

  .ys {
    font-size: 30px;
  }

  .wendin {
    background-image: url(./img/wendinimg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;


  }

  .wendin,
  .wendin img {
    width: 600px;
    height: 400px;
    border-radius: 10px;
  }

  .shoji {
    background-image: url(./img/shoji.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .shoji,
  .shoji img {
    width: 500px;
    height: 400px;
    border-radius: 10px;
  }

  .part3 {
    background-image: url(./img/part3img.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .part3,
  .part3 img {
    width: 500px;
    height: 400px;
    border-radius: 10px;
  }

  /*第6部分我们的运营服务lllllllllllllllllll*/
  .yunying {
    width: 100%;
    height: 810px;
    /* background-color: antiquewhite; */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .fuwu {
    font-size: 30px;
    height: 300px;
    text-align: center;
    line-height: 300px;
  }

  .totol {
    width: 1800px;
    height: 510px;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 30px;
  }

  .part1 {
    width: 800px;
    height: 500px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
  }

  .part1 img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    border-radius: 10px;
  }

  .part1:hover img {
    transform: scale(1.2);
  }

  .guanjia {
    width: 800px;
    height: 500px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
  }

  .guanjia img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    border-radius: 10px;
  }

  .guanjia:hover img {
    transform: scale(1.2);
  }

  .dake {
    width: 800px;
    height: 500px;
    overflow: hidden;
    position: relative;
    margin: 50px auto;
  }

  .dake img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    border-radius: 10px;
  }

  .dake:hover img {
    transform: scale(1.2);
  }

  /* 高度不受我控制呜呜呜呜呜呜呜呜呜呜呜呜55555555 */
  /* .final {
      width: 900px;
      height: 500px;
      overflow: hidden;
     } */
  /* 555555555555555555555555 */
  .them {
    font-size: 40px;
    font-weight: 510;
    height: 300px;
    line-height: 200px;
  }

  .image-container {
    /* width: 60px; 
      /* height: 60px;  */
    width: 160px;
    height: 110px;
    margin: 50px auto;
    /* 居中显示 */
    /* border: 2px solid #ccc; 可选：添加边框以便更清楚地看到容器边界 */
  }

  .image-container img {
    width: 100%;
    /* 图片宽度占满容器 */
    height: auto;
    /* 图片高度自动调整 */
    transition: opacity 0.1s ease;
    /* 添加平滑过渡效果 */
  }

  .gets {
    width: 100%;
    height: 1200px;
    /* background-color: antiquewhite; */
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .get {
    width: 1400px;
    height: 900px;
    /* background-color: chocolate; */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ads {
    width: 1200px;
    height: 400px;
    /* background-color: #6381e0; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #second {
    width: 380px;
    height: 320px;
    border-radius: 10px;

  }

  .image-container {
    width: 1200px;
    height: 400px;
    /* background-color: #cc68ae; */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-self: center;

  }

  #switchable-image {
    width: 160px;
    height: 110px;
    border-radius: 10px;

  }

  .shang {
    display: flex;
    justify-content: space-around;
  }

  .xia {
    display: flex;
    justify-content: space-around;
  }

  .gets {
    background-image: url(./img/pinpai.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  /* end部分啦啦啦啦啦啦啦啦啦啦啦啦啦 */
  button{
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}
button:hover{
    background-color: #357abd;
    color: #fff;
}
.under {
    height: 299px;
    width: 100%;
  background-size: cover;
}
.under-content{
    /* min-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 40px 0; */
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  
    align-items: center;
}
.ttls {
   font-size: 33px;
   color: #e2e6f4;
   width: 1400px;
   height: 100px;
   text-align: center;
   line-height:100px ;
  
}
/* .text-box{
  width: 1400px;
  height: 300px;
} */
 .info{
  display: flex;
  
  justify-content: center;
  align-items: center;
  gap: 20px;
 }
.under-content .info{
    display: flex;
    justify-content: center;
    align-items: center;
}
.info-img{
    margin-right: 25px;
    padding: 5px;
    border-radius: 2.5px;
    background: #fff;
}
.info-img img{
    height: 130px;
    width: 130px;
    object-fit: cover;
}
.info .text-box .text{
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0.6px;
    margin-bottom: 5px;
}
.text-box .text-b{
    color: #fff;
    font-family: PingFang SC;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0.6px;
    margin-bottom: 17px;
}
.text-box .button{
    display: flex;
    width: 100px;
    height: 30px;
    justify-content: center;
    align-items: center;
    border-radius: 2.5px;
    background: #fff;
    color: #1472ff;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    letter-spacing:0.6px;
    cursor: pointer;
}
.footer {
    height: 763px;
    width: 100%;
    position: relative;
    background: #161e30;
    z-index: 4;
}
.footer-content{
    max-width: 1440px;
    margin: 0 auto;
    padding-bottom: 64px;
    box-sizing: border-box;
}
.footer-title{
    padding-bottom: 46px;
    display: flex;
    justify-content: space-between;
    padding-top: 64px;
}
.footer-column{
    text-align: left;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Segoe UI, Helvetica Neue, PingFang SC, Noto Sans, Noto Sans CJK SC, Microsoft YaHei, 微软雅黑, sans-serif;
    text-rendering: optimizelegibility;
}
.footer-column h3{
    color: #fff;
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 24px;
    height: 24px;
}
.footer-column li{
    line-height: 22px;
    height: 22px;
    margin: 0 0 16px;
    font-size: 14px;
    color:hsla(0, 0%, 100%, 0.557);
}
.footer-contact{
    text-align: left;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Segoe UI, Helvetica Neue, PingFang SC, Noto Sans, Noto Sans CJK SC, Microsoft YaHei, 微软雅黑, sans-serif;
    text-rendering: optimizelegibility;
}
/* .footer-contact .title{
    font-size: 30px;
    color: #fff;
    margin-bottom: 11px;
    height: 30px;
    font-weight: 500;
   
    line-height: 30px;
} */
 .ttl{
  font-size: 60px;
  height: 80px;
  font-weight: 100;
  color: #e2e6f4;
 }
.footer-contact p{
    font-size: 12px;
    color:hsla(0, 0%, 100%, 0.557);
    opacity: .6;
    margin-bottom: 42px;
}
.footer-contact .qr{
    display: flex;
    text-align: center;
    font-size: 0;
}
.gzh{
    margin-right: 39px;
}
.gzh img{
  width: 110px;
  height: 110px;
}
.cysq img{
    width: 110px;
    height: 110px;
}
.bottom .content{
    line-height: 29px;
    margin-right: 32px;
}
.bottom{
    display: flex;
    flex-direction: row;
    color: hsla(0, 0%, 100%, 0.557);
}
.friend{
    display: -webkit-flex;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-bottom: 19px;
    line-height: 20px;
    padding: 7px 0 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, .6);
    border-top: 1px solid rgba(255, 255, 255, .4);
    border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.friend p{
    margin-left: 24px;
    color: rgba(255, 255, 255, .6);
}
.footer-content .message{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.message .left .table{
    text-overflow: clip;
    max-height: 21px;
    width: 500px;
    margin-bottom: 10px;
    overflow: hidden;
    color: #f0f0f0;
}
.message .left{
    display: flex;
}
.message .left img{
    width: 34px;
    height: 15px;
    margin-top: 3px;
    margin-right: 6px;
}
.message p{
    font-size: 12px;
    color: #fff;
    opacity: 0.5;
}
.message .right{
    font-size: 12px;
    display: flex;
    flex-direction: row;
}
.message .right-1{
    color: #fff;
    display: flex;
    align-items: center;
    margin: 0 15px;
}
.message .right-1 img {
    vertical-align: middle;
    margin-right: 5px;
}
 .footer-content .message .right p {
    font-size: 12px;
    color: #fff;
    opacity: 0.5;
}
.message .right-2 img {
    vertical-align: middle;
    margin-right: 5px;
}
.message .right-2{
    color: #fff;
    display: flex;
    align-items: center;
    margin: 0 20px;
}
.foot-under-1{
    display: flex;
    justify-content: space-between;
    height: 18px;
    min-height: 18px;
    line-height: 18px;
    font-size: 12px;
    color: #fff;
    opacity: .3;
}
.foot-under-2{
    display: flex;
    gap: 10px;
    line-height: 18px;
    font-size: 12px;
    color: #fff;
    opacity: .3;
}
.foot-under-2 p:nth-of-type(2){
    padding-left: 20px;
    box-sizing: border-box;
}
.foot-under-1 .u-content{
    display: flex;
    align-items: center;
}
 .foot-under-1 .u-content p {
    display: inline-block;
    color: #fff;
    margin: 0 10px;
}
</style>

<body>
  <div class="bg header">
    <div class="nav">
      <div class="content">
        <ul class="left">
          <li class="logo"><img src="img\xiaoeton.png" alt=""></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>
          <li><a href="#">关于我们</a></li>
          <li><a href="#">我是学员</a></li>
        </ul>
      </div>
      <ul class="right">
        <li>我是学员</li>
        <li>商家登录</li>
        <li>免费试用</li>
      </ul>
    </div>
  </div>
  <div class="banner">
    <img src="img\headerimg2.png" alt="">
  </div>
  </div>
  <!--我们的产品能力部分-->
  <div class="bg chanpin">
    <div class="biaoti">我们的产品能力</div>
    <div class="tupian">
      <img src="img\chanpinimg.png" alt="">
    </div>
    <!-- 介绍列表 -->
    <div class="jieshao">
      <div class="active">
        <h3>知识店铺</h3>
        <p>1分钟搭建您的知识商城<br>助力高效知识变现</p>
        <p><a href="#">免费试用 &rightarrow;</a></p>
      </div>
      <div>
        <h3>私域直播</h3>
        <p>企业级专属私域直播平台<br>实现私域流量高效运营</p>
        <p><a href="#">免费试用 &rightarrow;</a></p>
      </div>
      <div>
        <h3>企微SCRM</h3>
        <p>企业微信私域运营神器<br>数据洞察驱动业绩增长</p>
        <p><a href="#">免费试用 &rightarrow;</a></p>
      </div>
    </div>
  </div>
  <!-- 我们的场景解决方案llllllllllllll-->
  <div class="changjing">
    <div class="first">我们的场景解决方案</div>
    <ul class="title">
      <li class="active">公域获客</li>
      <li>私域运营</li>
      <li>直播带货</li>
      <li>内容交付</li>
      <li>数据化运营</li>
    </ul>
    <div class="intro">
      <div class="lf"><img src="img\changjingimg.png" alt=""></div>
      <div class="rt">
        <h3>数据化运营</h3>
        <h4>全链路数据分析，洞悉经营每一步</h4>
        <p>公域广告效果精准归因，无缝连接公域私域数据生态</p>
        <p>直播实时大屏，实时监测直播效果，实时调整运营策略</p>
        <p>商品交易漏斗全追踪，精准制定销售策略，提升商品售卖效率</p>
        <p>精准洞察用户学情，轻松掌握每位学员在各类课程中的到课率、学习进度及完成情况</p>
        <div class="btn">
          <div>免费试用</div>
          <div>了解详情</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 我们的行业解决方案lllllllllllllllll-->
  <div class="hangye">
    <div class="tt">
      <h2>我们的行业解决方案</h2>
    </div>
    <div class="huise">
      <div class="liebiao">
        <ul class="md">
          <li a="l">新零售门店</li>
          <li a="l">职业培训</li>
          <li a="l">知识付费</li>
          <li a="l">美业直播</li>
        </ul>
      </div>
      <div class="mid">
        <h3>新零售门店解决方案</h3>
        <h4>私域直播带货+ 推广门店体系，助力商家私域流量高效变现</h4>
        <div class="know">
          <ul class="kn">
            <li>知识店铺</li>
            <li>在线商城</li>
            <li>门店管理</li>
            <li>门店核销</li>
            <li>渠道活码</li>
          </ul>
          <ul class="hb">
            <li>直播红包</li>
            <li>直播抽奖</li>
            <li>邀请达人榜</li>
            <li>商品秒杀</li>
          </ul>
          <div class="btns">
            <div>免费试用</div>
            <div>了解详情</div>
          </div>
        </div>
      </div>
      <div class="anlie">
        <h3>行业案例</h3>
      </div>
    </div>
  </div>
  <!-- 第5部分lllllllllllllllll -->
  <div class="jishu">
    <div class="ys">
      <h2>我们的技术优势</h2>
    </div>
    <div class="pct">
      <div class="wendin"><img src="img\wendinimg.png" alt="">
        <h2>超稳定</h2>
        <p>多云负载均衡/全球CDN加速</p>
      </div>
      <div class="shoji"><img src="img\shoji.png" alt="">
        <h2>高并发</h2>
        <p>支持多用户同时在线</p>
      </div>
      <div class="part3"><img src="img\part3img.png" alt="">
        <h2>超流畅</h2>
        <p>观看端自动探测并自动跨云线路切换</p>
      </div>
    </div>
  </div>
  <!-- 第6部分我们的运营服务lllllllllllllllllll -->
  <div class="yunying">
    <div class="fuwu">
      <h2>我们的运营服务</h2>
    </div>
    <div class="totol">
      <div class="part1"><img src="img\part1.png" alt="">

        <h2><br>社群服务</h2>
        <p>标杆商家分享，同行商家交流，总比别人快一步</p>
      </div>

      <div class="guanjia"><img src="img\guanjia.png" alt="">
        <h2><br>管家服务</h2>
        <p>标杆商家分享，同行商家交流，总比别人快一步</p>
      </div>
      <div class="dake"><img src="img\dake.png" alt="">
        <h2><br>大客服务</h2>
        <p>设置夜班服务管家/假期值班管家,24小时在线服务,服务从不掉线</p>
      </div>
      <!-- <div class="final"><img src="img\final.png" alt="">
           <h2><br>运维服务</h2>
           <p>需求24小时反馈，需求处理率<br>1v1回复</p>
     </div> -->
    </div>
  </div>
  <div class="gets">
    <div class="get">
      <div class="them">他们都在用小鹅通 </div>
      <div class="ads">
        <img id="second" src="img\xximg.png" alt="">
        <img id="second" src="img\liuren.png" alt="">
        <img id="second" src="img\zhibo.png" alt="">
      </div>
      <div class="image-container">
        <div class="shang"> <img id="switchable-image" src="img2\1.png" alt="">
          <img id="switchable-image" src="img2\2img.png" alt="">
          <img id="switchable-image" src="img2\3img.png" alt="">
          <img id="switchable-image" src="img2\4img.png" alt="">
          <img id="switchable-image" src="img2\5img.png" alt="">
          <img id="switchable-image" src="img2\6img.png" alt="">
        </div>
        <div class="xia">
          <img id="switchable-image" src="img2\7img.png" alt="">
          <img id="switchable-image" src="img2\8img.png" alt="">
          <img id="switchable-image" src="img2\img9.png" alt="">
          <img id="switchable-image" src="img2\im10.png" alt="">
          <img id="switchable-image" src="img2\11img.png" alt="">
          <img id="switchable-image" src="img2\12img.png" alt="">
        </div>

      </div>
    </div>
  </div>
  <script>
    // 获取图片元素
    const image = document.getElementById('switchable-image');

    // 定义鼠标悬停时的事件处理函数
    const handleHover = () => {
      // 设置定时器，在3秒后切换图片
      setTimeout(() => {
        // 切换到第二张图片
        image.src = './img2/mao2.png';
      }, 500); // 3000毫秒（3秒）后切换
    };

    // 定义鼠标移出时的事件处理函数
    const handleMouseOut = () => {
      // 切换回第一张图片
      image.src = './img2/1.png';
    };

    // 绑定鼠标悬停和移出事件
    image.addEventListener('mouseover', handleHover);
    image.addEventListener('mouseout', handleMouseOut);
  </script>
    <div class="under" style="background: url(./img/PC端-扫码\ 2.png);">
      <div class="under-content">
          <div class="ttls"><h3>立即扫码咨询，领取您的专属解决方案</h3></div>
          <div class="info">
              <div class="info-img"><img src="./img/xiaoeton1.png" alt=""></div>
              <div class="text-box">
                  <div class="text">扫码添加客户经理</div>
                  <div class="text-b">或者您也可以先</div>
                  <div class="button">免费试用</div>
              </div>
          </div>
      </div>
  </div>
  <div class="footer">
      <div class="footer-content">
          <div class="footer-title">
      <div class="footer-column">
          <h3>场景</h3>
          <ul>
              <li>全域获客</li>
              <li>私域运营</li>
              <li>直播带货</li>
              <li>内容交付</li>
              <li>数据化运营</li>
              <li>企业内训</li>
          </ul>
      </div>
      <div class="footer-column">
          <h3>行业</h3>
          <ul>
              <li>零售电商</li>
              <li>职业培训</li>
              <li>知识付费</li>
              <li>企业培训</li>
              <li>美业直播</li>
              <li>企业培训</li>
              <li>社团团购</li>
              <li>营销会务</li>
          </ul>
      </div>
      <div class="footer-column">
          <h3>产品</h3>
          <ul>
              <li>知识店铺</li>
              <li>私域直播</li>
              <li>企微SCRM</li>
              <li>企学院</li>
              <li>智能投放</li>
              <li>海外eLink</li>
              <li>小鹅云</li>
          </ul>
      </div>
      <div class="footer-column">
          <h3>服务</h3>
          <ul>
              <li>小鹅创社区</li>
              <li>本地社群</li>
              <li>小鹅通课堂</li>
              <li>小鹅通直播</li>
              <li>对话解析</li>
          </ul>
      </div>
      <div class="footer-column">
          <h3>关于我们</h3>
          <ul>
              <li>公司简介</li>
              <li>加入我们</li>
              <li>媒体报道</li>
              <li>更多资讯</li>
              <li>客户案例</li>
              <li>帮助中心</li>
          </ul>
      </div>
      <div class="footer-column">
          <h3>媒体报道</h3>
          <ul>
              <li> D轮融资1.2亿美元，小鹅通究竟在做什么？ </li>
              <li> 知识付费用户达5.27亿，内容创业的下半场风口在“服务” </li>
              <li> 知识工作者的终极梦想，可能是拥有一个“第二大脑” </li>
              <li> 小鹅通：让知识更有价值 </li>
              <li> 小鹅通联合艾瑞咨询发布《2023年中国私域运营洞察白皮书》 </li>
          </ul>
      </div>
      <div class="footer-contact">
          <div class="ttl">400-102-6665</div>
          <p>周一至周日 9:00-21:00</p>
          <div class="qr">
              <div class="gzh">
                  <img src="./img/xiaoeton1.png" alt="">
                  <p>关注小鹅通公众号</p>
              </div>
              <div class="cysq">
                  <img src="./img/xiaoeton2.png" alt="">
                  <p>进入小鹅创业社区</p>
              </div>
          </div>
      </div>
  </div>
  <div class="bottom">
      <ul class="content">
          <li> 深圳总部:深圳市南山区粤海街道科兴科学园D3栋7楼 </li>
          <li> 北京地址:北京市朝阳区朝外大街乙6号23层2301B-2307 </li>
          <li> 上海地址:中国(上海)自由贸易试验区世纪大道1500号1601-A室 </li>
      </ul>
      <ul class="content">
          <li> 商务合作:support@xiaoe-tech.com </li>
          <li> 渠道合作:partner@xiaoe-tech.com </li>
          <li> 投诉意见:xiaoeks@xiaoe-tech.com </li>
      </ul>
      <ul class="content">
          <li> 互联网违法和不良信息举报电话:0755-26409534 </li>
          <li>  互联网不良信息举报邮箱:xiaoeks@xiaoe-tech.com  </li>
          <li> 安全漏洞反馈邮箱:security@xiaoe-tech.com </li>
      </ul>
  </div>
  <div class="friend">
      <span>友情链接</span>
      <p>知识付费平台</p>
      <p>知识付费软件</p>
      <p>小鹅通企学院</p>
      <p>私域直播工具</p>
      <p>小鹅通APP</p>
      <p>小鹅创业社区</p>
      <p>小鹅通移动版</p>
      <p>小鹅通学员版</p>
  </div>
  <div class="message">
      <div class="left">
          <img src="./img/kuaibao.png" alt="">
          <div class="table">关于印发《粤港澳大湾区内地指定医疗机构非首次使用临床急需进口港澳药品医疗器械申报指南》的通知</div>
      </div>
      <p> 工商营业执照 </p>
      <div class="right">
          <div class="right-1">
              <img src="./img/guobao.png" alt="">
              <p>粤公网安备 44030502002037号</p>
          </div>
          <div class="right-2">
              <img src="./img/guoshang.png" alt="">
              <p>工商网监 电子标识</p>
          </div>
      </div>
  </div>
  <div class="foot-under-1">
      <div class="u-content">![[图片上传失败...(image-d2ae31-1742781536520)]
](https://upload-images.jianshu.io/upload_images/30319202-d764ae648ea283c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

          <div class="t"> Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved. </div>
          <p>粤ICP备15020529号-1</p>
      </div>
  </div>
  <div class="foot-under-2">
      <p> 互联网药品信息服务资格证书(粤)—经营性—2020—0589 </p>
      <p> 医疗器械网络交易服务第三方平台备案(粤)网械平台备字(2021)第00001号 </p>
  </div>
  </div>
</div>
</body>[图片上传失败...(image-a4d419-1742781654817)]![![[图片上传失败...(image-bfec5-1742781711723)]![![![![![8.png](https://upload-images.jianshu.io/upload_images/30319202-564f4a64fd198af0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30319202-6edcffb3133e5503.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30319202-18c230c146b779c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30319202-6dee54dea9dbeaa9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30319202-5c962d55e4a45461.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

](https://upload-images.jianshu.io/upload_images/30319202-cedc2f005d7974c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30319202-13e6c455434f19da.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



</html>![1.png](https://upload-images.jianshu.io/upload_images/30319202-cd399fc6456bc737.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • WEB小鹅通首页开发
    作业分析 本次使用html标签编写如下效果 代码实现 以下是css样式 个人总结 在html中对于部分网页效果的特...
    繪灮阅读 59评论 0赞 0
  • WEB小鹅通首页开发
    作业分析 本次使用html标签编写如下效果 代码实现 以下是css样式 个人总结 在html中对于部分网页效果的特...
    繪灮阅读 19评论 0赞 1
  • WEB 3 小鹅通首页开发模拟
    代码展示 公共样式 第一部分 css html 第二部分 css html 第三部分 css html 第四部分 ...
    _Liu_阅读 111评论 0赞 0
  • 小鹅通页面开发
    html代码
    z_e3bb阅读 60评论 0赞 0
  • 小鹅通网页模仿开发
    小鹅通网页模仿开发 小鹅通网页模仿开发 效果展示如下 为了方便编写网页，我将css弹性样式与主体代码分开编写 代码...
    寒酆落尘阅读 35评论 0赞 0