作业描述：模仿小鹅通首页页面，完整开发页面效果
网页代码
使用Trae CN工具编写代码，如下：
<!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="./font_6vvdu4f51wp/iconfont.css">
</head>
<link rel="stylesheet" href="./小鹅通.css">
<body>
<div class="bg header-nav">
<div class="we-content">
<div class="header">
<div class="nav1">
<div class="content">
<ul class="left1">
<li class="logo"><img src="./img/下载 (1).png" alt=""></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>
<li><a href="#">关于我们</a></li>
</ul>
<ul class="right1">
<li>我是学员</li>
<li>商家登录</li>
<li>免费试用</li>
</ul>
</div>
</div>
<div class="tupian"><img src="./img/m3mff1pw0det.webp" alt="" srcset=""></div>
</div>
</div>
</div>
<div class="bg er">
<div class="contents">
<div class="chanpin">
<div class="biaoti">我们的产品能力</div>
<div class="banner">
<img src="./img/m0p7w1en09hz.png" alt="" srcset="">
</div>
<div class="jieshao">
<div class="active">
<h3>知识店铺</h3>
<p>"1分钟搭建您的知识商城" <br>
"助力高效知识变现"</br> </p>
<p>免费适用</p>
</div>
<div class="active">
<h3>私域直播</h3>
<p>"企业级专属私域直播平台"
<br>"实现私域流量高效运营"</br>
</p>
<p>免费适用 </p>
</div>
<div class="active">
<h3>企微SCRM</h3>
<p>"1分钟搭建您的知识商城"
<br>"助力高效知识变现"</br>
</p>
<p>免费适用 </p>
</div>
</div>
</div>
</div>
</div>
<div class="bg san">
<div class="contents">
<div class="beijin">
<div class="content1">
<div class="title">我们的场景解决方案</div>
<ul class="nav">
<li class="active1">公域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数据化运营</li>
</ul>
<div class="zhengti">
<div class="tupian1">
<div class="left3"><img src="./img/m10c72vn0zzo.png" alt="" class="src"></div>
</div>
<div class="right3">
<h3>公域获客</h3><br>
<h4>多渠道获客，沉淀私域流量池</h4><br>
<p>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</p><br>
<p>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</p><br>
<p>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景,提升广告ROI</p><br>
<div class="btns">
<div>免费试用</div>
<div>了解详情</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg si">
<div class="contents">
<span>我们的行业解决方案</span>
<div class="fangan1">
<div class="left">
<ul>
<li>新零售门店</li>
<li>职业培训</li>
<li>知识付费</li>
<li>美业直播</li>
</ul>
</div>
<div class="right">
<li>新零售门店解决方案</li><br>
<li>私域直播带货+ 推广门店体系，助力商家私域流量高效变现</li><br>
<div class="tubiao">
<li><i class="iconfont icon-shezhi "></i>知识店铺</li>
<li><i class="iconfont icon-shouye"></i>圈子</li>
<li><i class="iconfont icon-yonghuguanli"></i>等级管理</li>
</div>
<div class="an">
<div class="btns1">免费使用</div>
<div class="btns2">了解详情</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg wu">
<div class="contents">
<span>我们的技术优势</span>
<div class="youshi">
<div class="overlay"></div>
<div class="wending">
<div class="w">
超稳定
多云负载均衡/全球CDN加速
</div>
<div class="tu1">
<img src="./img/tu1.webp" alt="">
</div>
</div>
<div class="bingfa">
<div class="w">
高并发
支持多用户同时在线
</div>
<div class="tu2">
<img src="./img/tu2.webp" alt="">
</div>
</div>
<div class="liuchang">
<div class="w">
超流畅
观看端自动探测并自动跨云线路切换
</div>
<div class="tu3">
<img src="./img/tu3.webp" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg liu">
<div class="we-content">
<span>我们的运营服务</span>
<div class="fuwu">
<div class="f">
<img src="./img/f1.webp" alt=""><br>
社群服务<br>
标杆商家分享，同行商家交流，总比别人快一步
</div>
<div class="f">
<img src="./img/f2.webp" alt=""><br>
管家服务<br>
客户经理、服务管家、多角色在群，服务全面包围
</div>
<div class="f">
<img src="./img/f3.webp" alt=""><br>
大客服务<br>
设置夜班服务管家/假期值班管家,24小时在线服务,<br>
服务从不掉线
</div>
<div class="f">
<img src="./img/f4.webp" alt=""><br>
运维服务<br>
需求24小时反馈,需求处理率大于90% ,产品经理1v1回复
</div>
</div>
</div>
</div>
<div class="bg qi">
<div class="we-content">
<span>他们都在用小鹅通</span>
<div class="paiming">
<div class="qian">
<div class="p1">
<img src="./img/p1.webp" alt=""><br>
小能熊科学学习
小能熊学院以学习科学化为使命，专注提供学习方法和自我管理解决方案，陪伴严肃、耐心、永不妥协的终生学习者！
</div>
<div class="p1">
<img src="./img/p2.webp" alt=""><br>
刘润·进化的力量
刘润，润米咨询创始人，“5分钟商学院”课程主理人，著名商业顾问，曾为海尔、中远、恒基、百度等企业提供过战略咨询服务，每年10月举办“进化的力量·年度演讲”，为创业者企业家提供年度规划的参考方向，一起更早看到未来。使命：降低商业的认知门槛。
</div>
<div class="p1">
<img src="./img/f3.webp" alt=""><br>
佰君易直播间
佰君易直播间，由培养过10万项目管理师的王远航老师打造，为各行业提供项目管理实战培训。佰君易直播间与小鹅通深度合作，帮助职场小伙伴升职加薪
</div>
</div>
<div class="hou"></div>
</div>
</div>
</div>
<div class="bg ba">
<div class="contents">
<div class="l">立即扫码咨询，领取您的专属解决方案</div>
<div class="t">
<div class="saoma">
<img src="./img/扫码.webp" alt="">
</div>
<div class="tianjia">扫码添加客户经理或者您也可以先
<div class="btn4">免费试用</div>
</div>
</div>
</div>
</div>
<div class="bg jiu">
<div class="we-content">
<div class="shang">
<div class="1">
<p>场景</p><br>
全域获客<br>
私域运营<br>
直播带货<br>
内容交付<br>
数据化运营<br>
企业内训<br>
</div>
<div class="2">
<p>行业</p><br>
零售电商<br>
职业培训<br>
知识付费<br>
企业营销<br>
美业直播<br>
企业培训<br>
社区团购<br>
营销会务<br>
</div>
<div class="3">
<p>产品</p><br>
知识店铺<br>
私域直播<br>
企微 SCRM<br>
企学院<br>
智能投放<br>
海外版 eLink<br>
小鹅云<br>
</div>
<div class="4">
<p>服务</p><br>
小鹅创业社区<br>
本地社群<br>
教练联盟<br>
小鹅通训练营<br>
对话标<br>
</div>
<div class="5">
<p>关于我们</p><br>
公司简介<br>
加入我们<br>
媒体报道<br>
更多资讯<br>
客户案例<br>
帮助中心<br>
</div>
<div class="6">
<p>媒体报道</p><br>
D轮融资1.2亿美元，小鹅通究竟在做什么？<br>
知识付费用户达5.27亿，内容创业的下半场风口在“服务”<br>
知识工作者的终极梦想，可能是拥有一个“第二大脑”<br>
小鹅通：让知识更有价值<br>
小鹅通联合艾瑞咨询发布《2023年中国私域运营洞察<br>
</div>
<div class="7">
<p>400-102-6665</p><br>
周一至周日 9:00-21:00<br>
<div class="e"><img src="./img/二维码.png" alt=""></div>
关注小鹅通公众号<br>
<div class="e"><img src="./img/二维码.png" alt=""></div>
进入小鹅创业社区<br>
</div>
</div>
<div class="xia">
<ul>
<li>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</li>
<li>商务合作：support@xiaoe-tech.com</li>
<li>互联网违法和不良信息举报电话：0755-26409534</li>
</ul>
<ul>
<li>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</li>
<li>渠道合作：partner@xiaoe-tech.com</li>
<li>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</li>
</ul>
<ul>
<li>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</li>
<li>投诉意见：xiaoeks@xiaoe-tech.com</li>
<li>安全漏洞反馈邮箱：security@xiaoe-tech.com</li>
</ul>
</div>
<div class="heng">
友情链接
知识付费软件
知识付费平台
小鹅通企学院
私域直播工具
小鹅通APP
小鹅创业社区
小鹅通移动版
小鹅通学员版
</div>
</div>
</div>
</body>
</html>
css
.bg {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.we-content {
width: 1800px;
}
.contents {
width: 1400px;
}
.header-nav we-content {
height: 600px;
/* background-color: antiquewhite; */
}
.er .contents {
height: 1000px;
/* background-color: antiquewhite; */
}
.san .contents {
height: 1000px;
/* background-color: azure; */
}
.si .contents {
height: 745px;
background-color: rgb(0, 234, 255);
}
.wu .contents {
height: 500px;
/* background-color: orange */
}
.liu .we-content {
height: 600px;
/* background-color: brown; */
}
.qi .we-content {
height: 1000px;
background: linear-gradient(135deg, white, rgba(0, 183, 255, 0.282));
}
.ba .contents {
height: 200px;
background-color: #4872f6;
}
.jiu .we-content {
height: 700px;
background-color: #06192c;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.body {
overflow-x: hidden;
}
.header {
width: 100%;
height: 600px;
/* background-color: #9aa7d3; */
}
.nav1 {
background-color: #fff;
background-color: transparent;
height: 72px;
display: flex;
justify-content: center;
transition: all .2s;
}
.nav1:hover {
transition: all .2s;
background-color: #fff;
}
.content {
width: 2000px;
height: 72px;
display: flex;
justify-content: space-between;
}
ul {
list-style: none;
}
.left1 {
display: flex;
align-items: center;
gap: 20px;
}
.left1 a {
color: #333;
text-decoration: none;
}
.left1 a {
color: #4872f6;
}
.logo img {
width: 120px;
height: 36px;
}
.right1 {
display: flex;
align-items: center;
gap: 30px;
align-items: center;
}
.right1 li:nth-of-type(1) {
cursor: pointer;
color: #333;
}
.right1 li:nth-of-type(2),
.right li:nth-of-type(3) {
color: #4872f6;
}
.right1 li:nth-of-type(2) {
width: 100px;
height: 45px;
border: solid 1px #4872f6;
border-radius: 8px;
text-align: center;
line-height: 45px;
color: #4872f6;
background-color: #f2f2f1;
transition: all .2s;
cursor: pointer;
}
.right1 li:nth-of-type(2):hover {
background-color: #4872f6;
color: white;
transition: all .2s;
}
.right1 li:nth-of-type(3) {
background-color: #4872f6;
color: white;
width: 100px;
height: 45px;
border-radius: 8px;
text-align: center;
line-height: 45px;
cursor: pointer;
}
.right1 li:nth-of-type(3):hover {
background-color: #9aa7d3;
color: white;
transition: all .2s;
}
.tupian {
width: 100%;
height: 528px;
/* background-color: aqua; */
position: relative;
}
.tupian img {
width: 100%;
position: absolute;
top: -72px;
z-index: -1;
}
.biaoti {
text-align: center;
font-family: PingFang SC;
font-size: 40px;
font-weight: 600;
align-items: center;
}
.chanpin {
width: 100%;
height: 1000px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-evenly;
background: linear-gradient(177deg, #fff, #eef1fc);
}
.banner img {
width: 1440px;
height: 560px;
border-radius: 25px;
}
.jieshao {
display: flex;
gap: 30px;
}
.jieshao div {
border-radius: 10px;
padding: 30px;
width: 460px;
height: 220px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.jieshao div h3 {
font-size: 30px;
font-family: "微软雅黑";
font-weight: 500;
}
.jieshao div p {
color: #888;
}
.jieshao div p a {
text-decoration: none;
color: #4872f6;
}
.jieshao div.active {
border-top: solid 5px #4872f6;
}
.jieshao div.active h3 {
color: #4872f6;
}
.beijin {
/* background-color: rgb(207, 240, 229); */
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.content1 {
/* background-color: rgb(250, 192, 221); */
color: #333;
width: 1400px;
height: 100%;
display: flex;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
}
.title {
font-size: 38px;
font-weight: 600;
}
.nav {
height: 50px;
width: 850px;
/* background-color: gold; */
border-radius: 25px;
list-style: none;
display: flex;
justify-content: space-between;
}
.nav li {
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
}
.nav li.active1 {
background-color: #4872f6;
color: #fff;
border-radius: 25px;
}
.zhengti {
width: 100%;
height: auto;
border-radius: 10px;
overflow: hidden;
border: solid 5px #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
}
.tupian1 {
/* background-color: blueviolet; */
height: 600px;
border-radius: 10px;
border: solid 2px #fff;
overflow: hidden;
display: flex;
}
/* .left3, */
.left3 img {
/* width: 100%; */
height: 600px;
}
.right3 {
flex: 1;
height: 600px;
/* background-color: coral; */
padding: 50px;
}
.right3 h3 {
font-size: 28px;
}
.right3 h4 {
font-size: 26px;
font-weight: 400;
}
.right3 p {
color: gray;
}
.right3 .btns {
display: flex;
gap: 30px;
}
.right3 .btns div {
width: 100px;
height: 38px;
border: solid 1px #4872f6;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: #4872f6;
cursor: pointer;
}
.right3 .btns div:nth-of-type(1) {
background-color: #4872f6;
color: #fff;
}
.btns {
display: flex;
gap: 30px;
/* border: solid 1px #4872f6; */
border-radius: 5px;
text-align: center;
line-height: 38px;
color: #4872f6;
cursor: pointer;
}
.si .contents {
background-image: url(./img/黑.webp);
background-size: cover;
background-repeat: no-repeat;
width: 1400px;
height: 748px;
}
.si .contents {
width: 1400px;
height: 748px;
color: #fff;
align-items: center;
display: flex;
/* justify-content: center; */
flex-direction: column;
}
.si .contents span {
font-size: 38px;
font-weight: 600;
height: 200px;
/* background-color: #bd4242; */
line-height: 200px;
}
.fangan1 {
width: 1000px;
height: 450px;
/* background-color: aquamarine; */
font-size: 18px;
display: flex;
/* justify-content: space-around; */
}
.fangan1 .left ul {
width: 200px;
height: 250px;
display: flex;
flex-direction: column;
justify-content: space-between;
list-style-type: none;
/* align-items: center; */
/* background-color: rgb(245, 164, 59); */
color: #ffffff;
}
.right {
width: 800px;
list-style: none;
color: #fff;
display: flex;
flex-direction: column;
/* background-color: #41dc99; */
font-size: 25px;
}
.right .tubiao {
display: flex;
height: 70px;
color: #fff;
}
.an {
display: flex;
}
.btns1 {
width: 140px;
height: 38px;
background-color: #4872f6;
border: solid 1px #4872f6;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: #ffffff;
cursor: pointer;
}
.btns2 {
width: 140px;
height: 38px;
border: solid 1px #4872f6;
border-radius: 5px;
text-align: center;
line-height: 38px;
color: #4872f6;
cursor: pointer;
}
.si .right .iconfont {
font-size: 40px;
}
.wu .contents {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.wu span {
/* background-color: #49dfe4; */
color: #333;
width: 500px;
height: 200px;
font-size: 60px;
font-weight: 600;
text-align: center;
line-height: 200px;
}
.wu .youshi {
display: flex;
justify-content: center;
}
.wending {
position: relative;
width: 230px;
height: 266px;
}
.bingfa {
position: relative;
width: 230px;
height: 266px;
}
.liuchang {
position: relative;
width: 410px;
height: 266px;
}
.tu1 img {
width: 230px;
height: 266px;
}
.tu2 img {
width: 230px;
height: 266px;
}
.tu3 img {
width: 410px;
height: 266px;
}
.w {
position: absolute;
font-size: 25px;
font-weight: 50px;
color: #f8f2f2;
/* background-color: #4872f6; */
height: 266px;
display: flex;
align-items: center;
}
.liu .we-content {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.fuwu {
/* background-color: chartreuse; */
width: 100%;
height: 600px;
display: flex;
justify-content: space-between;
align-items: center;
}
.liu span {
/* background-color: #49dfe4; */
color: #333;
width: 500px;
height: 200px;
font-size: 60px;
font-weight: 600;
text-align: center;
line-height: 200px;
}
.f {
font-size: 20px;
font-weight: 200px;
color: #fff;
}
.f img {
width: 400px;
height: auto;
}
.qi span {
/* background-color: #49dfe4; */
color: #333;
width: 500px;
height: 150px;
font-size: 60px;
font-weight: 600;
text-align: center;
line-height: 150px;
}
.we-content {
display: flex;
flex-direction: column;
align-items: center;
}
.paiming {
display: flex;
flex-direction: column;
width: 100%;
height: 800px;
/* background-color: hotpink; */
}
.paiming .qian {
width: 1800px;
height: 400px;
/* background-color: rgb(214, 145, 119); */
display: flex;
justify-content: space-around;
}
.p1 {
height: 400px;
width: 500px;
/* background-color: #bd4242; */
}
.p1 img {
height: 266px;
width: auto;
}
.paiming .hou {
flex: 1;
width: 1800px;
background-color: #4872f6;
background-image: url(./img/后.jpeg);
background-size: cover;
background-repeat: no-repeat;
}
.ba .contents {
/* background-color: rgb(9, 237, 161); */
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ba .l {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
/* background-color: #bd4242; */
color: #fff;
font-size: 30px;
font-weight: 600;
}
.t {
width: 200px;
height: 90px;
display: flex;
/* background-color: palevioletred; */
}
.saoma img {
width: 75px;
height: 75px;
}
.tianjia {
width: 125px;
height: 135px;
}
.ba .btn4 {
width: 100px;
height: 30px;
border: solid 1px #4872f6;
border-radius: 8px;
text-align: center;
line-height: 30px;
color: #4872f6;
background-color: #f2f2f1;
transition: all .2s;
cursor: pointer;
}
.jiu .we-content {
display: flex;
color: white;
font-size: 18px;
}
.jiu p {
font-size: 23px;
font-weight: 800;
}
.jiu .e img {
width: 110px;
height: 110px;
}
.jiu .shang {
display: flex;
width: 1600px;
height: 400px;
/* background-color: #bd4242; */
justify-content: space-between;
margin-top: 100px;
}
.xia {
color: white;
font-size: 18px;
width: 1600px;
height: 100px;
/* background-color: rgb(152, 103, 207); */
display: flex;
justify-content: space-between;
}
.heng {
width: 1600px;
height: 30px;
border: solid #ffffff 3px;
/* background-color: lightpink; */
}
