WEB小鵝通首頁開發(fā)

作業(yè)分析

本次使用html標(biāo)簽編寫如下效果


簡1.png
簡2.png
簡3.png
簡4.png
簡5.png
簡6.png

代碼實(shí)現(xiàn)

<!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/demon02.css">
    <style></style>
</head>

<body>
    <!----------小鵝通導(dǎo)航標(biāo)簽--------------->


    <div class="beijingtu">
        <div class="daohang">
            <div class="zhaopian0"><img src="./0.png"></div>
            <div class="daohangqian">
                <ul>
                    <li>首頁</li>
                    <li>解決方案</li>
                    <li>產(chǎn)品服務(wù)</li>
                    <li>價(jià)格</li>
                    <li>活動(dòng)</li>
                    <li>案例</li>
                    <li>渠道合作</li>
                    <li>下載與幫助</li>
                    <li>關(guān)于我們</li>
                </ul>
            </div>
            <div class="woshixueyuan">
                <div class="woshixueyuan0">我是學(xué)員</div>
                <div class="shangjiadenglu"><button>商家登錄</button></div>
                <div class="mianfeishiyong"><button>免費(fèi)試用 </button></div>
            </div>
        </div>
    </div>


    <!-----------------小鵝通導(dǎo)航背景圖片------------------------------------------>



    <img src="./1.png" alt="">





    <!-----------------------------小鵝通我們的產(chǎn)品能力-------------------------------------------------->
    <div class="chanpinnenglizuiwaimian">
        <div class="chanpinnengli">
            <h2>我們的產(chǎn)品能力</h2>
            <div class="tuopian2"><img src="./2.png" alt=""></div>
            <div class="chanpinnenglixia">
                <div class="chanpinnenglixia0">
                    <div class="chanpinnenglixia01">
                        <h3>知識(shí)店鋪</h3>
                        <p>1分鐘搭建您的知識(shí)商城
                            <br> 助力高效知識(shí)變現(xiàn)
                        </p>
                        <p><a href="#">免費(fèi)試用</a></p>
                    </div>
                    <div class="chanpinnenglixia02">
                        <h3>私域直播</h3>
                        <p>企業(yè)級(jí)專屬私域直播平臺(tái)
                            <br> 實(shí)現(xiàn)私域流量高效運(yùn)營
                        </p>
                        <p><a href="#">免費(fèi)試用</a></p>
                    </div>
                    <div class="chanpinnenglixia03">
                        <h3>企微SCRM</h3>
                        <p>企業(yè)微信私域運(yùn)營神器<br>
                            數(shù)據(jù)洞察驅(qū)動(dòng)業(yè)績增長</p>
                        <p><a href="#">免費(fèi)試用</a></p>
                    </div>
                </div>
            </div>
        </div>

        <!--------------------------小鵝通我們的解決方案-------------------------------->


        <div class="womendejiejuefanganmostoutside">
            <div class="womendejiejuefanganmoreoutside">
                <div class="womendejiejuefanganhead">
                    <h1>我們的場景解決方案</h1>
                </div>
                <div class="womendejiejuefanganbody">
                    <p>公域獲客</p>
                    <p>私域運(yùn)營</p>
                    <p>直播帶貨</p>
                    <p>內(nèi)容交付</p>
                    <p>數(shù)據(jù)化運(yùn)營</p>
                </div>
                <div class="womendejiejuefanganfoot">
                    <div class="womendejiejuefanganfootleft">
                        <img src="./3.png" alt="">
                    </div>
                    <div class="womendejiejuefanganfootright">
                        <h2>公域獲客</h2>
                        <h3>多渠道獲客，沉淀私域流量池</h3>
                        <p>
                            打通抖音/快手/小紅書/視頻號(hào)/公眾號(hào)，支持直播間/短視頻/賬號(hào)主頁<br>等多種課程掛載
                            方式，快速開啟知識(shí)變現(xiàn)</p>

                        <p>多種公域轉(zhuǎn)私域工具，支持添加企微/引流加群加人/
                            渠道活碼/分配引<br>擎等工具，客戶可批量導(dǎo)流到私域流量池</p>

                        <p>豐富的廣告獲客能力，落地頁支持表單/支付類/
                            0元領(lǐng)取/添加企微等<br>多場景，提升廣告ROI
                        </p>
                        <p><button>免費(fèi)試用</button> <button>了解詳情</button></p>
                    </div>
                </div>
            </div>
        </div>


        <!-----------------------------我們的行業(yè)解決方案--------------------------------->
        <div class="hangyefangansolutionsmostoutside">
            <div class="hangyefangansolutionsmoreoutside">
                <div class="solutions1">
                    <h3>我們的行業(yè)解決方案</h3>
                </div>
                <div class="solutions2">
                    <div class="solutions21">
                        <p>
                            新零售門店</p>
                        <p>
                            職業(yè)培訓(xùn)</p>
                        <p>
                            知識(shí)付費(fèi)</p>
                        <p>
                            美業(yè)直播</p>
                    </div>
                    <div class="solutions22">
                        <div class="solutions221"><img src="./5.png" alt=""></div>
                        <div class="solutions223"><button>免費(fèi)試用</button>
                            <button>了解詳情</button>
                        </div>

                    </div>
                    <div class="solutions23"><img src="./4.png" alt=""></div>
                </div>
            </div>
        </div>
        <!--------------------我們的技術(shù)優(yōu)勢--------------------------->
        <div class="womendejishuyoushimostoutside">
            <div class="womendejishuyoushimoreoutside">
                <div class="womendejishuyoushihead">
                    <h3>我們的技術(shù)優(yōu)勢</h3>
                </div>
                <div class="womendejishuyoushibody">
                    <img src="./6.png" alt="">
                </div>
            </div>
        </div>
        <!--------------------我們的運(yùn)營服務(wù)--------------------->
        <div class="womendeyunyingfuwumostoutside">
            <div class="womendeyunyingfuwumoreoutside">
                <div class="womendeyunyingfuwumhead">
                    <h2>我們的運(yùn)營服務(wù)</h2>
                </div>
                <div class="womendeyunyingfuwubody">
                    <div>
                        <img src="./7.png" alt="">
                        <h3>社群服務(wù)</h3>
                        <p>標(biāo)桿商家分享，同行商家交流，總比別人快一步</p>
                    </div>
                    <div>
                        <img src="./8.png" alt="">
                        <h3>管家服務(wù)</h3>
                        <p>客戶經(jīng)理、服務(wù)管家、多角色在群，服務(wù)全面包圍</p>
                    </div>
                    <div>
                        <img src="./9.png" alt="">
                        <h3>大客服務(wù)</h3>
                        <p>設(shè)置夜班服務(wù)管家/假期值班管家，24小時(shí)在線服務(wù)，
                            <br>服務(wù)從不掉線
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!--------------------------------------------------------------------->
        <div class="foot10"><img src="./10.png" alt=""></div>
        <div class="foot11"><img src="./11.png" alt=""></div>
        <div class="foot12"><img src="./12.png" alt=""></div>



</body>

</html>

以下是css樣式

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

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

body {
    display: flex;
    flex-direction: column;
}

/***********小鵝通導(dǎo)航標(biāo)簽*******************************/
.daohang {
    background-color: transparent;
    height: 75px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top:0 ;
    left: 0;

}

.daohang:hover {
    background-color: rgb(255, 255, 255);
}

.daohang p {
    font-size: 18px;
    font-weight: 50px;
}

.zhaopian0 {
    display: flex;
    justify-content: left;
    align-items: start;
}

.zhaopian0 img {
    align-items: start;
    display: flex;
    justify-content: left;
    height: 75px;
    width: 150px;
}

.shangjiadenglu button {
    height: 50px;
    width: 110px;
    background-color: rgb(236, 235, 231);
    border-radius: 5px;
    border: none;
    font-size: 15px;
    color: rgb(66, 66, 244);
}

.shangjiadenglu button:hover {
    background-color: rgb(55, 113, 248);
    color: #fffdfd;
}

.mianfeishiyong button {
    height: 50px;
    width: 110px;
    background-color: rgb(70, 92, 240);
    border-radius: 5px;
    color: #fdfdfd;
    border: none;
    font-size: 15px;
}

.mianfeishiyong button:hover {
    background-color: rgb(27, 117, 201);
}

.daohangqian {
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: row;
}

.daohangqian ul {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    list-style: none;
    height: 75px;
}

.daohangqian ul li {
    height: 75px;
    line-height: 75px;
    padding: 0 20px;
    cursor: pointer;

}

.daohangqian ul li:hover {
    color: rgb(26, 88, 232);
}

.woshixueyuan {
    display: flex;
    justify-content: right;
    gap: 50px;
    height: 75px;
    width: 500px;
    align-items: center;
}

.woshixueyuan0 {
    height: 75px;
    line-height: 75px;

}

.woshixueyuan0:hover {
    cursor: pointer;
    color: rgb(19, 71, 242);

}

/***********小鵝通導(dǎo)航背景圖片*******************************/
/*********************小鵝通我們的產(chǎn)品能力*******************************/
.chanpinnenglizuiwaimian {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 100px;
    background-image: linear-gradient(to bottom, rgb(245, 245, 245), rgb(169, 187, 247));
}

.chanpi0nnengli {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

}

.tuopian2 img {
    height: 600px;
    width: 1300px;
}

.chanpinnenglizuiwaimian h2 {
    font-size: 40px;
    padding: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chanpinnenglixia0 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    gap: 20px;

}

.chanpinnenglixia01 {
    border: 2px solid #f8f5f5;
    height: 180px;
    width: 415px;
    background-color: rgb(255, 255, 255);
    padding: 25px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chanpinnenglixia02 {
    border: 2px solid #f8f5f5;
    height: 180px;
    width: 415px;
    background-color: rgb(255, 255, 255);
    padding: 25px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chanpinnenglixia03 {
    border: 2px solid #f8f5f5;
    height: 180px;
    width: 415px;
    background-color: rgb(255, 255, 255);
    padding: 25px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chanpinnenglixia01 a {
    text-decoration: none;
    color: #5684f1;
}

.chanpinnenglixia02 a {
    text-decoration: none;
    color: #5684f1;
}

.chanpinnenglixia03 a {
    text-decoration: none;
    color: #5684f1;
}

.chanpinnenglixia01 h3 {
    font-size: 25px;
    font-weight: 500;
}

.chanpinnenglixia02 h3 {
    font-size: 25px;
    font-weight: 500;

}

.chanpinnenglixia03 h3 {
    font-size: 25px;
    font-weight: 500;

}

/**********************我們的解決方案*******************************/


.womendejiejuefanganmostoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 100px;
}

.womendejiejuefanganmoreoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 100px;
}

.womendejiejuefanganhead {
    font-size: 20px;
    font-weight: 20px;
}

.womendejiejuefanganbody {
    display: flex;
    align-items: center;
    margin-top: 30px;
    justify-content: space-evenly;
    border: 2px soild #fffefe;
    height: 50px;
    width: 750px;
    background-color: #fdfdfd;
    border-radius: 30px;

}

.womendejiejuefanganbody p {
    font-size: 15px;
    font-weight: 10px;
}

.womendejiejuefanganbody p:hover {
    border: 1px solid #4b7df2;
    height: 50px;
    width: 150px;
    border-radius: 30px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    background-color: #4b7df2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.womendejiejuefanganfoot {
    display: flex;
    flex-direction: row;
    margin-top: 40px;
    background-color: #fdfdfd;
    height: 500px;
    width: 1300px;
    border: 1px solid #f8f5f5;
    border-radius: 20px;
}

.womendejiejuefanganfootleft img {
    height: 500px;
    width: 600px;
    border: 1px solid #f8f5f5;
    border-radius: 20px;
}

.womendejiejuefanganfootright {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    padding: 10px 10px 10px 80px;
    gap: 20px;

}

.womendejiejuefanganfootright h2 {
    font-size: 40px;
    font-weight: 20px;
}

.womendejiejuefanganfootright h3 {
    font-size: 30px;
    font-weight: 500;
}

.womendejiejuefanganfootright p {
    font-size: 15px;
    font-weight: 15px;
    color: rgba(0, 0, 0, 0.5);
}

.womendejiejuefanganfootright button {
    height: 40px;
    width: 130px;
    border-radius: 10px;
    border: 1px solid #4671cf;
    background-color: #f7f7f7;
    color: #4671cf;
    margin-top: 30px;


}

.womendejiejuefanganfootright button:hover {
    background-color: #4b7df2;
    color: #fffdfd;
    cursor: pointer;
}

/********************我們的行業(yè)解決方案************************************/
.hangyefangansolutionsmostoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #061946cc;
    width: 100%;
    height: 800px;
    margin-top: 100px;
}

.hangyefangansolutionsmoreoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 600px;
}

.solutions1 {
    color: #f7f7f7;
    font-size: 40px;
    font-weight: 40px;
    margin-top: -500px;

}

.solutions1 h3 {
    margin-top: -100px;
}

.solutions2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.solutions21 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #051c4ed1;
    height: 500px;
    width: 200px;
}

.solutions21 p {
    height: 100px;
    width: 200px;
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: center;


}

.solutions21 p:hover {
    background-color: #4b7df2;
    color: #f7f7f7;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #4b7df2;
}

.solutions21 p {
    color: #f7f7f7;
    font-size: 20px;
    font-weight: 20px;
}


.solutions221 img {
    height: 400px;
    width: 600px;
    margin-top: 10px;
}

.solutions23 img {
    height: 500px;
    width: 400px;
}

.solutions223 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: 30px;
    gap: 40px;
}

.solutions223 button {
    height: 40px;
    width: 130px;
    border-radius: 10px;
    border: 1px solid #4671cf;
    background-color: #f7f7f7;
    color: #4671cf;
}

.solutions223 button:hover {
    background-color: #4b7df2;
    color: #f7f7f7;
    cursor: pointer;
}

/********************我們的技術(shù)優(yōu)勢*******************************/

.womendejishuyoushimostoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 750px;
    width: 100%;
    background-image: linear-gradient(to bottom, rgb(245, 245, 245), rgb(214, 221, 244));
}

.womendejishuyoushimoreoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 100px;
}

.womendejishuyoushihead {
    font-size: 40px;
    font-weight: 40px;
}

.womendejishuyoushibody {
    margin-top: 50px;
}

.womendejishuyoushibody img {
    height: 400px;
    width: 1200px;
    border-radius: 20px;
}

/*****************我們的運(yùn)營服務(wù)********************************/
.womendeyunyingfuwumostoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 600px;
    width: 100%;
    background-color: #fffefe;
}

.womendeyunyingfuwumoreoutside {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 100px;
}

.womendeyunyingfuwumhead {
    font-size: 50px;
    font-weight: 50px;

}

.womendeyunyingfuwubody {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.womendeyunyingfuwubody div {
    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.womendeyunyingfuwubody div img {
    height: 200px;
    width: 400px;
    border-radius: 20px;

}

.womendeyunyingfuwubody div h3 {
    font-size: 30px;
    font-weight: 20px;
}

.womendeyunyingfuwubody div p {
    font-size: 15px;
    font-weight: 10px;
    color: #a49f9f;
    gap: 20px;
}

/**************************************************************/
.foot10 img {
    height: 1000px;
    width: 100%;
}

.foot11 img {
    height: 500px;
    width: 100%;
}

.foot12 img {
    height: 900px;
    width: 100%;
}

個(gè)人總結(jié)

在html中對(duì)于部分網(wǎng)頁效果的特效還未實(shí)現(xiàn)，標(biāo)簽的用法有待練習(xí)，圖片的查找和排版問題，總體上能還原一定的相似度

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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