2025-03-22

第三次web作業(yè)

2b6d5272-ab4a-466a-94fc-d1cc5e7e36f3.png
<!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;
        }

        /* 導(dǎo)航欄樣式 */
        .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;
        }

        /* 產(chǎn)品部分樣式 */
        .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;
        }

        /* 行業(yè)解決方案樣式 */
        .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;
        }

        /* 技術(shù)優(yōu)勢樣式 */
        .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;
        }

        /* 運營服務(wù)樣式 */
        .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>
    <!-- 頁頭：包含兩部分，導(dǎo)航+切換圖片 -->
    <div class="header">
        <!-- 頁頭導(dǎo)航欄 -->
        <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="#">產(chǎn)品服務(wù)</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="#">關(guān)于我們</a></li>
                </ul>
                <ul class="right">
                    <li>我是學(xué)員</li>
                    <li>商家登錄</li>
                    <li>免費試用</li>
                </ul>
            </div>
        </div>
        <!-- 圖片：banner 輪播圖片 -->
        <div class="banner">
            <img src="./images/bg.webp" alt="">
        </div>
    </div>

    <!-- 我們的產(chǎn)品部分：先寫標簽，再寫樣式 -->
    <div class="chanpin">
        <!-- 標題 -->
        <div class="biaoti">我們的產(chǎn)品能力</div>
        <!-- 圖片 -->
        <div class="tupian">
            <img src="./images/chanpin1.webp" alt="" srcset="">
        </div>
        <!-- 3個介紹 -->
        <div class="jieshao">
            <div class="active">
                <h3>知識店鋪</h3>
                <p>1分鐘搭建您的知識商城，助力高效知識變現(xiàn)。</p>
                <p><a href="#">免費試用 &rightarrow;</a></p>
            </div>
            <div>
                <h3>私域直播</h3>
                <p>提供穩(wěn)定的私域直播服務(wù)，助力知識傳播。</p>
                <p><a href="#">免費試用 &rightarrow;</a></p>
            </div>
            <div>
                <h3>企微SCRM</h3>
                <p>深度融合企業(yè)微信，提升客戶管理效率。</p>
                <p><a href="#">免費試用 &rightarrow;</a></p>
            </div>
        </div>
    </div>
    <!-- 我們的場景解決方案 -->
    <div class="changjing">
        <!-- 標題 -->
        <div class="cj-biaoti">我們的場景解決方案</div>
        <!-- 按鈕導(dǎo)航 -->
        <ul class="cj-nav">
            <li class="active">公域獲客</li>
            <li>私域經(jīng)營</li>
            <li>直播帶貨</li>
            <li>內(nèi)容交付</li>
            <li>數(shù)據(jù)化運營</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>打通抖音/快手/小紅書/視頻號/公眾號，支持直播間/短視頻/賬號主頁等多種課程掛載方式，快速開啟知識變現(xiàn)。</p>
                <p>多種公域轉(zhuǎn)私域工具，支持添加企微/引流加群加人/渠道活碼/分配引擎等工具，客戶可批量導(dǎo)流到私域流量池。</p>
                <p>豐富的廣告獲客能力，落地頁支持表單/支付類/0元領(lǐng)取/添加企微等多場景，提升廣告ROI。</p>
                <div>免費試用</div>
                <div>了解詳情</div>
            </div>
        </div>
    </div>

    <!-- 我們的行業(yè)解決方案 -->
    <div class="hangye">
        <div class="hy-biaoti">我們的行業(yè)解決方案</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="">
                    職業(yè)培訓(xùn)
                </p>
                <p>
                    <img src="./images/m0z15tx30tif.webp" alt="">
                    知識付費
                </p>
                <p>
                    <img src="./images/m2bmj0r30gtx.webp" alt="">
                    美業(yè)直播
                </p>
            </div>
            <div class="hy-box-right">
                <!-- 這里可以添加行業(yè)解決方案的詳細內(nèi)容 -->
            </div>
        </div>
    </div>

    <!-- 我們的技術(shù)優(yōu)勢 -->
    <div class="jishu">
        <div class="js-biaoti">我們的技術(shù)優(yōu)勢</div>
        <div class="img-box">
            <div class="active">
                <div class="mask">
                    <h2>超穩(wěn)定</h2>
                    <p>多云負載均衡/全球CDN加速</p>
                </div>
                <div class="bottom" style="background-image: url('./images/11.webp');"></div>
            </div>
            <div>
                <div class="mask">
                    <h2>高性能</h2>
                    <p>優(yōu)化算法，提升系統(tǒng)響應(yīng)速度</p>
                </div>
                <div class="bottom" style="background-image: url('./images/12.webp');"></div>
            </div>
            <div>
                <div class="mask">
                    <h2>安全可靠</h2>
                    <p>多重安全防護，保障數(shù)據(jù)安全</p>
                </div>
                <div class="bottom" style="background-image: url('./images/13.webp');"></div>
            </div>
        </div>
    </div>

    <!-- 我們的運營服務(wù) -->
    <div class="yunying">
        <div class="biaoti">我們的運營服務(wù)</div>
        <p>提供全方位的運營服務(wù)，幫助您更好地使用小鵝通平臺。</p>
        <!-- 新增運營服務(wù)圖片展示 -->
        <div class="tupian">
            <img src="./images/yunying.webp" alt="" srcset="">
        </div>
    </div>

    <!-- 他們都在用小鵝通 -->
    <div class="xiaoetong">
        <div class="biaoti">他們都在用小鵝通</div>
        <p>眾多企業(yè)和個人選擇小鵝通，開啟知識變現(xiàn)之旅。</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>版權(quán)所有 &copy; 小鵝通</p>
        <p>聯(lián)系方式：[具體聯(lián)系方式]</p>
    </div>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 《第七日記憶》 作者：萍 短文 【1. 故障】 手術(shù)臺的無影燈亮起時，林夏聞到了一股淡淡的鐵銹味。 她記得自己應(yīng)該...
    崩崩小圓帽_0cdd閱讀 69評論 0贊 0
  • 方勵《里斯本丸沉沒》電影帶來的世界112 2024年6月14日10時，紀錄電影《里斯本丸沉沒》在第26屆上海國際電...
    彭求實閱讀 192評論 0贊 1
  • 散文集·似水流年 // 鳴鹿原創(chuàng) 點此購買會員有驚喜（限首開）詳見文末[https://www.jianshu.c...
    龍角鳴鹿閱讀 548評論 1贊 55
  • 泡茶 取來一點點茶葉，用溫水泡開，慢慢等待幾十分鐘，茶葉水就顯出來綠色地，茶葉就都泡開了，但是倒茶水又是一...
    野雞和貓和老鷹閱讀 24評論 0贊 0
  • 《那個最關(guān)心我的人》 我的人生中總有那么一個人，默默地關(guān)心著我，用愛溫暖著我的心靈，成為我生命中最重要的支撐。于我...
    珍妮317閱讀 89評論 0贊 2

友情鏈接更多精彩內(nèi)容