作业分析
本次要求编写较为完整的小鹅通页面，效果如下图
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.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/style.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<div class="header">
<div class="ab">
<div class="yetou">
<ul class="ultwo">
<li><img src="./img/01.png" alt="">
<li>
<li>首页</li>
<li>解决方案</li>
<li>产品服务</li>
<li>价格</li>
<li>活动</li>
<li>案例</li>
<li>渠道合作</li>
<li>下载与帮助</li>
<li>关于我们</li>
</ul>
<div class="cd">
<div>我是学员</div>
<div>商家登录</div>
<div>免费试用</div>
</div>
</div>
<div class="banner">
<img src="./img/02.webp" alt="">
</div>
</div>
</div>
<div class="bg chanpin">
<div class="content biaoti">我们的产品能力</div>
<div><img src="./img/03.webp" alt=""></div>
<div class="jieshao">
<div class="active">
<h3>知识店铺</h3>
<p>1分钟搭建您的知识商城<br>
助力高效知识变现</p>
<p><a href="#">免费试用 →</a></p>
</div>
<div class="active">
<h3>私域直播</h3>
<p>企业级专属私域直播平台<br>
实现私域流量高效运营</p>
<p><a href="#">免费试用 →</a></p>
</div>
<div class="active">
<h3>企微SCRM</h3>
<p>企业微信私域运营神器<br>
数据洞察驱动业绩增长</p>
<p><a href="#">免费试用 →</a></p>
</div>
</div>
</div>
<div class="bg changjing">
<div class="content biaoti">我们的场景解决方案</div>
<ul class="nav">
<li class="tt">公域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>类容交付</li>
<li>数字化运营</li>
</ul>
<div class="into">
<div class="left">
<img src="./img/04.webp" alt="">
</div>
<div class="right">
<h3>公域获客</h3>
<h4>多渠道获客，沉淀私域流量池</h4>
<p>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</p>
<p>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</p>
<p>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</p>
<div class="btens">
<div>免费试用</div>
<div>了解详情</div>
</div>
</div>
</div>
</div>
<div class="bg hangye">
<div class="content timu">我们的行业解决方案</div>
<div class="fg">
<div class="cl">
<ul class="ulone">
<li class="a"><i class="iconfont icon-gouwu"></i>新零售门店</li>
<li class="a"><i class="iconfont icon-gongju"></i>职业培训</li>
<li class="a"><i class="iconfont icon-dengpao"></i>知识付费</li>
<li class="a"><i class="iconfont icon-nvren-01"></i>美业直播</li>
</ul>
</div>
<div class="jjfa">
<div class="one1">
<h7>新零售门店解决方案</h7>
<h8>私域直播带货+ 推广门店体系，助力商家私域流量高效变现</h8>
</div>
<div class="one2">
<div class="zhao">
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-dianpu"></i><br>
直播带货</li>
</ul>
</div>
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-biaoge"></i><br>
在线商城</li>
</ul>
</div>
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-flag"></i><br>
门店管理</li>
</ul>
</div>
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-mendianhexiao"></i><br>
门店核销</li>
</ul>
</div>
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-erweima"></i><br>
渠道活码</li>
</ul>
</div>
</div>
<div class="zhao">
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-liwu"></i><br>
直播抽奖</li>
</ul>
</div>
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-bangdan"></i><br>
邀请达人榜</li>
</ul>
</div>
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-naozhong"></i><br>
商品秒杀</li>
</ul>
</div>
<div class="xgz">
<ul class="xfgz">
<li><i class="iconfont icon-hongbao"></i><br>
直播红包</li>
</ul>
</div>
</div>
</div>
<div class="one3">
<div>免费试用</div>
<div>了解详情</div>
</div>
</div>
<div class="hyal">
<div class="b">行业案例</div>
</div>
</div>
</div>
<div class="bg jishu">
<div class="content biaoti">我们的技术优势</div>
<div class="gao">
<div class="chao">
<div class="xiaobt">超稳定</div>
<div class="xz"><i class="iconfont icon-gou"></i>多云负载均衡/全球CDN加速</div>
</div>
<div class="fa">
<div class="xiaobt">高并发</div>
<div class="xz"><i class="iconfont icon-gou"></i>支持多用户同时在线</div>
</div>
<div class="liu">
<div class="xiaobt">超流畅</div>
<div class="xz"><i class="iconfont icon-gou">观看端自动探测并自动跨云线路切换</i></div>
</div>
</div>
</div>
<div class="bg yunying">
<div class="content biaoti">我们的运营服务</div>
<div class="sige">
<div class="two">
<div class="beijin sq"></div>
<div class="xbt">
<h8>社群服务</h8>
<h9>标杆商家分享，同行商家交流，总比别人快一步</h9>
</div>
</div>
<div class="two">
<div class="beijin gj"></div>
<div class="xbt">
<h8>管家服务</h8>
<h9>客户经理、服务管家、多角色在群，服务全面包围</h9>
</div>
</div>
<div class="two">
<div class="beijin dk"></div>
<div class="xbt">
<h8>大客服务</h8>
<h9>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</h9>
</div>
</div>
<div class="two">
<div class="beijin yw"></div>
<div class="xbt">
<h8>运维服务</h8>
<h9>需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</h9>
</div>
</div>
</div>
</div>
<div class="bg xiaoetong">
<div class="w-content biaoti">他们都在用小鹅通</div>
<div class="xbiaot">（*排名不分先后顺序）</div>
<div class="sangge">
<div class="xiaoxong">
<div class="tupiana"></div>
<div class="wen">
<h11>小能熊科学学习</h11>
<h10>小能熊学院以学习科学化为使命，专注提供学习方法和自我管理解决方案，陪伴严肃、耐心、永不妥协的终生学习者！</h10>
</div>
</div>
<div class="xiaoxong">
<div class="tupianb"></div>
<div class="wen">
<h11>刘润·进化的力量</h11>
<h10>刘润，润米咨询创始人，“5分钟商学院”课程主理人，著名商业顾问，曾为海尔、中远、恒基、百度等企业提供过战略咨询服务，每年10月举办“进化的力量·年度演讲”，为创业者企业家提供年度....
</h10>
</div>
</div>
<div class="xiaoxong">
<div class="tupianc"></div>
<div class="wen">
<h11>佰君易直播间</h11>
<h10>佰君易直播间，由培养过10万项目管理师的王远航老师打造，为各行业提供项目管理实战培训。佰君易直播间与小鹅通深度合作，帮助职场小伙伴升职加薪</h10>
</div>
</div>
</div>
<div class="guanggao">
<div class="ren yi1"></div>
<div class="ren er1"></div>
<div class="ren san1"></div>
<div class="ren si1"></div>
<div class="ren wu1"></div>
<div class="ren niu1"></div>
</div>
<div class="guanggao">
<div class="ren yi2"></div>
<div class="ren er2"></div>
<div class="ren san2"></div>
<div class="ren si2"></div>
<div class="ren wu2"></div>
<div class="ren niu2"></div>
</div>
<div class="dibu">
<div class="gengduo">查看更多案例></div>
</div>
</div>
<div class="bg saoma">
<div class="w-content timu">立即扫码咨询，领取您的专属解决方案</div>
<div class="drbf">
<div class="ewm">
<img src="./img/31.webp" alt="">
</div>
<div class="khjl">
<div class="zhi">
<h12>扫码添加客户经理</h12>
<h13>或者您也可以先</h13>
</div>
<div class="miamfei">
<div class="fei">免费试用</div>
</div>
</div>
</div>
</div>
<div class="bg footer">
<div class="content heikuang">
<div class="wenzhi">
<div class="xiaozhi">
<ul class="da">
<li class="pdd">场景</li>
<li>全域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数据化运营</li>
<li>企业内训</li>
</ul>
<ul class="da">
<li class="pdd">行业</li>
<li>零售电商</li>
<li>职业培训</li>
<li>知识付费</li>
<li>企业营销</li>
<li>美业直播</li>
<li>企业培训</li>
<li>社区团购</li>
<li>营销会务</li>
</ul>
<ul class="da">
<li class="pdd">产品</li>
<li>知识店铺</li>
<li>私域直播</li>
<li>企微 SCRM</li>
<li>企学院</li>
<li>智能投放</li>
<li>海外版 eLink</li>
<li>小鹅云</li>
</ul>
<ul class="da">
<li class="pdd">服务</li>
<li>小鹅创业社区</li>
<li>本地社群</li>
<li>教练联盟</li>
<li>小鹅通训练营</li>
<li>对话标杆</li>
</ul>
<ul class="da">
<li class="pdd">关于我们</li>
<li>公司简介</li>
<li>加入我们</li>
<li>媒体报道</li>
<li>更多资讯</li>
<li>客户案例</li>
<li>帮助中心</li>
</ul>
</div>
<div class="dazhi">
<div class="meiti">
<ul class="da">
<li class="pdd">媒体报道</li>
<li>D轮融资1.2亿美元，小鹅通究竟在做什么？</li>
<li>知识付费用户达5.27亿，内容创业的下半场风口在“</li>
<li>知识工作者的终极梦想，可能是拥有一个“第二大脑”</li>
<li>小鹅通：让知识更有价值</li>
<li>小鹅通联合艾瑞咨询发布《2023年中国私域运营</li>
</ul>
</div>
<div class="gzh">
<div class="dianhua">
<h14>400-102-6665</h14>
<h15>周一至周日 9:00-21:00</h15>
</div>
<div class="erweima">
<div class="guanzhu">
<img src="./img/32.png" alt="">
<h15>关注小鹅通公众号</h15>
</div>
<div class="chuanye">
<img src="./img/33.jpg" alt="">
<h15>进入小鹅创业社区</h15>
</div>
</div>
</div>
</div>
</div>
<div class="dizhi">
<ul class="da">
<li>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</li>
<li>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</li>
<li>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</li>
</ul>
<ul class="da">
<li>商务合作：support@xiaoe-tech.com</li>
<li>渠道合作：partner@xiaoe-tech.com</li>
<li>投诉意见：xiaoeks@xiaoe-tech.com</li>
</ul>
<ul class="da">
<li>互联网违法和不良信息举报电话：0755-26409534</li>
<li>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</li>
<li>安全漏洞反馈邮箱：security@xiaoe-tech.com</li>
</ul>
</div>
<div class="xiaocd">
<div class="osng">友情链接</div>
<div class="osng">知识付费软件</div>
<div class="osng">知识付费平台</div>
<div class="osng">小鹅通企学院</div>
<div class="osng">私域直播工具</div>
<div class="osng">小鹅通APP</div>
<div class="osng">小鹅创业社区</div>
<div class="osng">小鹅通移动版</div>
<div class="osng">小鹅通学员版</div>
</div>
<div class="kuaibao">
<div class="bao">
<div><img src="./img/34.png" alt=""></div>
<div>抗菌抗病毒”口罩消费风险提示</div>
</div>
<div class="osng">工商营业执照</div>
<div class="osng">
<div class="jing">粤公网安备 44030502002037号</div>
<div class="jing">工商网监 电子标识</div>
</div>
</div>
<div class="dbdz">
<div class="gongshi">
<div>Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved. </div>
<div>粤ICP备15020529号-1</div>
</div>
<div class="disang">
<div>互联网药品信息服务资格证书（粤）—经营性—2020—0589</div>
<div>医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------------------
style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
.bg{
width: 100%;
display: flex;
justify-content: center;
}
.contont{
width: 1400px;
}
.w-contont{
width: 1800px;
}
/* 页头部分*/
.header{
height: 600px;
}
.ab{
width: 100%;
height: 72px;
display: flex;
justify-content: center;
flex-direction: column;
/* border-bottom: solid 1px #ddd; */
background-color: transparent;
}
.ab:hover{
background-color: #fff;
transition: all.2s;
}
.yetou{
height: 72px;
display: flex;
justify-content: space-between;
}
.ultwo{
width: 800px;
height: 72px;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
li{
cursor: pointer;
}
li:hover{
font-weight: 700;
}
li img{
width: 100px;
height: 30px;
}
.cd{
width: 500px;
height: 72px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.cd div:nth-of-type(1):hover{
color:#4872f6;
font-weight:600;
cursor: pointer;
}
.cd div:nth-of-type(2),
.cd div:nth-of-type(3){
width:120px;
height: 38px;
border: solid 1px #4872f6;
color: #4872f6;
background-color: #fff;
text-align: center;
line-height: 38px;
border-radius: 10px;
font: weight 300px;
font-size: 16px;
cursor: pointer;
transition: all .2s;
}
.cd div:nth-of-type(2):hover,
.cd div:nth-of-type(3){
background-color: #4872f6;
color: white;
transition: all .2s;
}
.cd div:nth-of-type(3):hover{
background-color: #4161c994;
color: white;
transition:all .2s ;
}
.banner{
width: 100%;
height: 600px;
position: relative;
background-color: blue;
}
.banner img{
height: 600px;
position: absolute;
top: -72px;
left: -250px;
z-index: -1;
}
.chanpin{
height: 1000px;
background:linear-gradient(177deg,#fff,#dde2f3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.biaoti{font-size: 44px;
font-weight: 600;}
.chanpin img{
height: 600px;
}
.jieshao{display: flex;
gap: 30px;
}
.jieshao div{
border-radius: 10px;
padding: 30px;
width: 460px;
height: 220px;
background-color:white;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.jieshao div h3{
font-size: 30px;
font-family:"微软雅黑";
font-weight: 500;
}
.jieshao div p{
color: #888;
}
.jieshao div.active{
border-top: solid 5px #4872f6;
}
.jieshao div.active h3{
color: #4872f6;
}
.changjing{
height: 1000px;
background:linear-gradient(177deg,#fff,#dde2f3);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.nav{
width: 850px;
height: 50px;
border-radius: 25px;
background-color:#fff;
list-style: none;
display: flex;
justify-content: space-between;
}
.nav li{
width: 130px;
height: 50px;
text-align: center;
line-height: 50px;
}
.nav li.tt{
background-color: #4872f6;
color: #fff;
border-radius: 25px;
}
.changjing img{
height: 600px;
}
.into{
width: 1400px;
height: 600px;
border-radius: 10px;
border: solid 2px #fff;
background-color: #fff;
display: flex;
}
.right{
width: 700px;
height: 600px;
padding: 80px;
display: flex;
flex-direction: column;
justify-content:space-around;
}
.right h3{
font-size: 28px;
}
.right h4{
font-size: 26px;
font-weight: 400;
}
.right p{
font-size: 18px;
color: #888;
background-image: url(../img/05.png);
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 30px;
}
.right .btens{
display: flex;
gap: 30px;
}
.right .btens div{
width: 100px;
height: 38px;
border: solid 1px #4872f6;
border-radius: 5px;
color: #4872f6;
text-align: center;
line-height: 38px;
cursor: pointer;
}
.right .btens div:nth-of-type(1){
background-color: #4872f6;
color: #fff;
}
.right .btens div:nth-of-type(2){
}
.hangye {
height: 730px;
/* background-color: #19a86f; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
background-image: url(../img/06.webp);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.timu{font-size: 44px;
font-weight: 500;
color: white;
}
.fg{
width: 1400px;
height: 500px;
border-radius: 10px;
border: solid 1px #242c34;
/* background-color:grey; */
display: flex;
/* background-color: antiquewhite; */
}
.cl{
background-color: #2c343c;
width: 220px;
}
.jjfa{
/* background-color: rgb(28, 156, 55); */
width: 820px;
display: flex;
flex-direction: column;
background-color: #242c34;
}
.hyal{
width: 360px;
background-color: #242c34;
border-left: 1px solid rgb(104, 103, 103);
}
.ulone{
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.a{
height: 70px;
padding: 40px;
color: white;
}
.b{
height: 90px;
padding: 63px;
font-size: 20px;
color: white;
}
.one1{
height: 120px;
display: flex;
flex-direction: column;
padding: 25px;
color: white;
}
h7{
font-size: 25px;}
.one2{
height: 240px;
/* background-color: #7a2f79; */
}
.one3{
height: 140px;
/* background-color: #3881c8; */
display: flex;
gap: 30px;
padding: 25px;
}
.one3 div{
width: 100px;
height: 38px;
border: solid 1px #4872f6;
border-radius: 5px;
color: #4872f6;
text-align: center;
line-height: 38px;
cursor: pointer;
}
.one3 div:nth-of-type(1){
background-color: #4872f6;
color: white;
}
.one3 div:nth-of-type(2){
}
.xgz{
width: 90px;
height: 90px;
border-radius: 5px;
border: solid 1px rgb(90, 88, 88);
display: flex;
}
.zhao{
height: 120px;
display: flex;
padding: 25px;
gap: 25px;
}
.xfgz{
display: flex;
list-style: none;
justify-content: center;
align-items: center;
color: white;
text-align: center;
}
.jishu {
height: 745px;
background:linear-gradient(177deg,#fff,#dde2f3);
display: flex;
flex-direction: column;
align-items: center;
gap: 50px;
}
.gao{
height: 420px;
width: 1400px;
display: flex;
justify-content: space-around;
}
.chao,
.liu{
width: 310px;
height: 420px;
background-color: bisque;
border-radius: 10px;
border: solid 0px #585859;
padding: 40px;
gap: 20px;
}
.fa{
width: 720px;
height: 420px;
background-color: #bb0f90;
border-radius: 10px;
border: solid 0px;
padding: 40px;
gap: 20px;
}
.chao{
background-image: url(../img/07.webp);
background-position: center;
background-size: cover;
background-repeat:no-repeat ;
display: flex;
justify-content: center;
flex-direction: column;
}
.fa{
background-image: url(../img/08.webp);
background-position: center;
background-size: cover;
background-repeat:no-repeat ;
display: flex;
justify-content: center;
flex-direction: column;
}
.liu{
background-image: url(../img/09.webp);
background-position: center;
background-size: cover;
background-repeat:no-repeat ;
display: flex;
justify-content: center;
flex-direction: column;
}
.xiaobt{
font-size: 40px;
font-weight: 500;
color: #fff;
}
.xz{
font-size: 15px;
font-weight: 300;
color: #fff;
}
.yunying {
height: 630px;
display: flex;
flex-direction: column;
align-items: center;
}
.sige{
height: 420px;
width: 1800px;
display: flex;
align-items: center;
gap: 20px;
justify-content: end;
}
.two{
height: 350px;
width: 400px;
/* background-color: rgb(64, 18, 18); */
}
.beijin{
height: 200px;
width: 400px;
/* background-color: beige; */
border-radius: 10px;
border: solid 0px;
background-position: center;
background-size: cover;
background-repeat:no-repeat ;
}
.xbt{
height: 150px;
width: 400px;
/* background-color: rgb(190, 190, 190); */
display: flex;
flex-direction: column;
gap: 10px;
}
.sq{
background-image: url(../img/10.png);
}
.gj{
background-image: url(../img/11.png);
}
.dk{
background-image: url(../img/12.png);
}
.yw{
background-image: url(../img/13.png);
}
h8{
font-size: 20px;
}
h9{
color: rgb(108, 106, 106);
}
.xiaoetong {
height: 1000px;
/* background-color: #570570; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
background-image: url(../img/14.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.xbiaot{
color: gray;
}
.sangge{
height: 400px;
width: 1400px;
/* background-color: aquamarine; */
display: flex;
justify-content: space-between;
align-items: center;
}
.guanggao{
height: 150px;
width: 1400px;
/* background-color: chartreuse; */
display: flex;
justify-content: space-between;
}
.dibu{
height: 100px;
width: 1400px;
/* background-color: blueviolet; */
display: flex;
justify-content: center;
align-items: center;
}
.gengduo{
height: 40px;
width: 150px;
/* background-color: aqua; */
text-align: center;
line-height: 35px;
border-radius: 5px;
font-size: 20px;
font-weight: 200;
border: solid 1px #4872f6;
color: #4872f6;
cursor: pointer;
}
.xiaoxong{
height: 380px;
width: 450px;
background-color:white;
border: solid 0px gray;
border-radius: 10px;
display: flex;
flex-direction: column;
}
.wen{
height: 170px;
width: 450px;
/* background-color: aqua; */
padding: 15px;
display: flex;
flex-direction: column;
}
.tupiana{
height: 250px;
width: 450px;
background-image: url(../img/15.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.tupianb{
height: 250px;
width: 450px;
background-image: url(../img/16.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.tupianc{
height: 250px;
width: 450px;
background-image: url(../img/17.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
h11{
font-size: 30px;
font-weight: 500;
}
h10{
color: rgb(107, 106, 106);
}
.ren{
height: 150px;
width: 200px;
background-color: bisque;
border-radius: 10px;
border: solid 0px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.ren.yi1{
background-image: url(../img/18.png);
}
.ren.er1{
background-image: url(../img/19.png);
}
.ren.san1{
background-image: url(../img/20.png);
}
.ren.si1{
background-image: url(../img/21.png);
}
.ren.wu1{
background-image: url(../img/22.png);
}
.ren.niu1{
background-image: url(../img/23.png);
}
.ren.yi2{
background-image: url(../img/24.png);
}
.ren.er2{
background-image: url(../img/25.png);
}
.ren.san2{
background-image: url(../img/26.png);
}
.ren.si2{
background-image: url(../img/27.png);
}
.ren.wu2{
background-image: url(../img/28.png);
}
.ren.niu2{
background-image: url(../img/29.png);
}
.saoma{
height: 300px;
/* background-color: #722561; */
background-image: url(../img/30.png);
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.drbf{
height: 300px;
width: 500px;
/* background-color: rgb(32, 103, 79); */
display: flex;
justify-content: space-around;
align-items: center;
}
.ewm{
height: 200px;
width: 200px;
border-radius: 10px;
border: solid 0px;
/* background-color: aquamarine; */
/* background-image: url(../img/31.png); */
background-size: cover;
background-position: center;
}
.ewm img{
height: 150px;
width: 150px;
}
.khjl{
height: 200px;
width: 250px;
/* background-color: aliceblue; */
display: flex;
flex-direction: column;
}
.zhi{
height: 100px;
width: 250px;
/* background-color: aqua; */
color: white;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px;
}
h12{
font-size: 25px;
}
h13{
font-size: 18px;
}
.mianfei{
width: 250px;
height: 100px;
display: flex;
justify-content: center;
}
.fei{
height: 45px;
width: 150px;
border-radius: 5px;
font-size: 20px;
font-weight: 200;
border: solid 1px #4872f6;
color: #4872f6;
cursor: pointer;
background-color: white;
text-align: center;
line-height: 45px;
}
.footer{
height: 760px;
background-color: #141c34;
display: flex;
justify-content: center;
align-items: center;
}
.heikuang{
height: 640px;
width: 1400px;
/* background-color: #1b7292; */
display: flex;
flex-direction: column;
}
.wenzhi{
height: 320px;
width: 1400px;
/* background-color: bisque; */
display: flex;
justify-content: space-around;
}
.xiaozhi{
height: 320px;
width: 700px;
/* background-color: blueviolet; */
display: flex;
justify-content: space-evenly;
padding: 20px;
gap: 40px;
color: gray;
}
.dazhi{
height: 320px;
width: 700px;
/* background-color: coral; */
display: flex;
justify-content: space-evenly;
}
.da{
line-height: 30px;
list-style: none;
font-size: 13px;
color: gray;
}
.pdd{
color: white;
font-size: 16px;
}
.meiti{
height: 320px;
width: 350px;
/* background-color: darkgreen; */
padding: 20px;
gap: 40px;
}
.gzh{
height: 320px;
width: 350px;
/* background-color: darkred; */
display: flex;
flex-direction: column;
}
.dianhua{
height: 100px;
display: flex;
flex-direction: column;
padding: 20px;
}
h14{
color: white;
font-size: 35px;
font-weight: 500;
}
h15{
color: gray;
font-size: 10px;
}
.erweima{
height: 220px;
width: 350px;
/* background-color: aquamarine; */
display: flex;
justify-content: space-between;
}
.guanzhu{
height: 220px;
width: 170px;
/* background-color: brown; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.guanzhu img{
height: 100px;
width: 100px;
}
.chuanye{
height: 220px;
width: 170px;
/* background-color: blue; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 10px;
}
.chuanye img{
height: 100px;
width: 100px;
}
.dizhi{
height: 120px;
width: 1400px;
/* background-color: aquamarine; */
display: flex;
justify-content: left;
padding: 20px;
gap: 40px;
}
.xiaocd{
height: 60px;
width: 1400px;
/* background-color: chartreuse; */
display: flex;
justify-content: left;
padding: 20px;
gap: 20px;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
}
.osng{
font-size: 13px;
color: gray;
}
.kuaibao{
height: 60px;
width: 1400px;
/* background-color: darkblue; */
display: flex;
justify-content: space-between;
align-items: center;
}
.bao{
font-size: 15px;
color: white;
display: flex;
justify-content: space-between;
gap: 10px;
}
.bao img{
height: 30px;
width: 30px;
}
.dbdz{
height: 60px;
width: 1400px;
display: flex;
flex-direction: column;
font-size: 13px;
color: grey;
}
.gongshi{
height: 30px;
width: 1400px;
display: flex;
justify-content: left;
}
.disang{
height: 30px;
width: 1400px;
display: flex;
justify-content: left;
}
个人总结
本次编写的代码较长，不管是寻找图片还是编写样式都花费大量时间，还好效果还算成功。
