Web第二次作业_补充完小鹅通首页（静态）

题目

index

css

style

解题

技术优势

html

css

运营服务

html

css

小鹅通

html

css

咨询

html

css

友情链接、公司信息

html

css

效果展示

技术优势

运营服务

小鹅通

咨询

友情链接、公司信息

题目

index

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹅通-首页</title>
    <!-- 引入页面样式 -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>


    <!-- 页头banner图 -->
    <div class="bg header">
        <!-- 页头导航 -->
        <div class="nav">
            <div class="content">
                <!-- 左侧菜单 -->
                <div class="nav-menus">
                    <div class="logo"></div>
                    <ul>
                        <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>
                <!-- 右侧登录 -->
                <div class="nav-login">
                    <div>我是学员</div>
                    <div>商家登录</div>
                    <div>免费试用</div>
                </div>
            </div>
        </div>
        <!-- banner图 -->
        <div class="banner"></div>
    </div>

    <!-- 产品介绍 -->
    <div class="bg intro">
        <h1>我们的产品能力</h1>
        <img src="./images/m3moa2m10v5k.webp" alt="">
        <div class="info">
            <div>
                <h3 class="title active">知识店铺</h3>
                <p>1分钟搭建您的知识商城<br>
                    助力高效知识变现</p>
                <a href="#">免费试用  &rightarrow;</a>
            </div>
            <div>
                <h3 class="title">私域直播</h3>
                <p>企业级专属私域直播平台<br>
                    实现私域流量高效运营</p>
                <a href="#">免费试用  &rightarrow;</a>
            </div>
            <div>
                <h3 class="title">企微SCRM</h3>
                <p>企业微信私域运营神器<br>
                    数据洞察驱动业绩增长</p>
                <a href="#">免费试用  &rightarrow;</a>
            </div>
        </div>
    </div>

    <!-- sence -->
    <div class="bg sence">
        <h1>我们的场景解决方案</h1>
        <ul class="list">
            <li>公域获客</li>
            <li>私域运营</li>
            <li>直播带货</li>
            <li>内容交付</li>
            <li>数据化运营</li>
        </ul>
        <div class="info">
            <img src="./images/m10c72vn0zzo.webp" alt="">
            <div class="msg">
                <h2>公域获客</h2>
                <h3>多渠道获客，沉淀私域流量池</h3>
                <ul>
                    <li>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</li>
                    <li>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</li>
                    <li>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</li>
                </ul>
                <div class="btns">
                    <div>免费试用</div>
                    <div>了解详情</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 行业解决方案 -->
    <div class="bg industry">
        <h1>我们的行业解决方案</h1>
        <div class="box">
            <div class="b-left">
                <p class="active">
                    <img src="./images/m0z15s580ei2.webp" alt="">
                    <span>新零售门店</span>
                </p>
                <p>
                    <img src="./images/m0z15s560wz6.webp" alt="">
                    <span>职业培训</span>
                </p>
                <p>
                    <img src="./images/m0z15tx30tif.webp" alt="">
                    <span>知识付费</span>
                </p>
                <p>
                    <img src="./images/m2bmj0r30gtx.webp" alt="">
                    <span>美业直播</span>
                </p>
                
            </div>
            <div class="b-center">
                <h2>新零售门店解决方案</h2>
                <p>私域直播带货+推广门店体系，助力大健康商家私域流量高效变现</p>
                <div class="items">
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                    <div class="item-box">
                        <img src="./images/m0z15s560wz6.webp" alt="">
                        <span>直播带货</span>
                    </div>
                </div>
                <div class="btns">
                    <div>免费试用</div>
                    <div>了解详情</div>
                </div>
            </div>
            <div class="b-right">
                <h3>行业案例</h3>
                <div class="item-box">
                    <img src="./images/m1n7u98h0aet.webp" alt="">
                    <img src="./images/m1n7u98h0aet.webp" alt="">
                    <img src="./images/m1n7u98h0aet.webp" alt="">
                    <img src="./images/m1n7u98h0aet.webp" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 技术优势 -->
    <div class="bg tech"></div>

    <!-- 运营服务 -->
    <div class="bg service"></div>

    <!-- 小鹅通 -->
    <div class="bg xiaoet"></div>

    <!-- 咨询 -->
    <div class="bg advisory"></div>

    <!-- 友情链接、公司信息 -->
    <div class="bg message"></div>
</body>

</html>

css

.bg{
    width:100%;
}

.header{
    background-image: url(../images/m28mek5n0yyx.webp);
    background-size:cover;
    background-position:center;
}

.nav{
    height: 72px;
    /* background-color:aqua; */
    background-color:transparent;
    display:flex;
    justify-content: center;
    transition: .2s all;
}
.nav:hover{
    background-color:white;
    /* css3样式：过渡动画，让样式过渡持续指定时间 */
    transition: .2s all;
}

.nav .content{
    width:1600px;
    /* background-color:antiquewhite; */

    display: flex;
    justify-content: space-between;
}
.logo{
    height:72px;
    width:120px;
    background-image:url(../images/logo.png);
    background-size: 115px 35px;
    background-repeat: no-repeat;
    background-position: 0 20px;
}
.nav-menus{
    width:900px;
    display:flex;
    justify-content: space-between;
}
.nav-menus ul{
    list-style:none;
    display:flex;
}
.nav-menus li{
    line-height: 72px;
    padding: 0 15px;
}
.nav-menus li a{
    color:#333;
    text-decoration: none;
    cursor:pointer;
}
.nav-menus li a:hover{
    color:blue;
}

.nav-login{
    display:flex;
    align-items: center;
    gap:20px;
}
.nav-login div:nth-of-type(2),
.nav-login div:nth-of-type(3),
.btns div:nth-of-type(1),
.btns div:nth-of-type(2){
    transition: .2s all;
    cursor:pointer;
    width:100px;
    height:40px;
    line-height: 40px;
    text-align:center;
    border:solid 1px #4872f6;
    border-radius:5px;
    background-color:white;
    color:#4872f6;
}
.btns div:nth-of-type(1),
.btns div:nth-of-type(2):hover,
.nav-login div:nth-of-type(3),
.nav-login div:nth-of-type(2):hover{
    color:white;
    background-color:#4872f6;
    transition: .2s all;
}
.info .msg .btns div:nth-of-type(1):hover,
.nav-login div:nth-of-type(3):hover{
    background-color:#819cf8;
    transition: .2s all;
}

.banner{
    height:454px;
    /* background-color:bisque; */
}
.intro{
    padding: 90px;
    height:995px;
    background-color:#f5faff;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.industry h1,
.intro h1,
.sence h1{
    font-size:42px;
}
.intro img{
    width:1263px;
    height:490px;
}
.intro .info{
    width:1263px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.info > div{
    width: 407px;
    height: 194px;
    background-color:white;
    border-radius:12px;
    padding:28px;

    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.info .title{
    color:#333;
    font-size:26px;
    font-weight: 400;
}
.intro .info div:nth-of-type(1){
    border-top: solid 5px #4872f6;
}
.info .active{
    color:#4872f6;
}
.info p{
    color:gray;
}
.info a{
    color:#4872f6;
    text-decoration: none;
}

.sence{
    padding: 90px;
    height:885px;
    background: linear-gradient(120deg, #ffffff, #e6edf6);

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.sence .list{
    list-style:none;
    background-color:white;
    width:725px;
    height:42px;
    border-radius:21px;

    display:flex;
    justify-content: space-evenly;
}
.list li{
    height:42px;
    width:145px;
    border-radius:21px;
    text-align:center;
    line-height: 42px;
    font-size:14px;
    font-weight:400;
}
.list li:nth-of-type(1){
    background-color:#4872f6;
    color:white;
}
.sence .info{
    background-color:#f5f8fc;
    width:1263px;
    height:527px;
    display: flex;
    flex-direction: row;
    border-radius:12px;
    overflow:hidden;
    border:solid 5px white;
}
.sence .info img{
    width:650px;
    height:527px;
}
.sence .info .msg{
    width:100%;
    height:100%;
    padding: 50px;
}
.sence .msg h2{
    font-size:32px;
}
.sence .msg h3{
    font-size:26px;
    font-family: "黑体";
    font-weight:400;
}
.sence .msg ul{
    list-style:none;
    /* list-style-image: url(../images/ul.png); */
    /* list-style-position: inside; */
    color:gray;
    height:200px;
    /* background-color:#819cf8; */

    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.sence .msg ul li{
    background-image:url("../images/ul.png");
    background-repeat: no-repeat;
    background-position: 0 10px;
    padding-left:25px;
}
.btns{
    display:flex;
    gap: 20px;
}

.industry{
    height:732px;
    background-color:aquamarine;
    background-image:url(../images/m0w7ssdh01vr.png);
    background-size:cover;
    background-position:center;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.industry h1{
    color:white;
}
.industry .box{
    width: 1263px;
    height: 457px;
    background-color: rgba(33, 39, 47, 0.8);
    border-radius:12px;
    overflow:hidden;
    backdrop-filter: blue(5px);

    display:flex;
}
.box .b-left{
    width: 181px;
    height: 457px;
    background-color: #2e3646;
    padding:28px 21px;
}
.b-left{
    display:flex;
    flex-direction: column;
    gap:20px;
}
.b-left p{
    width:146px;
    height: 56px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.b-left p.active{
    background: linear-gradient(90deg, #3e59af, #2e3646);
}
.b-left img{
    width:20px;
    height:20px;
}
.b-left span{
    color:#fff;
}
.b-center{
    padding: 35px;
    color:white;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    font-size:13px;
}
.b-center h2{
    font-size:26px;
}
.b-center .items{
    width:600px;
    display:flex;
    gap:20px;
    flex-wrap: wrap;
}
.items .item-box{
    width:75px;
    height: 75px;
    border:solid 1px #666;
    border-radius:4px;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.items .item-box img{
    width:30px;
    height:30px;
}
.item .btns{
    height:150px;
}
.b-right{
    width:200px;
    height:100%;
    padding:50px;
}
.b-right h3{
    padding-left:10px;
    padding-bottom:50px;
    font-size:18px;
    font-weight:500;
    color:white;
}
.b-right .item-box{
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    width:200px;
}
.b-right .item-box img{
    width:83px;
    height: 83px;
}

.tech{
    height: 658px;
    background-color:blanchedalmond;
}
.service{
    height: 734px;
    background-color:aquamarine;
}
.xiaoet{
    height:1058px;
    background-color:bisque;
}
.advisory{
    height:264px;
    background-image:url(../images/m201jna00mof.png);
    background-size:cover;
    background-position:left;
}
.message{
    height:721px;
    background-color:black;
}

style

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body{
    width:100%;
    height:100%;
    font-family: "微软雅黑";
    font-size: 16px;
}

解题

技术优势

html

    <!-- 技术优势 -->
    <div class="bg tech">
        <h1>我们的技术优势</h1>
        <div class="tech-container">
            <div class="t-left">
                <!-- 对勾在HTML中的实体字符&check;或者&#10003; -->
                <h2>超稳定</h2>
                <span>&#10003;多云负载均衡/全球CDN加速</span>
            </div>
            <div class="t-middle">
                <h2>高并发</h2>
                <span>&#10003;支持多用户同时在线</span>
            </div>
            <div class="t-right">
                <h2>超流畅</h2>
                <span>&#10003;观看端自动探测并自动跨云线路切换</span>
            </div>
        </div>
    </div>

css

/* 技术优势 */
.tech{
    height: 658px;
    background-color: #F5F7FA;
    padding: 91px 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.tech h1 ,.service h1 ,
.xiaoet h1 ,.advisory h1{
    font-size: 42px;
}
.tech-container {
    width: 1263px;
    height: 373px;
    background-color: #F5F7FA;
    margin-top: 42px;

    display: flex;
    justify-content: space-between;
}
.t-left {
    width: 324px;
    /* background-color: gold; */
    /* 背景的复合属性：两个值被逗号分隔，它们会被叠加在一起。渐变会覆盖在背景图像之上 */
    /* 注：如果第一个值是背景图，则背景图像会在渐变之上显示（书写顺序有一定的优先级） */
    background: linear-gradient(to right ,#3F464C ,transparent) ,url(../images/tech1.png);
}
.t-middle {
    width: 587px;
    /* background-color: greenyellow; */
    /* 渐变中带着透明度可以使用rgba或者hsla来取颜色 */
    background: linear-gradient(to right ,rgba(1, 82, 217, 0.9) ,rgba(74, 144, 249, 0.8)) ,url(../images/tech2.png);
}
.t-right {
    width: 324px;
    /* background-color: saddlebrown; */
    background: linear-gradient(to right ,#3F464C ,transparent) ,url(../images/tech3.png);
}
.t-left ,.t-middle ,.t-right {
    border-radius: 8px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 46px;
    color: #F3F4F4;
}
.t-left h2 ,.t-middle h2 ,.t-right h2 {
    font-size: 34px;
    font-weight: 400;
} 
.t-left span ,.t-middle span ,.t-right span {
    margin-top: 28px;
}

运营服务

html

    <!-- 运营服务 -->
    <div class="bg service">
        <h1>我们的运营服务</h1>
        <div class="service-container">
            <div class="contain-box">
                <div class="contain-box1">
                    <img src="./images/服务运营1.png">
                    <h2>社群服务</h2>
                    <span>标杆商家分享，同行商家交流，总比别人快一步</span>
                </div>
                <div class="contain-box2">
                    <img src="./images/服务运营2.png">
                    <h2>管家服务</h2>
                    <span>客户经理、服务管家、多角色在群，服务全面包围</span>
                </div>
                <div class="contain-box3">
                    <img src="./images/服务运营3.png">
                    <h2>大客服务</h2>
                    <span>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</span>
                </div>
                <div class="contain-box4">
                    <img src="./images/服务运营4.png">
                    <h2>运维服务</h2>
                    <span>需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</span>
                </div>
            </div>
            <div class="contain-bnts">
                <!-- 大于号：&gt;和小于号：&lt; -->
                <!-- <div class="btn1">&lt;</div>
                <div class="btn2">&gt;</div> -->
                <div class="btn1">
                    <img src="./images/服务按钮1.png">
                </div>
                <div class="btn2">
                    <img src="./images/服务按钮2.png">
                </div>
            </div>
        </div>
    </div>

css

/* 运营服务 */
.service{
    height: 734px;
    background-color:#FAFAFA;
    
    padding: 91px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.service-container {
    height: 547px;
    width: 100%;
    /* background-color: seashell; */

    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.contain-box {
    /* width: 1684px; */
    height: 333px;
    /* background-color: violet; */
    margin-top: 60px;
    margin-left: 464px;

    display: flex;
}
.contain-box1 ,.contain-box2 ,
.contain-box3 ,.contain-box4 {
    width: 403px;
    height: 336px;
    /* background-color: seagreen; */
    margin-right: 28px;
}
.contain-box1 img ,.contain-box2 img ,
.contain-box3 img ,.contain-box4 img {
    width: 403px;
    height: 214px;
    border-radius: 6px;
}
.contain-box1 h2 ,.contain-box2 h2 ,
.contain-box3 h2 ,.contain-box4 h2 {
    margin-top: 20px;
    margin-bottom: 14px;
    color: #333333;
    font-size: 21px;
    font-weight: 350;
}
.contain-box1 span ,.contain-box2 span ,
.contain-box3 span ,.contain-box4 span {
    color: #666;
}
.contain-bnts {
    width: 1262px;
    height: 50px;
    /* background-color: lawngreen; */
    margin-top:60px;

    display: flex;
}
.btn1 ,.btn2{
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    /* color: #343434;
    font-size: 21px;
    font-weight: 550;
    line-height: 50px; */

    display: flex;
    justify-content: center;
    align-items: center;
}
.btn2 {
    margin-left: 24px;
}
.btn1 img ,.btn2 img {
    width: 21px;
    height: 21px;
}

小鹅通

html

    <!-- 小鹅通 -->
    <div class="bg xiaoet">
        <h1>他们都在用小鹅通</h1>
        <span>（排名不分先后顺序）</span>
        <div class="contain1">
            <div class="box-left">
                <div></div>
                <h2>小红书·种草学</h2>
                <span>小红书种草学是小红书官方营销学习平台，为不同行业、不同成长阶段的品牌和商家提供丰富多元的学习内容。小红书种草学与小鹅通深度合作，通过搭建培训平台让赋能客户变得更高效</span>
            </div>
            <div class="box-middle">
                <div></div>
                <h2>刘润·进化的力量</h2>
                <span>主要提供商业和管理相关知识传播并和为企业提供商业战略咨询服务。小鹅通为刘润打造了专属进化岛圈子，为刘润和用户提供了深度互动平台</span>
            </div>
            <div class="box-right">
                <div></div>
                <h2>博商大课堂</h2>
                <span>专注于为中小民营企业家提供管理培训/咨询辅导和资源互助等全生命周期服务，构筑横跨全球17座城市的教学网络，汇聚高校专家与实战导师帮助10万余企业家实现成长升华，并多次荣登中国最佳企管培训机构榜单前列</span>
            </div>
        </div>
        <div class="contain2">
            <!-- 走马灯效果 -->
            <div>
                <ul class="contain2-list1">
                    <li><img src="./images/row1.png"></li>
                    <li><img src="./images/row1.png"></li>
                    <li><img src="./images/row1.png"></li>
                </ul>
            </div>
            <div>
                <ul class="contain2-list2">
                    <li><img src="./images/row2.png"></li>
                    <li><img src="./images/row2.png"></li>
                    <li><img src="./images/row2.png"></li>
                </ul>
            </div>
            <div>
                <ul class="contain2-list3">
                    <li><img src="./images/row3.png"></li>
                    <li><img src="./images/row3.png"></li>
                    <li><img src="./images/row3.png"></li>
                    <li><img src="./images/row3.png"></li>
                </ul>
            </div>
        </div>
        <div class="contain3">
            <p>查看更多案例></p>
        </div>
    </div>

css

/* 小鹅通 */
.xiaoet{
    height:1054px;
    background-color: #FDFEFF;
    background-image: url(../images/xiaoetong-bg.png);
    background-repeat: no-repeat;
    padding: 91px 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.xiaoet span {
    margin-top: 14px;
    color: #666666;
    font-size: 18px;
}
.contain1 {
    width: 1263px;
    height: 373px;
    /* background-color: saddlebrown; */
    margin-top: 31px;

    display: flex;
}
.box-left ,.box-middle ,.box-right {
    width: 401px;
    background-color: white;
    margin-right: 30px;
    border-radius: 6px;
}
.box-left >div {
    width: 401px;
    height: 226px;
    background-image: linear-gradient(to bottom ,rgba(255, 255, 255, 0.1) ,rgba(246, 249, 253, 0.4)) ,url(../images/xiaoet_box_left.webp);
    background-size: cover;
    border-radius: 6px;
}
.box-middle >div {
    width: 401px;
    height: 226px;
    background-image: linear-gradient(to bottom ,rgba(255, 255, 255, 0.1) ,rgba(246, 249, 253, 0.4)) ,url(../images/xiaoet_box_middle.webp);
    background-size: cover;
    border-radius: 6px;
}
.box-right >div {
    width: 401px;
    height: 226px;
    background-image: linear-gradient(to bottom ,rgba(255, 255, 255, 0.1) ,rgba(246, 249, 253, 0.4)) ,url(../images/xiaoet_box_right.webp);
    background-size: cover;
    border-radius: 6px;
}
.box-left h2 ,.box-middle h2 ,.box-right h2 {
    padding: 14px 28px 0px;
    font-size:21px;
}
.box-left span ,.box-middle span ,.box-right span {
    padding: 10px 28px 0px;
    margin-top: 0px;
    font-size: 14px;

    display: flex;
}
.contain2 {
    height: 265px;
    width: 100%;
    /* background-color: darksalmon; */
    margin-top: 18px;
    
    display: flex;
    flex-direction: column;
}
.contain2 >div {
    width: 1682px;
    height: 88px;
    /* background-color: springgreen; */
    margin-top: 0px;
    flex-shrink: 0;
    overflow: hidden;
}
.contain2-list1 ,.contain2-list3 {
    width: 1682px;
    height: 88px;
    list-style: none;

    display: flex;
    animation: move 70s infinite linear reverse;
}
.contain2-list2 {
    width: 1682px;
    height: 88px;
    list-style: none;

    display: flex;
    animation: move 58s infinite linear reverse;
}
.contain2-list1 li ,.contain2-list2 li ,.contain2-list3 li {
    width: 1682px;
    height: 88px;
}
.contain2-list1 li img ,.contain2-list2 li img ,.contain2-list3 li img {
    width: 1682px;
    height: 88px;
}
@keyframes move {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(-3364px);
    }
}
.contain3 {
    width: 130px;
    height: 38px;
    /* background-color: seagreen; */
    margin-top: 70px;
    border: #1472FF 1px solid;
    color: #1472FF;
    /* 居中显示不使用弹性盒子了 */
    line-height: 38px;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
}

咨询

html

    <!-- 咨询 -->
    <div class="bg advisory">
        <h1>立即扫码咨询，领取您的专属解决方案</h1>
        <div class="contain">
            <div class="img">
                <img src="./images/advisory.webp">
            </div>
            <div class="advisory-info">
                <h2>扫码添加客户经理</h2>
                <p>或者您也可以先</p>
                <div>免费试用</div>
            </div>
        </div>
    </div>

css

/* 咨询 */
.advisory{
    height:264px;
    background-image:url(../images/m201jna00mof.png);
    background-size:cover;
    background-position:left;
    padding: 35px 0px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}
.advisory h1 {
    color: white;
    font-size: 35px;
}
.advisory .contain {
    width: 1263px;
    height: 193px;
    margin: 0px 210px;
    /* background-color: aquamarine; */

    display: flex;
    align-items: center;
    justify-content: center;
}
.img {
    width: 119px;
    height: 123px;
    background-color: white;
    margin-right: 25px;
    padding: 7px;
}
.img img {
    width: 106px;
    height: 106px;
}
.advisory-info {
    width: 175px;
    height: 115px;
    /* background-color: salmon; */
    margin-left: 10px;
    color: white;
}
.advisory-info h2 {
    font-size: 21px;
    font-weight: 400;
    margin-bottom: 7px;
}
.advisory-info p {
    font-size: 15px;
    margin-bottom: 22px;
}
.advisory-info >div {
    background-color: white;
    width: 141px;
    height: 42px;
    border-radius: 4px;
    color: #1F79FF;
    line-height: 42px;
    text-align: center;
}

友情链接、公司信息

html

    <!-- 友情链接、公司信息 -->
    <div class="bg message">
        <div class="message-info1">
            <dl>
                <dt>场景</dt>
                <dd>全域获客</dd>
                <dd>私域运营</dd>
                <dd>直播带货</dd>
                <dd>内容交付</dd>
                <dd>数据化运营</dd>
                <dd>企业内训</dd>
            </dl>
            <dl>
                <dt>行业</dt>
                <dd>零售电商</dd>
                <dd>职业培训</dd>
                <dd>知识付费</dd>
                <dd>企业营销</dd>
                <dd>美业直播</dd>
                <dd>企业培训</dd>
                <dd>社区团购</dd>
                <dd>营销会务</dd>
            </dl>
            <dl>
                <dt>产品</dt>
                <dd>知识店铺</dd>
                <dd>私域直播</dd>
                <dd>企微 SCRM</dd>
                <dd>企学院</dd>
                <dd>智能投放</dd>
                <dd>海外版 eLink</dd>
                <dd>小鹅云</dd>
            </dl>
            <dl>
                <dt>服务</dt>
                <dd>小鹅创业社区</dd>
                <dd>本地社群</dd>
                <dd>教练联盟</dd>
                <dd>小鹅通训练营</dd>
                <dd>对话标杆</dd>
            </dl>
            <dl>
                <dt>关于我们</dt>
                <dd>公司简介</dd>
                <dd>加入我们</dd>
                <dd>媒体报道</dd>
                <dd>更多资讯</dd>
                <dd>客户案例</dd>
                <dd>帮助中心</dd>
            </dl>
            <dl>
                <dt>媒体报道</dt>
                <dd>D轮融资1.2亿美元，小鹅通究竟在做什么？</dd>
                <dd>知识付费用户达5.27亿，内容创业的下半场风口在“服务”</dd>
                <dd>知识工作者的终极梦想，可能是拥有一个“第二大脑”</dd>
                <dd>小鹅通：让知识更有价值</dd>
                <dd>小鹅通联合艾瑞咨询发布《2023年中国私域运营》</dd>
            </dl>
            <div class="contact">
                <h2>400-102-6665</h2>
                <p>周一至周日 9:00-21:00</p>
                <div class="contact-img">
                    <div class="left">
                        <img src="./images/message1.png">
                        <p>关注小鹅通公众号</p>
                    </div>
                    <div class="right">
                        <img src="./images/message2.jpg">
                        <p>进入小鹅创业社区</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="message-info2">
            <ul>
                <li>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</li>
                <li>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</li>
                <li>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</li>
            </ul>
            <ul>
                <li>商务合作：support@xiaoe-tech.com</li>
                <li>渠道合作：partner@xiaoe-tech.com</li>
                <li>投诉意见：xiaoeks@xiaoe-tech.com</li>
            </ul>
            <ul>
                <li>互联网违法和不良信息举报电话：0755-26409534</li>
                <li>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</li>
                <li>安全漏洞反馈邮箱：security@xiaoe-tech.com</li>
            </ul>
        </div>
        <div class="message-info3">
            <span>友情链接</span>
            <span>知识付费软件</span>
            <span>知识付费平台</span>
            <span>小鹅通企学院</span>
            <span>私域直播工具</span>
            <span>小鹅通APP</span>
            <span>小鹅创业社区</span>
            <span>小鹅通移动版</span>
            <span>小鹅通学员版</span>
        </div>
        <div class="message-info4">
            <div class="info4-up">
                <div class="left">
                    <img src="./images/message3.png">
                    <p>《医疗器械经营监督管理办法》解读</p>
                </div>
                <div class="middle">
                    <p>工商营业执照</p>
                </div>
                <div class="right">
                    <div class="right1">
                        <img src="./images/message4.png">
                        <p>粤公网安备 44030502002037号</p>
                    </div>
                    <div class="right2">
                        <img src="./images/message5.png">
                        <p>工商网监 电子标识</p>
                    </div>
                </div>
            </div>
            <div class="info4-down">
                <p>Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved.&nbsp;&nbsp;&nbsp;&nbsp;粤ICP备15020529号-1</p>
                <p>互联网药品信息服务资格证书（粤）—经营性—2020—0589&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号</p>
            </div>
        </div>
    </div>

css

/* 友情链接、公司信息 */
.message{
    height:759px;
    background-color:#161E30;
    padding: 64px 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.message-info1 {
    width: 1440px;
    height: 352px;
    /* background-color: seagreen; */
    margin-bottom: 46px;

    display: flex;
    justify-content: space-between;
}
.message-info1 dl:nth-child(1) {
    width: 70px;
}
.message-info1 dl:nth-child(2) {
    width: 56px;
}
.message-info1 dl:nth-child(3) {
    width: 78px;
}
.message-info1 dl:nth-child(4) {
    width: 84px;
}
.message-info1 dl:nth-child(5) {
    width: 64px;
}
.message-info1 dl:nth-child(6) {
    width: 300px;
}
dt {
    margin-bottom: 24px;
    color: white;
    height: 24px;
}
dd {
    margin-bottom: 16px;
    color: #9EA1A9;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact {
    width: 259px;
    height: 352px;
    /* background-color: seashell; */
    color: #E8E9EB;
}
.contact h2 {
    margin-bottom: 11px;
    font-size: 28px;
    font-weight: 400;
}
.contact p {
    color: #9A9EA6;
    font-size: 12px;
    margin-bottom: 42px;
}
.contact-img {
    width: 259px;
    height: 163px;

    display: flex;
    justify-content: space-between;
}
.contact-img .left img ,.contact-img .right img {
    width: 110px;
    height: 110px;
}
.message-info2 {
    width: 1440px;
    height: 87px;
    /* background-color: goldenrod; */

    display: flex;
    color: #9A9EA6;
}
.message-info2 ul {
    margin-right: 32px;
}
.message-info2 ul:nth-child(1) {
    width: 420px;
}
.message-info2 ul:nth-child(2) {
    width: 240px;
}
.message-info2 ul:nth-child(3) {
    width: 350px;
}
.message-info2 li {
    list-style: none;
    font-size: 14px;
    height: 29px;
    line-height: 29px;
} 
.message-info3 {
    width: 1440px;
    height: 36px;
    margin: 24px 0;
    padding: 7px 0;
    /* background-color: skyblue; */
    color: #9A9EA6;
    border-top: 1px #9A9EA6 solid;
    border-bottom: 1px #9A9EA6 solid;

    display: flex;
    align-items: center;
}
.message-info3 span {
    margin-right: 24px;
    width: 72px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}
.message-info4 {
    width: 1440px;
    height: 67px;
    /* background-color: chartreuse; */
    
    display: flex;
    flex-direction: column;
}
.info4-up {
    /* background-color: sandybrown; */
    height: 31px;
    font-size: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info4-up .left {
    width: 540px;
    height: 31px;
    color: #D0D2D6;
    font-size: 14px;
    
    display: flex;
}
.info4-up .left img {
    width: 34px;
    height: 15px;
    margin: 3px 3px 0 0;
}
.info4-up .middle {
    width: 72px;
    color: #9A9EA6;
}
.info4-up .right {
    width: 393px;
    height: 31px;
    color: #595E6B;
    
    display: flex;
    
}
.info4-up .right .right1 {
    width: 200px;
    margin: 0 20px;
    
    display: flex;
    align-items: center;
    opacity: 0.7;
}
.info4-up .right .right2 {
    width: 122px;
    margin: 0 20px;
    
    display: flex;
    align-items: center;
    opacity: 0.7;
}
.info4-up .right .right1 img {
    width: 20px;
    height: 20px;
}
.info4-up .right .right2 img {
    width: 18px;
    height: 24px;
}
.info4-down {
    flex: 1;
    /* background-color: salmon; */
    font-size: 12px;
    color: #595E6B;
}