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

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

news 2025/7/1 18:05:52

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

最终效果