小鹅通页面开发

html代码

<!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">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="header">
    <div class="nav">
        <div class="content">
        <ul class="left">
            <li class="logo"><img src="./images/a3b86f327b734fdd893693ca09ea5c5.jpg" alt="" srcset=""></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>
        <ul class="right">
            <li>我是学员</li>
            <li>商家登录</li>
            <li>免费试用</li>
        </ul>
     </div>
    </div>
    <div class="banner">
        <img src="./images/m7u4g4b306vw.webp" alt="">
    </div>
    
    <div class="chanping">
        <div class="s1">我们的产品能力</div>
        <img src="./images/{17E66C85-82AE-4DD4-82EC-9D542A19BC0A}.png" alt="">
        <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="#">免费试用 &r                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  ightarrow;</a></p>
            </div>
        </div>
    </div>
    <div class="bg">
        <div class="neirong">
        <div class="title">我们的场景解决方案</div>
        <ul class="fangan">
            <li class="b-active">公域获客</li>
            <li>私域运营</li>
            <li>直播带货</li>
            <li>内容交付</li>
            <li>数字化运营</li>
        </ul>
        <div class="intro">
            <div class="b-left">

            <img src="./images/{510A00B7-6D8D-4D46-BA17-3019BCA4AFAB}.png" alt="">

        </div>

        <div class="b-right">

            <h3>公域获客</h3>

            <h4>

                多渠道获客，沉淀私域流量池

            </h4>

            <p>

                打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现

            </p>

            <p>

                多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池

            </p>

            <p>

                丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI

            </p>

            <div class="b-btns">

                <div>免费试用</div>

                <div>了解详情</div>

            </div>

        </div>

    </div>

</div>

</div>

<div class="c-bg">

<div class="c-content">

    <div class="c-title">我们的行业解决方案</div>

    <div class="jiejuefangan"><img src="./images/{47119BA2-FEE6-492F-AB2F-3E4EAA5A35FE}.png" alt=""></div>

</div>

</div>

<div class="d-bg">

<div class="d-content">

    <div class="d-title">我们的技术优势</div>

    <div class="jishuyoushi"><img src="./images/{E332E2BA-434B-47DA-8747-B7DC5A2BC2A6}.png" alt=""></div>

</div>

</div>

<div class="yunying">

<div class="e-content">

    <div>

        <h1>我们的运营服务</h1>

    </div>

    <div class="four">

        <div class="item"><img src="./images/服务_本地社群 (1).png" alt="">

            <div>

                <h3>社群服务</h3>

                <p>标杆商家分享，同行商家交流，总比别人快一步</p>

            </div>

        </div>

        <div class="item"><img src="./images/摄图网_501221054_商务女士打电话（企业商用）@3x.png" alt="">

            <div>

                <h3>管家服务</h3>

                <p>客户经理、服务管家、多角色在群，服务全面包围</p>

            </div>

        </div>

        <div class="item"><img src="./images/大客服务.png" alt="">

            <h3>大客服务</h3>

            <p>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</p>

        </div>

        <div class="item"><img src="./images/运维服务.png" alt="">

            <h3>运维服务</h3>

            <p>需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</p>

        </div>

    </div>
</div>
<div class="f-bg">
    <div class="f-title">

        <h3>他们都在用小鹅通</h3>                                                      

    </div>

    <div class="f-content">

        <img src="./images/{6286EB96-FA5C-407A-B0F7-223972076EF2}.png" alt="">

        <div class="anniu">

            <div class="anli">查看更多案例</div>

        </div>

    </div>

</div>

<div class="g-content">
<div class="p1"><img  src="./images/{EF88E4BD-BA68-4D94-B583-F00606328973}.png"></div>

  <div class="p2"> <img  src="./images/{8ED0A13C-F080-46D8-B82D-AA50C04AE9F3}.png" alt=""></div>
    </div>
</div>
</body>
</html>
css代码
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.header{
    width: 100%;
    height: 600px;
   /*background-color: aquamarine;*/
}
.nav{
    background-color: transparent;
    height: 72px;
    display: flex;
    justify-content: center;
    translate: .2s;
}
.nav:hover{
    background-color: #fff;
}
.content{
    width: 1800px;
    height: 72px;
    /*background-color: orange;*/
    display: flex;
    justify-content: space-between;
}
ul{
    list-style: none;
}
.left{
    display: flex;
    align-items: center;
    gap: 30px;
}
.left a{
    color: #333;
    text-decoration: none;
}
.left a:hover{
    color: #4872f6;
 }
 .right{
    display: flex;
    gap: 30px;
    align-items: 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){
    cursor: pointer;
    width: 200px;
    height: 45px;
    border: solid 1px #4872f6;
    border-radius: 8px;
    text-align: center;
    line-height: 45px;
    color: #4872f6;
    background-color: #fff;
 }
.right li:nth-of-type(2):hover{
        background-color: #4872f6;
        color:white;
        transition: all .2s;
    }
    .right li:nth-of-type(3){
        background-color: #4872f6;
        color: #fff;
    }
    .right li:nth-of-type(3):hover{
        background-color: #4872f6;
        color: #fff;         
    }

.logo img{
    width: 120px;
    height: 36px;
 }
 .banner{
    width: 100%;
    height: 700px;
   /*background-color: orange;*/
    position: relative;
 }
 .banner img{
    height: 100%;
    position: absolute;
    top: -72px;
    left: -200px;
    z-index: -1;
 }
 .chanping{
    width: 100%;
    height: 1130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
 }
    .chanping img{
        height: 650px;
        width: 75%;

    }
    .jieshao{
        display: flex;
        gap: 30px;
    }
.s1{
    font-size: 44px;
    text-align: center;
    font-weight: 600;
}
.jieshao div{
    border-radius: 10px;
    padding: 30px;
    width: 600px;
    height: 220px;
   /* background-color: orange;*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}
.jieshao div h3{
    font-size: 40px;
    font-weight:500 ;
}
.jieshao div p a{
    text-decoration: none;
    color: #4872f6;
}
.jieshao div P{
    color: #888;
}
.jieshao div.active{
    border-top: solid 5px #4872f6;
}
.jieshao div.active h3{
    color: #4872f6;
}
.bg{
    width: 100%;
    height: 1000px;
    /*background-color: antiquewhite;*/
    display: flex;
    justify-content: center;
}
.neirong{
    width: 1400px;
    height: 100%;
    /*background-color: aqua;*/
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;
}
.title {
    font-size: 38px;

    font-weight: 600;

}

.fangan {
    width: 850px;

    height: 50px;

    border-radius: 25px;

    background-color: #fff;

    list-style: none;

    display: flex;

    justify-content: space-between;

}

.fangan li {
    width: 130px;

    height: 50px;

    text-align: center;

    line-height: 50px;

}

.fangan li.b-active {
    background-color: #4872f6;

    color: white;

    border-radius: 25px;

}

.intro {
    display: flex;

    width: 1400px;

    height: 100%;

    overflow: hidden;

    justify-content: center;

}

.b-left img {
    width: 700px;

    height: 600px;

    background-color: #fff;

}

.b-right {
    width: 700px;

    height: 600px;

    padding: 80px;

    display: flex;

    flex-direction: column;

    justify-content: space-around;

}
.b-right h3{
    font-size: 50px;
}
.b-right h4{
    font-size: 30px;
}
.b-right.p{
    font-size: 30px;
}
.b-right .b-btns {
    display: flex;

    gap: 30px;

}

.b-right .b-btns div {
    width: 100px;

    height: 38px;

    border: solid 1px #4872f6;

    border-radius: 5px;

    text-align: center;

    line-height: 38px;

    color: #4872f6;

    cursor: pointer;

}

.c-bg {
    display: flex;

    width: 100%;

    height: 800px;

    justify-content: center;

    background: linear-gradient(90deg, #f2fefe, #e2e2f1);

}

.c-content {
    width: 1600px;

    height: 800px;

    display: flex;

    flex-direction: column;

    align-items: center;

    /*background-color: darkblue;*/

    justify-content: space-around;

}

.c-title {
    font-size: 38px;

    font-weight: 600;

}

.jiejuefangan img {
    width: 1300px;

    height: 500px;

}

.d-bg {
    width: 100%;

    height: 400px;

    justify-content: center;

    display: flex;

}

.d-content {
    width: 750px;

    height: 400px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-evenly;

}

.d-title {
    font-size: 50px;

    font-weight: 600;

}

.jishuyoushi img {
    width: 1000px;

    height: 300px;

}

.yunying {
    width: 100%;

    height: 500px;

    justify-content: center;

}

.e-content {
    width: 100%;

    height:500px;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.four {
    width: 1000px;

    height: 500px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.item {
    width: 100%;

    height: 100%;

    padding: 10px 10px;

}

.item img {
    width: 200px;

    height: 100px;

}

.f-bg {
    width: 100%;
    height: 1000px;
    /*background: #7690e8;*/
    display: flex;
    flex-direction: column;
justify-content: space-evenly;
}

.f-title {
    padding: 10px 0;
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 30px;
}

.f-content {
    width: 100%;
    height: 860px;
    display: flex;
    flex-direction: column;
    
}

.f-content img {
    width: 100%;
    height: 800px
}
.anniu {
    background-color: white;
    width: 100%;
    height: 60px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}

.anli {
    color: #4872f6;
    line-height: 2rem;
    width: 120px;
    justify-content: space-evenly;
    text-align: center;
    border: solid 1px rgb(58, 152, 229);
}

.anli:hover {
    color: blue;
    background-color: blue;
}

.g-content {
    width: 100%;
    height: 1800px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /*background-color: #4872f6;*/
}
.p1{
    width: 100%;
    height:100px
}
.p2{
    width: 100%;
    height: 900px;
}
公共系统样式
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
    width: 100%;
    height: 100%;
}
![![![![{662C2935-7387-44DD-92D2-38405212C4EA}.png](https://upload-images.jianshu.io/upload_images/30318844-25e707c4ce26bb3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30318844-09701cd006e91569.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30318844-c489607f9add65f5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
](https://upload-images.jianshu.io/upload_images/30318844-d01387c70bd9e7a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容