小鹅通网页模仿开发

小鹅通网页模仿开发

小鹅通网页模仿开发

效果展示如下


image.png

为了方便编写网页，我将css弹性样式与主体代码分开编写

代码展示如下

<!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">
    <style>

    </style>
</head>

<body>
    <div class="bg header">
        <div class="w-content">
            <div class="nav">
                <ul>

                    <li><img src="../images/xet.png" alt=""></li>
                    <li>首页</li>
                    <li>解决方案</li>
                    <li>产品服务</li>
                    <li>价格</li>
                    <li>活动</li>
                    <li>案例</li>
                    <li>渠道合作</li>
                    <li>下载与帮助</li>
                    <li>关于我们</li>
                </ul>
            </div>
            <div class="btns">
                <div>我是学员</div>
                <div>商家登录</div>
                <div>免费试用</div>
            </div>
        </div>
    </div>
    <div class="yesou">
        <div class="w-content">
            <img src="../images/yesou.webp" alt="">
        </div>
    </div>
    <div class="bg chanpin">
        <div class="content">
            <div class="title">我们的产品能力</div>
            <img src="../images/chanpin.png" alt="">
            <div class="end">
                <div class="left">
                    <h3>知识店铺</h3>
                    <p>1分钟搭建您的知识商城<br>
                        助力高效知识变现</p>
                    <div>试用免费→</div>
                </div>
                <div class="middle">
                    <h3>私域直播</h3>
                    <p>企业级考属私城直播平台<br>
                        实现私城会量高效运营</p>
                    <div>试用免费→</div>
                </div>
                <div class="-right">
                    <h3>企微SCRM</h3>
                    <p>城企业级考属私城直播平台企业微信私域运营神器<br>
                        数据洞察驱动业绩增长</p>
                    <div>试用免费→</div>
                </div>
            </div>
        </div>
    </div>
    <div class="bg changjin">
        <div class="content">
            <div class="title">我们的场景解决方案</div>
            <div class="daohang">
                <ul>
                    <li class="active">公域获客</li>
                    <li>私域运营</li>
                    <li>直播带货</li>
                    <li>内容交付</li>
                    <li>数据化运营</li>
                </ul>
            </div>
            <div class="intro">
                <!-- 左侧图片 -->
                <div class="left">
                    <img src="../images/changjin.png " alt="">
                </div>
                <!-- 右侧内容 -->
                <div class="right">
                    <h3>公域获客</h3>
                    <h4>
                        多渠道获客，沉淀私域流量池
                    </h4>
                    <p>
                        打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速
                        开启知识变现
                    </p>
                    <p>
                        多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到
                        私域流量池
                    </p>
                    <p>
                        丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景,提升广告ROI
                    </p>
                    <div class="btns">
                        <div>免费试用</div>
                        <div>了解详情</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="bg hangye">
            <div class="content">
                <div class="title">我们的行业解决方案 </div>
                <div class="form">
                    <div class="directory">
                        <div>新零售门店</div>
                        <div>职业培训</div>
                        <div>知识付费</div>
                        <div>美业直播</div>
                    </div>
                    <div class="main">
                        <div class="p">新零售门店解决方案</div>
                        <div class="m">私域直播带货+ 推广门店体系，助力商家私域流量高效变现</div>

                        <div class="features">
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M21 3H3v18h18V3zm-2 16H5V5h14v14zM8.5 15h2v2h-2zm0-4h2v2h-2zm0-4h2v2h-2zm6 8h2v2h-2zm0-4h2v2h-2zm0-4h2v2h-2z"/>
                                </svg>
                                <span class="feature-title">直播带货</span>
                            </div>
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
                                </svg>
                                <span class="feature-title">在线商城</span>
                            </div>
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10z"/>
                                </svg>
                                <span class="feature-title">门店管理</span>
                            </div>
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/>
                                </svg>
                                <span class="feature-title">门店核销</span>
                            </div>
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/>
                                </svg>
                                <span class="feature-title">渠道活码</span>
                            </div>
                        </div>
                
                        <div class="sub-features">
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/>
                                </svg>
                                <span class="feature-title">直播红包</span>
                            </div>
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76l1-1.36 1 1.36L15.38 12 17 10.83 14.92 8H20v6z"/>
                                </svg>
                                <span class="feature-title">直播抽奖</span>
                            </div>
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm0 4c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm6 12H6v-1.4c0-2 4-3.1 6-3.1s6 1.1 6 3.1V19z"/>
                                </svg>
                                <span class="feature-title">邀请达人榜</span>
                            </div>
                            <div class="feature-card">
                                <svg class="feature-icon" viewBox="0 0 24 24">
                                    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                                </svg>
                                <span class="feature-title">商品秒杀</span>
                            </div>
                        </div>
                
                        <div class="buttons">
                            <a href="#" class="button primary-button">免费试用</a>
                            <a href="#" class="button secondary-button">了解详情</a>
                        </div>

                        
                    </div>
                    <div class="example">
                        <div class="f">行业案例</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg jishu">
            <div class="content">

                <div class="l-container">
                    <div class="header">
                        <h1 class="title">我们的技术优势</h1>
                    </div>

                    <div class="k-advantages">
                        <div class="w-advantage-card">
                            <img src="../images/jishu1.webp" alt="超稳定" class="advantage-image">
                            <div class="advantage-content">
                                <h3 class="advantage-title">超稳定</h3>
                                <div class="advantage-desc">
                                    多云负载均衡/全球CDN加速
                                </div>
                            </div>
                        </div>

                        <div class="w-advantage-card">
                            <img src="../images/jishu2.webp" alt="高并发" class="advantage-image">
                            <div class="advantage-content">
                                <h3 class="advantage-title">高并发</h3>
                                <div class="advantage-desc">
                                    支持多用户同时在线
                                </div>
                            </div>
                        </div>

                        <div class="w-advantage-card">
                            <img src="../images/技术3.webp" alt="超流畅" class="advantage-image">
                            <div class="advantage-content">
                                <h3 class="advantage-title">超流畅</h3>
                                <div class="advantage-desc">
                                    观看端自动探测并自动跨云线路切换
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="bg yinyun">
            <div class="w-content">
                <div class="m-container">
                    <div class="header">
                        <h1 class="title">我们的运营服务</h1>
                    </div>

                    <div class="services">
                        <div class="service-card">
                            <img src="../images/服务_本地社群.png" alt="社群服务" class="service-image">
                            <div class="service-content">
                                <h3 class="service-title">社群服务</h3>
                                <p class="service-desc">标杆商家分享，同行商家交流，总比别人快一步</p>
                            </div>
                        </div>

                        <div class="service-card">
                            <img src="../images/摄图网_501221054_商务女士打电话（企业商用）@3x.png" alt="管家服务" class="service-image">
                            <div class="service-content">
                                <h3 class="service-title">管家服务</h3>
                                <p class="service-desc">客户经理、服务管家、多角色在群，服务全面包围</p>
                            </div>
                        </div>

                        <div class="service-card">
                            <img src="../images/大客服务.png" alt="大客服务" class="service-image">
                            <div class="service-content">
                                <h3 class="service-title">大客服务</h3>
                                <p class="service-desc">设置客服服务管家/假期值班管家，24小时在线服务，服务从不掉线</p>
                            </div>
                        </div>

                        <div class="service-card">
                            <img src="../images/运维服务.png" alt="运维服务" class="service-image">
                            <div class="service-content">
                                <h3 class="service-title">运维服务</h3>
                                <p class="service-desc">需求24小时反馈，需求处理1v1回复</p>
                            </div>
                        </div>
                    </div>

                    <div class="nav-buttons">
                        <div class="nav-button">
                            <svg viewBox="0 0 24 24">
                                <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
                            </svg>
                        </div>
                        <div class="nav-button">
                            <svg viewBox="0 0 24 24">
                                <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
                            </svg>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="bg xiaoetong">
            <div class="w-content">
                <div class="w-container">
                    <div class="header">
                        <div class="title">他们都在用小鹅通</div>
                        <div class="subtitle">(*排名不分先后顺序)</div>
                    </div>

                    <div class="showcase">
                        <div class="case-card">
                            <img src="../images/111.webp" alt="小熊熊" class="case-logo">
                            <h3 class="case-title">小能熊科学学习</h3>
                            <p class="case-desc">小能熊科学学习以科学化为使命，专注提供学习方法和自我管理解决方案。陪伴严禁、懒小、永不妥协的学生学习者！</p>
                        </div>
                        <div class="case-card">
                            <img src="../images/222.webp" alt="鸟" class="case-logo">
                            <h3 class="case-title">刘润-进化的力量</h3>
                            <p class="case-desc">
                                刘润，润米咨询创始人，"5分钟商学院"课程主理人，著名商业顾问，曾为海尔、中远、恒基、百度等企业提供战略咨询服务。每年10月举办"进化的力量"年度演讲，为创业者企业家提供年度级别的参考方向。一起...
                            </p>
                        </div>
                        <div class="case-card">
                            <img src="../images/333.webp" alt="佰君" class="case-logo">
                            <h3 class="case-title">佰君易直播间</h3>
                            <p class="case-desc">佰君易直播间，由投资过10万项目管理师的工匠航师打造，为各行业提供项目管理实战培训。佰君易直播间与小鹅商学院合作，帮助昭晓小伙伴提高赋能
                            </p>
                        </div>
                    </div>

                    <div class="small-cases">
                        <div class="small-card">
                            <img src="../images/商家logo1.png" alt="轻松玩mac" class="small-logo">
                            <div class="small-title">轻松玩mac</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-1.png" alt="刘鑫工作室" class="small-logo">
                            <div class="small-title">刘鑫工作室MBAPPAcc</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-2.png" alt="清语注考" class="small-logo">
                            <div class="small-title">清语注考</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-3.png" alt="兔妈创业" class="small-logo">
                            <div class="small-title">兔妈文案创业学堂</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-4.png" alt="冷艺" class="small-logo">
                            <div class="small-title">冷艺时尚圈</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-5.png" alt="童心汉SEL" class="small-logo">
                            <div class="small-title">童心汉SEL社会与情绪学习</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-6.png" alt="刘丨龙PPT" class="small-logo">
                            <div class="small-title">刘丨龙PPT服务号</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-7.png" alt="森源" class="small-logo">
                            <div class="small-title">森源演讲训练营</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-8.png" alt="3HFit" class="small-logo">
                            <div class="small-title">3HFit能量站</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-9.png" alt="猫师" class="small-logo">
                            <div class="small-title">猫师气味云课堂</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-10.png" alt="联合会" class="small-logo">
                            <div class="small-title">联合会讲堂</div>
                        </div>
                        <div class="small-card">
                            <img src="../images/商家logo1-11.png" alt="群智" class="small-logo">
                            <div class="small-title">群智企业教练</div>
                        </div>
                    </div>

                    <a href="#" class="more-btn">查看更多案例 ></a>
                </div>
            </div>
        </div>
        <div class="bg saoma">
            <div class="w-content">
                <div class="container">
                    <h1 class="title">立即扫码咨询，领取您的专属解决方案</h1>
                    <div class="qr-section">
                        <div class="qr-code">
                            <img src="../images/二维码.webp" alt="扫码添加客户经理">
                        </div>
                        <div class="qr-info">
                            <div class="qr-text">
                                扫码添加客户经理
                                <span class="sub-text">或者您也可以先</span>
                                <a href="#" class="try-button">免费试用</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg footer">
            <div class="content">
                <footer class="footer">
                    <div class="footer-content">
                        <div class="top-section">
                            <div class="footer-nav">
                                <div class="nav-section">
                                    <h3>场景</h3>
                                    <a href="#">全域获客</a>
                                    <a href="#">私域运营</a>
                                    <a href="#">直播带货</a>
                                    <a href="#">内容变现</a>
                                    <a href="#">数据化运营</a>
                                    <a href="#">企业内训</a>
                                </div>
                                <div class="nav-section">
                                    <h3>行业</h3>
                                    <a href="#">零售电商</a>
                                    <a href="#">职业培训</a>
                                    <a href="#">知识付费</a>
                                    <a href="#">企业营销</a>
                                    <a href="#">美业直播</a>
                                    <a href="#">企业培训</a>
                                    <a href="#">社区团购</a>
                                    <a href="#">营销会务</a>
                                </div>
                                <div class="nav-section">
                                    <h3>产品</h3>
                                    <a href="#">知识店铺</a>
                                    <a href="#">私域直播</a>
                                    <a href="#">企微SCRM</a>
                                    <a href="#">企学院</a>
                                    <a href="#">智能投放</a>
                                    <a href="#">海外版 eLink</a>
                                    <a href="#">小鹅云</a>
                                </div>
                                <div class="nav-section">
                                    <h3>服务</h3>
                                    <a href="#">小鹅创业社区</a>
                                    <a href="#">本地社群</a>
                                    <a href="#">教统联盟</a>
                                    <a href="#">小鹅通训练营</a>
                                    <a href="#">对话标杆</a>
                                </div>
                                <div class="nav-section">
                                    <h3>关于我们</h3>
                                    <a href="#">公司简介</a>
                                    <a href="#">加入我们</a>
                                    <a href="#">媒体报道</a>
                                    <a href="#">更多资讯</a>
                                    <a href="#">客户案例</a>
                                    <a href="#">帮助中心</a>
                                </div>
                                <div class="nav-section media-section">
                                    <h3>媒体报道</h3>
                                    <a href="#">D轮融资1.2亿美元，小鹅通究竟在做什么？</a>
                                    <a href="#">知识付费用户达5.2亿，内容创业的下半场风</a>
                                    <a href="#">知识工作者的终极梦想，可能是拥有一个第二</a>
                                    <a href="#">小鹅通：让知识更有价值</a>
                                    <a href="#">小鹅通联合艾瑞咨询发布《2023年中国私域运...</a>
                                </div>
                            </div>

                            <div class="contact-section">
                                <div class="phone-info">
                                    <h2>400-102-6665</h2>
                                    <p>周一至周日 9:00-21:00</p>
                                </div>
                                <div class="qr-codes">
                                    <div class="qr-code">
                                        <img src="../images/页脚1.png" alt="关注小鹅通公众号">
                                        <p>关注小鹅通公众号</p>
                                    </div>
                                    <div class="qr-code">
                                        <img src="../images/小鹅创业社区-公众号二维码-20240102163357.jpg" alt="进入小鹅创业社区">
                                        <p>进入小鹅创业社区</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="company-info">
                            <div class="info-column">
                                <p>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</p>
                                <p>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</p>
                                <p>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</p>
                            </div>
                            <div class="info-column">
                                <p>商务合作：support@xiaoe-tech.com</p>
                                <p>渠道合作：partner@xiaoe-tech.com</p>
                                <p>投诉意见：xiaoeks@xiaoe-tech.com</p>
                            </div>
                            <div class="info-column">
                                <p>互联网违法和不良信息举报电话：0755-26409534</p>
                                <p>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</p>
                                <p>安全漏洞反馈邮箱：security@xiaoe-tech.com</p>
                            </div>
                        </div>

                        <div class="divider"></div>

                        <div class="quick-links">
                            <a href="#">友情链接</a>
                            <a href="#">知识付费软件</a>
                            <a href="#">知识付费平台</a>
                            <a href="#">小鹅通企学院</a>
                            <a href="#">私域直播工具</a>
                            <a href="#">小鹅通APP</a>
                            <a href="#">小鹅创业社区</a>
                            <a href="#">小鹅通经济版</a>
                            <a href="#">小鹅通学习版</a>
                        </div>

                        <div class="divider"></div>

                        <div class="footer-bottom">
                            <div class="copyright">
                                <span>Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved</span>
                                <span>粤ICP备15020529号-1</span>
                            </div>
                            <div class="licenses">
                                <span>互联网药品信息服务资格证书（粤）-经营性-2020—0589</span>
                                <span>医疗器械网络交易服务第三方平台备案（粤）网械平台备（2021）第00001号</span>
                            </div>
                            <div class="certifications">
                                <div class="cert-group">
                                    <span>工商营业执照</span>
                                </div>
                                <div class="cert-group">
                                    <img src="../images/gongan.png" alt="粤公网安备">
                                    <span>粤公网安备 44030502002037号</span>
                                </div>
                                <div class="cert-group">
                                    <img src="../images/公安2.png" alt="工商标识">
                                    <span>工商标识 用于标识</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
</body>

</html>

css弹性样式如下

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

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

    }

    .bg {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .nav {
        width: 2000px;
        height: 72px;
        display: flex;
        justify-content: space-between;
        position: sticky;
    }

    ul {
        width: 800px;
        height: 72px;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    li {
        cursor: pointer;
    }

    .nav li:hover {
        font-weight: 700;
        color: rgb(19, 84, 214);
    }

    li img {
        width: 120px;
        height: 36px;
    }

    .btns {
        width: 500px;
        height: 72px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }

    .btns div:nth-of-type(1):hover {
        color: #4872f6;
        font-weight: 600;
        cursor: pointer;
    }

    .btns div:nth-of-type(2),
    .btns div:nth-of-type(3) {
        width: 120px;
        height: 38px;
        border: solid 1px #4872f6;
        color: #4872f6;
        background-color: #fff;
        text-align: center;
        line-height: 38px;
        border-radius: 10px;
        font-weight: 300;
        font-size: 16px;
        cursor: pointer;
        transition: all .2s;
    }

    .btns div:nth-of-type(2):hover,
    .btns div:nth-of-type(3) {
        background-color: #4872f6;
        color: white;
        transition: all .2s;
    }

    .btns div:nth-of-type(3):hover {
        background-color: #7c9bff;
        color: white;
        transition: all .2s;
    }

    .w-content {
        width: 1700px;
    }

    .content {
        width: 1400px;
    }

    .header .w-content {
        height: 70px;
        display: flex;
        position: fixed;
        top: 0;
        background-color: rgb(255, 255, 255, 255);
        padding: 10px;
        transition: backgouround-color 0.5s ease;
    }

    .header .w-content:hover {
        background-color: white;
        transition: all .3s;
    }

    .yesou {
        display: flex;
        justify-content: center;
    }

    .yesou .w-content {
        height: 400px;
        width: 1700px;
    }

    .yesou .w-content img {
        height: 400px;
        width: 1700px;
    }

    .yesou .w-content img:hover {
        cursor: pointer;
    }

    .chanpin .content {
        height: 1000px;
        width: 1700px;
        background-color: rgb(242, 249, 255);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .chanpin .content .title {
        font-size: 38px;
        font-weight: 600;
    }

    .chanpin .content img {
        width: 1500pxpx;
        height: 500px;
    }

    .chanpin .content .end {
        display: flex;
        gap: 25px;
    }

    .chanpin .content .end .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        width: 400px;
        height: 200px;
        box-shadow: #4872f6 0px -4px 0px;
        background-color: #fff;
        border-radius: 10px;
    }

    .chanpin .content .end .left h3 {
        color: #4872f6;
    }

    .chanpin .content .end .left div {
        color: #4872f6;
    }

    .chanpin .content .end .middle div {
        color: #4872f6;
    }

    .chanpin .content .end .-right div {
        color: #4872f6;
    }


    .chanpin .content .end .middle {
        width: 400px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        box-shadow: white 0px -4px 0px;
        background-color: #fff;
        border-radius: 10px;
    }

    .chanpin .content .end .-right {
        width: 400px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        box-shadow: white 0px -4px 0px;
        background-color: #fff;
        border-radius: 10px;
    }

    .chanpin .content .end .left:hover {
        cursor: pointer;
    }

    .chanpin .content .end .middle:hover {
        cursor: pointer;
    }

    .chanpin .content .end .-right:hover {
        cursor: pointer;
    }

    .changjin .content {
        height: 1000px;
        background-color: rgb(247, 249, 252);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        width: 1700px;
    }

    .changjin .content .title {
        font-size: 38px;
        font-weight: 600;
    }

    .changjin .content .daohang {
        box-shadow: white;
        background-color: #fff;
        border-radius: 30px;
        width: 900px;
        height: 50px;
        display: flex;
        align-items: center;
    }

    .daohang li {
        text-align: center;
        width: 100px;
        height: 50px;
        line-height: 50px;
    }

    .daohang li.active {
        background-color: #4872f6;
        color: white;
        border-radius: 30px;
        width: 150px;
        height: 50px;
    }

    .changjin .content .intro {
        width: 1400px;
        height: 600px;
        border-radius: 10px;
        border: solid 2px #fff;
        overflow: hidden;
        background-color: #fff;
        display: flex;
    }

    .left img {
        width: 700px;
        height: 600px;
    }

    .right {
        width: 700px;
        height: 600px;
        padding: 80px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .right h3 {
        font-size: 28px;
    }

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

    .right p {
        color: gray;
        background-image: url(../images/biao.png);
        background-repeat: no-repeat;
        background-position: 0 center;
        padding-left: 30px;
    }

    .right .btns {
        display: flex;
        gap: 30px;
    }

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

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

    .hangye .content {
        background-image: url(../images/backgroud.png);
        background-size: 1700px 750px;
        width: 1700px;
        height: 750px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .hangye .content .title {
        color: white;
        padding-top: 50px;
    }

    .content .form {
        width: 1300px;
        height: 500px;
        background-color: rgba(32, 40, 49, 0.9);
        border-radius: 15px;
        display: flex;

    }

    .form .directory {
        width: 200px;
        height: 500px;
        background-color: #2b343f;
        border-radius: 15px 0 0 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 20px;
        color: white;
        gap: 20px;
        padding-top: 40px;
    }

    .form .directory:nth-of-type(1) :hover {
        background-color: #243c89;
        cursor: pointer;
        width: 150px;
        height: 40px;
        text-align: center;
    }


    .main .m {
        font-size: 15px;
        color: white;
    }





    .main .p {
        color: white;
        font-size: 30px;
    }

    .subtitle {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
        line-height: 1.6;
    }

    .features {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
        margin-bottom: 24px;
    }

    .feature-card {
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: all 0.3s ease;
    }

    .feature-card:hover {
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
    }

    .feature-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 12px;
        fill: #fff;
    }

    .feature-title {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
    }

    .sub-features {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 40px;
    }

    .buttons {
        display: flex;
        gap: 16px;
    }

    .button {
        padding: 12px 32px;
        border-radius: 4px;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .primary-button {
        background: #0052D9;
        color: #fff;
        border: none;
    }

    .primary-button:hover {
        background: #0047BE;
    }

    .secondary-button {
        background: transparent;
        color: #0052D9;
        border: 1px solid #0052D9;
    }

    .secondary-button:hover {
        background: rgba(0, 82, 217, 0.1);
    }

    .form .main {
        width: 800px;
        height: 600px;
        margin-top: 30px;
        flex-direction: column;

        gap: 10px;
    }

    .form .example {
        width: 300px;
        height: 500px;
        display: flex;
        padding-top: 50px;
    }

    .form .example .f {
        color: white;
        font-size: 20px;
        width: 400px;
        height: 400px;
        border-left: 1px solid white;
        padding-left: 50px;
    }

    .jishu .content {
        height: 500px;
        background: linear-gradient(135deg, #EEF4FF 0%, #FFFFFF 100%);
    }

    .l-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .l-container .header {
        text-align: center;
        margin-bottom: 60px;
    }

    .l-container .header .title {
        font-size: 40px;
        color: #1A1A1A;
        font-weight: 600;
        letter-spacing: 1px;
        margin-top: 60px;
    }

    .k-advantages {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .w-advantage-card {
        position: relative;
        border-radius: 16px;
        aspect-ratio: 16/9;
    }

    .w-advantage-card img {
        border-radius: 16px;
        width: 100%;
        height: 100%;
    }

    .advantage-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 32px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

    }

    .advantage-title {
        font-size: 28px;
        color: #fff;
        font-weight: 500;
        margin-bottom: 12px;
    }

    .advantage-desc {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        line-height: 1.6;
        display: flex;
        align-items: center;
        gap: 8px;
    }




    .yinyun .w-content {
        height: 700px;
        background: linear-gradient(135deg, #D8E8FF 0%, #FFFFFF 100%);

        padding: 60px 0;
    }

    .m-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .m-container .header {
        text-align: center;
        margin-bottom: 60px;
    }

    .m-container .title {
        font-size: 36px;
        color: #333;
        font-weight: 600;
    }

    .m-container .services {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;

    }

    .service-card {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .service-image {
        width: 100%;
        height: 200px;

    }

    .service-content {
        padding: 24px;
    }

    .service-title {
        font-size: 20px;
        color: #333;
        margin-bottom: 12px;
        font-weight: 500;
    }

    .service-desc {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
    }

    .nav-buttons {
        display: flex;
        gap: 16px;
        margin-top: 40px;
    }

    .nav-button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .nav-button:hover {
        background: #f5f5f5;
        transform: scale(1.1);
    }

    .nav-button svg {
        width: 20px;
        height: 20px;
        fill: #666;
    }


    .xiaoetong .w-content {
        height: 1100px;
        background: linear-gradient(135deg, #D8E8FF 0%, #FFFFFF 100%);
        min-height: 100vh;
        padding: 40px;
    }

    .w-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .w-container .header {
        text-align: center;
        margin-bottom: 40px;
    }

    .w-container .header .title {
        font-size: 40px;
        color: black;
        font-weight: bold;

    }

    .subtitle {
        font-size: 14px;
        color: #999;
    }

    .showcase {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 40px;
    }

    .case-card {
        background: #fff;
        border-radius: 8px;
        padding: 32px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    .case-logo {
        width: 80px;
        height: 80px;
        margin-bottom: 24px;
    }

    .case-title {
        font-size: 18px;
        color: #333;
        margin-bottom: 12px;
        font-weight: 500;
    }

    .case-desc {
        font-size: 14px;
        color: #666;
        line-height: 1.6;
    }

    .small-cases {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
        margin-bottom: 24px;
    }

    .small-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .small-logo {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
    }

    .small-title {
        font-size: 13px;
        color: #666;
    }

    .more-btn {
        display: block;
        width: 160px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        margin: 40px auto 0;
        background: #fff;
        color: #4169E1;
        text-decoration: none;
        border-radius: 10px;
        font-size: 14px;
        box-shadow: 0 2px 8px rgba(65, 105, 225, 0.1);
        transition: all 0.3s ease;
    }

    .more-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(65, 105, 225, 0.2);
    }


    .saoma .w-content {
        height: 300px;
        background: linear-gradient(135deg, #4169E1 0%, #4B0082 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        overflow: hidden;
    }

    .xiaoetong .w-container .small-cases img {
        height: 50px;
        width: 150px;
    }

    .xiaoetong .w-container .showcase img {
        height: 150px;
        width: 325px;
    }

    .container {
        text-align: center;
        color: #fff;
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1200px;
        padding: 80px 20px;
    }

    .title {
        font-size: 36px;
        font-weight: normal;
        margin-bottom: 50px;
        letter-spacing: 2px;
        line-height: 1.4;
    }

    .qr-section {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

    .qr-code {
        width: 140px;
        height: 140px;

        padding: 8px;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
    }

    .qr-section .qr-code img {
        width: 140px;
        height: 140px;
    }

    .qr-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .qr-text {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .sub-text {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.7);
        display: block;
    }

    .try-button {
        display: inline-block;
        padding: 10px 32px;
        background: #fff;
        color: #4169E1;
        text-decoration: none;
        border-radius: 5px;
        font-size: 13px;
        transition: all 0.3s ease;
    }

    .try-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .footer .content {
        height: 760px;
        display: flex;
    }

    .footer {
        width: 1700px;
        background: #1a1f2e;
        color: #fff;
        padding: 40px 0 20px;
    }

    .footer-content {
        max-width: 1200px;
        margin: 0 auto;
    }

    .top-section {
        display: flex;
        justify-content: space-between;
        gap: 40px;
        padding: 0 20px;
    }

    .footer-nav {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 40px;
        flex: 1;
    }

    .nav-section h3 {
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        margin-bottom: 20px;
        text-align: left;
    }

    .nav-section a {
        display: block;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.65);
        text-decoration: none;
        margin-bottom: 12px;
        line-height: 1.5;
        text-align: left;
    }

    .nav-section a:hover {
        color: #fff;
    }

    .nav-section.media-section a {
        white-space: normal;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    .contact-section {
        width: 300px;
        margin-top: 0;
        padding: 0;
    }

    .phone-info h2 {
        font-size: 24px;
        font-weight: normal;
        color: #fff;
        margin-bottom: 4px;
        text-align: left;
    }

    .phone-info p {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.65);
        text-align: left;
    }

    .qr-codes {
        display: flex;
        gap: 40px;
        margin-top: 30px;
    }

    .qr-code {
        text-align: left;
    }

    .qr-code img {
        width: 100px;
        height: 100px;
        padding: 4px;
        background: #fff;
        border-radius: 2px;
        margin-bottom: 8px;
    }

    .qr-code p {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.65);
        text-align: left;
    }

    .divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.08);
        margin: 24px 20px;
    }

    .company-info {
        display: grid;
        grid-template-columns: 1fr 1fr 1.2fr;
        gap: 60px;
        padding: 0 20px;
        margin-top: 60px;
    }

    .info-column {
        text-align: left;
    }

    .info-column p {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        line-height: 2;
        margin-bottom: 4px;
        text-align: left;
    }

    .quick-links {
        padding: 16px 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px 24px;
        text-align: left;
    }

    .quick-links a {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        text-decoration: none;
        line-height: 2;
    }

    .quick-links a:hover {
        color: #fff;
    }

    .footer-bottom {
        padding: 16px 20px 0;
    }

    .copyright,
    .licenses {
        margin-bottom: 12px;
        text-align: left;
    }

    .copyright span,
    .licenses span {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        margin-right: 24px;
        line-height: 2;
        display: inline-block;
        text-align: left;
    }

    .certifications {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 16px;
        text-align: left;
    }

    .certifications img {
        height: 16px;
        opacity: 0.6;
        vertical-align: middle;
    }

    .certifications span {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.45);
        vertical-align: middle;
    }

    .nav-section:last-child {
        min-width: 240px;
    }



    .cert-group {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .cert-group img {
        margin-right: 4px;
    }

    @media screen and (max-width: 1200px) {
        .footer-content {
            margin: 0;
        }

总结：

整个网页十分复杂，但如果拆分成多个小部分的话，还是能够实现的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Flutter WebAssembly 2025-03-21 周五
    简介 将现有项目编译为web或者webAssembly都有问题。 如果通过减法修改现有项目，难度太大，改动太多，还...
    松哥888阅读 56评论 0赞 0
  • 2025-03-21
    我的Python文件操作学习之旅 初次接触Python的 open 函数时，只觉一头雾水。我虽知晓它用于文件操作，...
    单焱坤阅读 42评论 0赞 1
  • 2025-03-21
    第二章 羊水防线 宫缩疼痛像《民法典》第一千零三十四条般精准袭来时，林默正用《劳动法》手册垫住转椅滑轮——羊水在地...
    GAOY123阅读 16评论 0赞 0
  • 2025-03-21从穿衣到出行，硬皮病患者生活细节注意事项！
    硬皮病是一种以皮肤及各系统胶原纤维硬化为特征的结缔组织疾病，患者在日常生活中的许多方面都需要特别注意。 以下从穿衣...
    蓝色森林cl阅读 32评论 0赞 0
  • 2025-03-21
    脑血管：大脑的生命之河脑血管是指分布于颅内的血管网络，负责为大脑输送氧气和营养物质，并清除代谢废物。作为人体最精密...
    ffft阅读 28评论 0赞 0