当前位置：首页 > article >正文

模拟开发小鹅通首页网站练习

article 2025/2/10 22:46:43

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小鹅通-首页</title>
    <!-- 引入页面样式 -->
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>


    <!-- 页头banner图 -->
    <div class="bg header">
        <!-- 页头导航 -->
        <div class="nav">
            <div class="content">
                <!-- 左侧菜单 -->
                <div class="nav-menus">
                    <div class="logo"></div>
                    <ul>
                        <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>
                </div>
                <!-- 右侧登录 -->
                <div class="nav-login">
                    <div>我是学员</div>
                    <div>商家登录</div>
                    <div>免费试用</div>
                </div>
            </div>
        </div>
        <!-- banner图 -->
        <div class="banner"></div>
    </div>

    <!-- 产品介绍 -->
    <div class="bg intro">
        <h1>我们的产品能力</h1>
        <img src="./images/m3moa2m10v5k.webp" alt="">
        <div class="info">
            <div>
                <h3 class="title active">知识店铺</h3>
                <p>1分钟搭建您的知识商城<br>
                    助力高效知识变现</p>
                <a href="#">免费试用 - &rightarrow;</a>
            </div>
            <div>
                <h3 class="title">私域直播</h3>
                <p>企业级专属私域直播平台<br>
                    实现私域流量高效运营</p>
                <a href="#">免费试用 - &rightarrow;</a>
            </div>
            <div>
                <h3 class="title">企微SCRM</h3>
                <p>企业微信私域运营神器<br>
                    数据洞察驱动业绩增长</p>
                <a href="#">免费试用 - &rightarrow;</a>
            </div>
        </div>
    </div>

    <!-- sence -->
    <div class="bg sence">
        <h1>我们的场景解决方案</h1>
        <ul class="list">
            <li>公域获客</li>
            <li>私域运营</li>
            <li>直播带货</li>
            <li>内容交付</li>
            <li>数据化运营</li>
        </ul>
        <div class="info">
            <img src="./images/m10c72vn0zzo.webp" alt="">
            <div class="msg">
                <h2>公域获客</h2>
                <h3>多渠道获客，沉淀私域流量池</h3>
                <ul>
                    <li>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</li>
                    <li>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</li>
                    <li>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</li>
                </ul>
                <div class="btns">
                    <div>免费试用</div>
                    <div>了解详情</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 行业解决方案 -->
    <div class="bg industry">
        <h1>我们的行业解决方案</h1>
        <div class="he">
            <div class="zuo">
                <div><img src="./images/e97a1e6be8d332de218eba53001b301.png" width="18.59px" height="18.59px"><span style= "margin-left:8px">新零售门店</span></div>
                <div><img src="./images/e97a1e6be8d332de218eba53001b301.png" width="18.59px" height="18.59px"><span style= "margin-left:8px">职业培训</span></div>
                <div><img src="./images/e97a1e6be8d332de218eba53001b301.png" width="18.59px" height="18.59px"><span style= "margin-left:8px">知识付费</span></div>
                <div><img src="./images/e97a1e6be8d332de218eba53001b301.png" width="18.59px" height="18.59px"><span style= "margin-left:8px">美业直播</span></div>
                <!--span局部标签，修饰网页中一**行内的部分内容-->
                <!-- 
                 img : 图片标签名称，主要网页中显示图片
        src属性：显示图片的路径（网址、本地路径、图片数据）
        width属性：设置图片宽度，一般推荐以像素为单位
        height属性：设置图片高度，一般推荐以像素为单位
            宽度和高度设置任意一个数据，图片等比例缩放；两个属性都设置-图片拉伸
        alt属性：当图片无法正常显示时替代的文字描述
                -->
            </div>
            <div class="zhuong">
                <h2>知识付费行业解决方案</h2>
                <p>提供内容变现能力,助力品牌IP打造</p>
                <div class="msg">
                    <div>
                        <img src="./images/e97a1e6be8d332de218eba53001b301.png" alt="">
                        <span>知识店铺</span>
                    </div>
                    <div>专栏</div>
                    <div>会员</div>
                    <div>圈子</div>
                    <div>直播</div>
                    <div>表单</div>
                    <div>裂变海报</div>
                    <div>推广员</div>
                </div>
    <!--
        按 Shift + Alt + 上/下方向键，可以直接复制一行代码
    -->
                    <div class="btns">
                        <div>免费试用</div>
                        <div>了解详情</div>
                    </div>
            </div>
            <div class="you">
                <h4>行业案例</h4>
                <div>
                    <img src="./images/e97a1e6be8d332de218eba53001b301.png" alt="">
                    <img src="./images/m1n7u98h0aet.webp" alt="">
                    <img src="./images/m1n7u98h0aet.webp" alt="">
                    <img src="./images/m1n7u98h0aet.webp" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 技术优势 -->
    <div class="bg tech">
        <h1>我们的技术优势</h1>
        <div>
            <img src="./images/7d5219a0ba20153ccea8b3dfd995db5.png" width="1268px" height="375px">
        </div>
    </div>

    <!-- 运营服务 -->
    <div class="bg service">
        <h1>我们的运营服务</h1>
        <div class="nierong">
            <div><img src="./images/大客服务.png" width="405px" height="215px"><div class="title">社群服务</div><div class="desc">标杆商家分享，同行商家交流，总比别人快一步</div></div>
            <div><img src="./images/大客服务.png" width="405px" height="215px"><div class="title">管家服务</div><div class="desc">客户经理、服务管家、多角色在群，服务全面包围</div></div>
            <div><img src="./images/大客服务.png" width="405px" height="215px"><div class="title">大客服务</div><div class="desc">设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</div></div>
            <div><img src="./images/大客服务.png" width="405px" height="215px"><div class="title">运维服务</div><div class="desc">需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</div></div>
        </div>

    </div>

    <!-- 小鹅通 -->
    <div class="bg xiaoet">
        <h1>他们都在用小鹅通</h1>
        <div>（*排名不分先后顺序）</div>

    </div>

    <!-- 咨询 -->
    <div class="bg advisory">
        <h1>立即扫码咨询，领取您的专属解决方案</h1>
    </div>

    <!-- 友情链接、公司信息 -->
    <div class="bg message">
        <ul class="listo">
            <li>场景</li>
            <li>行业</li>
            <li>产品</li>
            <li>服务</li>
            <li>关于我们</li>
            <li>媒体报道</li>
        </ul>
    </div>
</body>

</html>

css代码

.bg{
    width:100%;
}

.header{
    background-image: url(../images/m28mek5n0yyx.webp);
    background-size:cover;
    background-position:center;
}

.nav{
    height: 72px;
    /* background-color:aqua; */
    background-color:transparent;
    display:flex;
    justify-content: center;
}
.nav:hover{
    background-color:white;
    /* css3样式：过渡动画，让样式过渡持续指定时间 */
    transition: .2s all;
}

.nav .content{
    width:1600px;
    /* background-color:antiquewhite; */

    display: flex;
    justify-content: space-between;
}
.logo{
    height:72px;
    width:120px;
    background-image:url(../images/logo.png);
    /* 设置背景图片，值-`url(图片相对路径) */
    background-size: 115px 35px;
    /*设置背景图片尺寸，宽度、高度*/
    background-repeat: no-repeat;
    /*  设置背景图片排列方式，默认x轴、y轴无限循环 */
    background-position: 0 20px;
    /*  设置背景图片出现的位置 */
}
.nav-menus{
    width:900px;
    display:flex;
    justify-content: space-between;
}
.nav-menus ul{
    list-style:none;
    display:flex;
}
.nav-menus li{
    line-height: 72px;
    padding: 0 15px;
}
.nav-menus li a{
    color:#333;
    text-decoration: none;
    cursor:pointer;
}
.nav-menus li a:hover{
    color:blue;
}

.nav-login{
    display:flex;
    align-items: center;
    gap:20px;
}
.nav-login div:nth-of-type(2),
.nav-login div:nth-of-type(3),
.info .msg .btns div:nth-of-type(1),
.info .msg .btns div:nth-of-type(2){
    cursor:pointer;
    width:100px;
    height:40px;
    line-height: 40px;
    text-align:center;
    border:solid 1px #4872f6;
    border-radius:5px;
    background-color:white;
    color:#4872f6;
}
.info .msg .btns div:nth-of-type(1),
.info .msg .btns div:nth-of-type(2):hover,
.nav-login div:nth-of-type(3),
.nav-login div:nth-of-type(2):hover{
    color:white;
    background-color:#4872f6;
    translate: .5 all;
}
.info .msg .btns div:nth-of-type(1):hover,
.nav-login div:nth-of-type(3):hover{
    background-color:#819cf8;
}

.banner{
    height:454px;
    /* background-color:bisque; */
}
.intro{
    padding: 90px;
    height:995px;
    background-color:#f5faff;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.intro h1,
.sence h1,
.xiaoet h1,
.service h1{
    font-size:42px;
}
.intro img{
    width:1263px;
    height:490px;
}
.intro .info{
    width:1263px;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.info > div{
    width: 407px;
    height: 194px;
    background-color:white;
    border-radius:12px;
    padding:28px;

    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: column;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    justify-content: space-between;
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.info .title{
    color:#333;
    font-size:26px;
    font-weight: 400;
}
.intro .info div:nth-of-type(1){
    border-top: solid 5px #4872f6;
}
.info .active{
    color:#4872f6;
}
.info p{
    color:gray;
}
.info a{
    color:#4872f6;
    text-decoration: none;
}

.sence{
    padding: 90px;
    height:885px;
    background: linear-gradient(0deg, #ffffff, #edf1f9);

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.sence .list{
    list-style:none;
    background-color:white;
    width:725px;
    height:42px;
    border-radius:21px;

    display:flex;
    justify-content: space-evenly;
}
.list li{
    height:42px;
    width:145px;
    border-radius:21px;
    text-align:center;
    line-height: 42px;
    font-size:14px;
    font-weight:400;
}
.list li:nth-of-type(1){
    background-color:#4872f6;
    color:white;
}
.sence .info{
    background-color:#f5f8fc;
    width:1263px;
    height:527px;
    display: flex;
    flex-direction: row;
    border-radius:12px;
    overflow:hidden;
    border:solid 5px white;
}
.sence .info img{
    width:650px;
    height:527px;
}
.sence .info .msg{
    width:100%;
    height:100%;
    padding: 50px;
}
.sence .msg h2{
    font-size:32px;
}
.sence .msg h3{
    font-size:26px;
    font-family: "黑体";
    font-weight:400;
}
.sence .msg ul{
    list-style:none;
    /* list-style-image: url(../images/ul.png); */
    /* list-style-position: inside; */
    color:gray;
    height:200px;
    /* background-color:#819cf8; */

    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.sence .msg ul li{
    background-image:url("../images/ul.png");
    background-repeat: no-repeat;
    background-position: 0 10px;
    padding-left:25px;
}
.msg .btns{
    display:flex;
    gap: 20px;
}

.industry{
    color: #fff;
    height:732px;
    background-image: url("../images/行业背景图.png");
    /* 设置背景图片，值-`url(图片相对路径) */
    background-size: cover;
        /*设置背景图片尺寸，宽度、高度*/
    /* background-repeat: no-repeat;
         设置背景图片排列方式，默认x轴、y轴无限循环 */
    background-position:center;
        /*  设置背景图片出现的位置 */
    
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: column;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    justify-content: space-evenly;
    /* align-items: center;
    `交叉轴方向的对齐方式(start\|center\|end) */
    align-items: center;

    /* justify-content: space-between; 
    主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.industry h1{
    color:white;
}
/*
.标签的class属性值 {
    样式代码
}class选择器
父选择器  子选择器 {
    样式代码
}进阶 - 后代选择器
*/
.industry .he{
    width: 1268px;
    height: 459px;
    background: #39414C4D;
    border-radius:12px;
    overflow:hidden;
    backdrop-filter: blue(5px);
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    /* flex-direction: row; */
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    /* align-items: center; */
    /* `交叉轴方向的对齐方式(start\|center\|end) */

    /* justify-content: space-between;  */
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.zuo{
    width: 181px;
    height: 457px;
    background-color: #2e3646;
    padding:28px 21px;

    display:flex;
    flex-direction: column;
    gap:20px;
}
.zuo div:nth-of-type(1),
.zuo div:nth-of-type(2),
.zuo div:nth-of-type(3),
.zuo div:nth-of-type(4){
    width:146px;
    height: 56px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* 光标：指针 */
}
.zuo > div:nth-of-type(3){
    background: linear-gradient(90deg, #3e59af, #2e3646);
}
.zhuong{
    padding: 35px;
    color:white;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    font-size:13px;
}
.zhuong h2{
    font-size:26px;
}
.zhuong .msg{
    width:600px;
    display:flex;
    gap:20px;
    flex-wrap: wrap;
}
.msg div:nth-of-type(1),
.msg div:nth-of-type(2),
.msg div:nth-of-type(3),
.msg div:nth-of-type(4),
.msg div:nth-of-type(5),
.msg div:nth-of-type(6),
.msg div:nth-of-type(7),
.msg div:nth-of-type(8)
{
    width:75px;
    height: 75px;
    border:solid 1px #666;
    border-radius:4px;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.msg div:nth-of-type(1) img{
    width:30px;
    height:30px;
}
.zhuong .btns{
    display:flex;
    gap: 20px;
    margin-top:10px;
}
.btns div:nth-of-type(1),
.btns div:nth-of-type(2){
    transition: .2s all;
    /* 过渡：2s全部； */
    cursor:pointer;
    /* 游标：指针； */
    width:100px;
    height:40px;
    line-height: 40px;
    text-align:center;
    /* 文本对齐：居中； */
    border:solid 1px #4872f6;
    /* 边框：实心 */
    border-radius:5px;
    /* 边框半径：5px； */
    background-color:white;
    color:#4872f6;

}
.btns div:nth-of-type(1),
.btns div:nth-of-type(2):hover
{
    color:white;
    background-color:#4872f6;
}
.you{
    width:200px;
    height:100%;
    padding:50px;
}
.you h4{
    padding-left:10px;
    padding-bottom:50px;
    font-size:18px;
    font-weight:500;
    color:white;
}
.you div{
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    width:200px;
}
.you div img{
    width:83px;
    height: 83px;
}


.tech{
    padding: 90px;
    height: 658px;
    background-color:rgb(248, 248, 248);
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: column;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    align-items: center;
    /* `交叉轴方向的对齐方式(start\|center\|end) */

    justify-content: space-between; 
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.service{
    height: 734px;
    padding: 90px;
    background-color:rgb(248, 248, 248);
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: column;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    align-items: center;
    /* `交叉轴方向的对齐方式(start\|center\|end) */

    justify-content: space-between; 
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.service .nierong{
    width: 1700px;
    height: 334px;
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: row;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    align-items: center;
    /* `交叉轴方向的对齐方式(start\|center\|end) */

    justify-content: space-between; 
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.nierong .title{
    font-size: 21px;
    color: #333333;
}
.nierong .desc{
    font-size: 15px;
    color: #666666;
}
.xiaoet{
    height:1058px; 
    background-color:rgb(206, 229, 243);
    padding: 90px;
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: column;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    align-items: center;
    /* `交叉轴方向的对齐方式(start\|center\|end) */

    justify-content: space-between; 
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.xiaoet .div{
    width: 150px;
    height: 20px;
    color: #666666
    
}
.advisory{
    color: #fff;
    height:264px;
    background-color:rgb(5, 54, 249);
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: column;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    align-items: center;
    /* `交叉轴方向的对齐方式(start\|center\|end) */

    justify-content: space-between; 
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.message{
    height:721px;
    background-color:rgb(36, 36, 36);
    color: #fff;
    display:flex;
    /* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
    flex-direction: column;
    /* 样式修改主轴方向 */
    /* 弹性样式的主轴方向，默认水平方向(行)
    row: 水平-从左到右依次排列
    row-reverse：水平-从右到左依次排列
    column:垂直-从上到下依次排列
    column-reverse：垂直-从下到上一次排列
     */
    align-items: center;
    /* `交叉轴方向的对齐方式(start\|center\|end) */

    justify-content: space-between; 
    /* 主轴方向对齐方式    space-between 从左到右平均分布，两侧不留空隙 */
}
.listo{
    list-style:none;
    background-color:white;
    width:725px;
    height:42px;
    border-radius:21px;

    display:flex;
    justify-content: space-evenly;
}

最终效果