小鹅通作业

盛瑾.
于 2025-03-24 17:01:52 发布
阅读量237
点赞数 2
文章标签： css 前端 css3
本文链接：https://blog.youkuaiyun.com/2403_88079353/article/details/146480639
版权
<!DOCTYPE html>
<html lang="zh">

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

        body {
            font-family: "微软雅黑", sans-serif;
            overflow-x: hidden;
        }

        /* 导航栏样式 */
        .header {
            width: 100%;
            height: 600px;
            position: relative;
        }

        .nav {
            background-color: transparent;
            height: 72px;
            transition: all .2s;
            display: flex;
            justify-content: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }

        .nav:hover {
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .content {
            width: 90%;
            max-width: 1800px;
            height: 72px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        ul {
            list-style: none;
        }

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

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

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

        .logo img {
            width: 120px;
            height: 36px;
        }

        .right {
            display: flex;
            gap: 30px;
            align-items: center;
        }

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

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

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

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

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

        .right li:nth-of-type(3):hover {
            background-color: #446ffdba;
        }

        /* 轮播图样式 */
        .banner {
            width: 100%;
            height: 528px;
            position: relative;
            overflow: hidden;
        }

        .banner img {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }

        /* 产品部分样式 */
        .chanpin,
        .changjing,
        .hangye,
        .jishu,
        .yunying,
        .xiaoetong,
        .saoma {
            width: 100%;
            padding: 80px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .biaoti,
        .cj-biaoti,
        .hy-biaoti,
        .js-biaoti {
            font-size: 44px;
            font-weight: 600;
            margin-bottom: 40px;
            text-align: center;
        }

        .tupian,
        .tupian img,
        .hy-box {
            width: 90%;
            max-width: 1440px;
            height: auto;
            border-radius: 10px;
            margin-bottom: 40px;
        }

        .jieshao {
            display: flex;
            gap: 30px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .jieshao div {
            border-radius: 10px;
            padding: 30px;
            width: 300px;
            height: auto;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: transform .2s;
        }

        .jieshao div:hover {
            transform: translateY(-5px);
        }

        .jieshao div h3 {
            font-size: 30px;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .jieshao div p {
            color: #888;
            margin-bottom: 20px;
        }

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

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

        .jieshao div.active h3 {
            color: #4872f6;
        }

        /* 场景解决方案样式 */
        .cj-nav {
            list-style: none;
            display: flex;
            width: 90%;
            max-width: 825px;
            height: 48px;
            border-radius: 24px;
            background-color: #fff;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }

        .cj-nav li {
            width: 100%;
            height: 48px;
            border-radius: 24px;
            background-color: white;
            color: #333;
            cursor: pointer;
            text-align: center;
            line-height: 48px;
            transition: background-color .2s, color .2s;
        }

        .cj-nav li.active {
            background-color: #4872f6;
            color: white;
        }

        .cj-nav li:hover {
            background-color: #4872f6;
            color: white;
        }

        .cj-jieshao {
            width: 90%;
            max-width: 1440px;
            height: auto;
            border-radius: 10px;
            overflow: hidden;
            border: solid 5px #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-wrap: wrap;
        }

        .js-left {
            width: 50%;
            padding: 20px;
        }

        .js-left img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .js-right {
            width: 50%;
            padding: 20px;
        }

        .js-biaoti {
            font-size: 30px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .js-fubiaoti {
            font-size: 20px;
            color: #888;
            margin-bottom: 20px;
        }

        .js-right p {
            margin-bottom: 10px;
        }

        .js-right div {
            display: inline-block;
            padding: 10px 20px;
            border-radius: 8px;
            background-color: #4872f6;
            color: white;
            cursor: pointer;
            margin-right: 10px;
            transition: background-color .2s;
        }

        .js-right div:hover {
            background-color: #446ffdba;
        }

        /* 行业解决方案样式 */
        .hangye {
            color: white;
            background-image: url('./images/hy.webp');
            background-position: center;
            background-size: cover;
        }

        .hy-box {
            background-color: #222830;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
        }

        .hy-box-left {
            padding: 20px;
            background-color: #2e3543;
            width: 210px;
        }

        .hy-box-left p {
            border-radius: 8px;
            padding: 10px;
            font-size: 18px;
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            cursor: pointer;
            transition: background-color .2s;
        }

        .hy-box-left p.active {
            background: linear-gradient(90deg, rgba(20, 114, 255, .86) -39.08%, rgba(21, 115, 255, 0) 96.33%);
        }

        .hy-box-left p:hover {
            background: linear-gradient(90deg, rgba(20, 114, 255, .86) -39.08%, rgba(21, 115, 255, 0) 96.33%);
        }

        .hy-box-left p img {
            width: 20px;
            height: 20px;
        }

        .hy-box-right {
            width: calc(100% - 210px);
            padding: 20px;
        }

        /* 技术优势样式 */
        .jishu {
            height: auto;
        }

        .img-box {
            width: 90%;
            max-width: 1440px;
            height: auto;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            gap: 20px;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .img-box div {
            width: calc(33.33% - 20px);
            height: 426px;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            transition: width .2s;
        }

        .img-box div.active {
            width: calc(66.66% - 20px);
        }

        .img-box div .bottom {
            width: 100%;
            height: 100%;
            background-size: cover;
            border-radius: 10px;
        }

        .img-box div .mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(270deg, rgba(0, 82, 217, .5), #0052d9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 50px;
            color: white;
            opacity: 0;
            transition: opacity .2s;
        }

        .img-box div:hover .mask {
            opacity: 1;
        }

        .mask h2 {
            font-size: 52px;
            margin-bottom: 20px;
        }

        .mask p {
            text-align: center;
        }

        /* 运营服务样式 */
        .yunying {
            height: auto;
        }

        /* 他们都在用小鹅通样式 */
        .xiaoetong {
            height: auto;
            background-image: url('./images/xiaoetong.png');
            background-size: cover;
        }

        /* 立即扫码样式 */
        .saoma {
            height: auto;
            background-image: url(./images/saoma.png);
            background-size: cover;
        }

        /* 页脚样式 */
        .footer {
            height: auto;
            background-color: #161e30;
            color: white;
            padding: 80px 0;
            text-align: center;
        }

        /* 新增客户案例图片样式 */
        .customer-cases {
            width: 90%;
            max-width: 1440px;
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 40px;
        }

        .customer-cases img {
            width: 300px;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <!-- 页头：包含两部分，导航+切换图片 -->
    <div class="header">
        <!-- 页头导航栏 -->
        <div class="nav">
            <div class="content">
                <ul class="left">
                    <li class="logo"><img src="./images/下载.png" 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>
        <!-- 图片：banner 轮播图片 -->
        <div class="banner">
            <img src="./images/bg.webp" alt="">
        </div>
    </div>

    <!-- 我们的产品部分：先写标签，再写样式 -->
    <div class="chanpin">
        <!-- 标题 -->
        <div class="biaoti">我们的产品能力</div>
        <!-- 图片 -->
        <div class="tupian">
            <img src="./images/chanpin1.webp" alt="" srcset="">
        </div>
        <!-- 3个介绍 -->
        <div class="jieshao">
            <div class="active">
                <h3>知识店铺</h3>
                <p>1分钟搭建您的知识商城，助力高效知识变现。</p>
                <p><a href="#">免费试用 &rightarrow;</a></p>
            </div>
            <div>
                <h3>私域直播</h3>
                <p>提供稳定的私域直播服务，助力知识传播。</p>
                <p><a href="#">免费试用 &rightarrow;</a></p>
            </div>
            <div>
                <h3>企微SCRM</h3>
                <p>深度融合企业微信，提升客户管理效率。</p>
                <p><a href="#">免费试用 &rightarrow;</a></p>
            </div>
        </div>
    </div>
    <!-- 我们的场景解决方案 -->
    <div class="changjing">
        <!-- 标题 -->
        <div class="cj-biaoti">我们的场景解决方案</div>
        <!-- 按钮导航 -->
        <ul class="cj-nav">
            <li class="active">公域获客</li>
            <li>私域经营</li>
            <li>直播带货</li>
            <li>内容交付</li>
            <li>数据化运营</li>
        </ul>
        <!-- 信息介绍 -->
        <div class="cj-jieshao">
            <div class="js-left">
                <img src="./images/m10c72vn0zzo.webp" alt="">
            </div>
            <div class="js-right">
                <div class="js-biaoti">公域获客</div>
                <div class="js-fubiaoti">多渠道获客，沉淀私域流量池</div>
                <p>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现。</p>
                <p>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池。</p>
                <p>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI。</p>
                <div>免费试用</div>
                <div>了解详情</div>
            </div>
        </div>
    </div>

    <!-- 我们的行业解决方案 -->
    <div class="hangye">
        <div class="hy-biaoti">我们的行业解决方案</div>
        <div class="hy-box">
            <div class="hy-box-left">
                <p class="active">
                    <img src="./images/m0z15s580ei2.webp" alt="">
                    新零售门店
                </p>
                <p>
                    <img src="./images/m0z15s560wz6.webp" alt="">
                    职业培训
                </p>
                <p>
                    <img src="./images/m0z15tx30tif.webp" alt="">
                    知识付费
                </p>
                <p>
                    <img src="./images/m2bmj0r30gtx.webp" alt="">
                    美业直播
                </p>
            </div>
            <div class="hy-box-right">
                <!-- 这里可以添加行业解决方案的详细内容 -->
            </div>
        </div>
    </div>

    <!-- 我们的技术优势 -->
    <div class="jishu">
        <div class="js-biaoti">我们的技术优势</div>
        <div class="img-box">
            <div class="active">
                <div class="mask">
                    <h2>超稳定</h2>
                    <p>多云负载均衡/全球CDN加速</p>
                </div>
                <div class="bottom" style="background-image: url('./images/11.webp');"></div>
            </div>
            <div>
                <div class="mask">
                    <h2>高性能</h2>
                    <p>优化算法，提升系统响应速度</p>
                </div>
                <div class="bottom" style="background-image: url('./images/12.webp');"></div>
            </div>
            <div>
                <div class="mask">
                    <h2>安全可靠</h2>
                    <p>多重安全防护，保障数据安全</p>
                </div>
                <div class="bottom" style="background-image: url('./images/13.webp');"></div>
            </div>
        </div>
    </div>

    <!-- 我们的运营服务 -->
    <div class="yunying">
        <div class="biaoti">我们的运营服务</div>
        <p>提供全方位的运营服务，帮助您更好地使用小鹅通平台。</p>
        <!-- 新增运营服务图片展示 -->
        <div class="tupian">
            <img src="./images/yunying.webp" alt="" srcset="">
        </div>
    </div>

    <!-- 他们都在用小鹅通 -->
    <div class="xiaoetong">
        <div class="biaoti">他们都在用小鹅通</div>
        <p>众多企业和个人选择小鹅通，开启知识变现之旅。</p>
        <!-- 新增客户案例图片展示 -->
        <div class="customer-cases">
            <img src="./images/case1.webp" alt="">
            <img src="./images/case2.webp" alt="">
            <img src="./images/case3.webp" alt="">
        </div>
    </div>

    <!-- 立即扫码 -->
    <div class="saoma">
        <div class="biaoti">立即扫码</div>
        <p>扫描二维码，获取更多信息。</p>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <p>版权所有 &copy; 小鹅通</p>
        <p>联系方式：[具体联系方式]</p>
    </div>
</body>

</html>