WEB小鹅通首页开发

作业分析

本次使用html标签编写如下效果


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

代码实现

<!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>
    <!----------小鹅通导航标签--------------->


    <div class="beijingtu">
        <div class="daohang">
            <div class="zhaopian0"><img src="./0.png"></div>
            <div class="daohangqian">
                <ul>
                    <li>首页</li>
                    <li>解决方案</li>
                    <li>产品服务</li>
                    <li>价格</li>
                    <li>活动</li>
                    <li>案例</li>
                    <li>渠道合作</li>
                    <li>下载与帮助</li>
                    <li>关于我们</li>
                </ul>
            </div>
            <div class="woshixueyuan">
                <div class="woshixueyuan0">我是学员</div>
                <div class="shangjiadenglu"><button>商家登录</button></div>
                <div class="mianfeishiyong"><button>免费试用 </button></div>
            </div>
        </div>
    </div>


    <!-----------------小鹅通导航背景图片------------------------------------------>



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





    <!-----------------------------小鹅通我们的产品能力-------------------------------------------------->
    <div class="chanpinnenglizuiwaimian">
        <div class="chanpinnengli">
            <h2>我们的产品能力</h2>
            <div class="tuopian2"><img src="./2.png" alt=""></div>
            <div class="chanpinnenglixia">
                <div class="chanpinnenglixia0">
                    <div class="chanpinnenglixia01">
                        <h3>知识店铺</h3>
                        <p>1分钟搭建您的知识商城
                            <br> 助力高效知识变现
                        </p>
                        <p><a href="#">免费试用</a></p>
                    </div>
                    <div class="chanpinnenglixia02">
                        <h3>私域直播</h3>
                        <p>企业级专属私域直播平台
                            <br> 实现私域流量高效运营
                        </p>
                        <p><a href="#">免费试用</a></p>
                    </div>
                    <div class="chanpinnenglixia03">
                        <h3>企微SCRM</h3>
                        <p>企业微信私域运营神器<br>
                            数据洞察驱动业绩增长</p>
                        <p><a href="#">免费试用</a></p>
                    </div>
                </div>
            </div>
        </div>

        <!--------------------------小鹅通我们的解决方案-------------------------------->


        <div class="womendejiejuefanganmostoutside">
            <div class="womendejiejuefanganmoreoutside">
                <div class="womendejiejuefanganhead">
                    <h1>我们的场景解决方案</h1>
                </div>
                <div class="womendejiejuefanganbody">
                    <p>公域获客</p>
                    <p>私域运营</p>
                    <p>直播带货</p>
                    <p>内容交付</p>
                    <p>数据化运营</p>
                </div>
                <div class="womendejiejuefanganfoot">
                    <div class="womendejiejuefanganfootleft">
                        <img src="./3.png" alt="">
                    </div>
                    <div class="womendejiejuefanganfootright">
                        <h2>公域获客</h2>
                        <h3>多渠道获客，沉淀私域流量池</h3>
                        <p>
                            打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页<br>等多种课程挂载
                            方式，快速开启知识变现</p>

                        <p>多种公域转私域工具，支持添加企微/引流加群加人/
                            渠道活码/分配引<br>擎等工具，客户可批量导流到私域流量池</p>

                        <p>丰富的广告获客能力，落地页支持表单/支付类/
                            0元领取/添加企微等<br>多场景，提升广告ROI
                        </p>
                        <p><button>免费试用</button> <button>了解详情</button></p>
                    </div>
                </div>
            </div>
        </div>


        <!-----------------------------我们的行业解决方案--------------------------------->
        <div class="hangyefangansolutionsmostoutside">
            <div class="hangyefangansolutionsmoreoutside">
                <div class="solutions1">
                    <h3>我们的行业解决方案</h3>
                </div>
                <div class="solutions2">
                    <div class="solutions21">
                        <p>
                            新零售门店</p>
                        <p>
                            职业培训</p>
                        <p>
                            知识付费</p>
                        <p>
                            美业直播</p>
                    </div>
                    <div class="solutions22">
                        <div class="solutions221"><img src="./5.png" alt=""></div>
                        <div class="solutions223"><button>免费试用</button>
                            <button>了解详情</button>
                        </div>

                    </div>
                    <div class="solutions23"><img src="./4.png" alt=""></div>
                </div>
            </div>
        </div>
        <!--------------------我们的技术优势--------------------------->
        <div class="womendejishuyoushimostoutside">
            <div class="womendejishuyoushimoreoutside">
                <div class="womendejishuyoushihead">
                    <h3>我们的技术优势</h3>
                </div>
                <div class="womendejishuyoushibody">
                    <img src="./6.png" alt="">
                </div>
            </div>
        </div>
        <!--------------------我们的运营服务--------------------->
        <div class="womendeyunyingfuwumostoutside">
            <div class="womendeyunyingfuwumoreoutside">
                <div class="womendeyunyingfuwumhead">
                    <h2>我们的运营服务</h2>
                </div>
                <div class="womendeyunyingfuwubody">
                    <div>
                        <img src="./7.png" alt="">
                        <h3>社群服务</h3>
                        <p>标杆商家分享，同行商家交流，总比别人快一步</p>
                    </div>
                    <div>
                        <img src="./8.png" alt="">
                        <h3>管家服务</h3>
                        <p>客户经理、服务管家、多角色在群，服务全面包围</p>
                    </div>
                    <div>
                        <img src="./9.png" alt="">
                        <h3>大客服务</h3>
                        <p>设置夜班服务管家/假期值班管家，24小时在线服务，
                            <br>服务从不掉线
                        </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;
}

/***********小鹅通导航标签*******************************/
.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);

}

/***********小鹅通导航背景图片*******************************/
/*********************小鹅通我们的产品能力*******************************/
.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;
}

/********************我们的行业解决方案************************************/
.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;
}

/********************我们的技术优势*******************************/

.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;
}

/*****************我们的运营服务********************************/
.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%;
}

个人总结

在html中对于部分网页效果的特效还未实现，标签的用法有待练习，图片的查找和排版问题，总体上能还原一定的相似度

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

推荐阅读更多精彩内容