第一段代码：
css
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鹅通导航</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
width:100%;
height:100%
}
.bg{
width:100%;
height:500px;
background-image: url('https://wechatapppro-1252524126.cdn.xiaoeknow.com/crm/image/png/m28mek5n0yyx.png?imageView2/2/100/format/webp');
display:flex;
justify-content:center;
border-bottom:soild 1px #ddd;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.nav{
width:2000px;
height:72px;
display:flex;
justify-content:space-between;
border-bottom:solid 1px white;
}
ul{
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:120px;
height:36px;
}
.btns{
width:500px;
height:72px;
display:flex;
justify-content:space-evenly;
align-items:center;
}
.btns div:nth-of-type(1):hover{
color:#4872f6;
font-weight:600;
cursor:pointer;
}
.btns div:nth-of-type(2),
.btns 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: 300;
font-size:16px;
cursor: pointer;
transition: all .2s;
}
.btns div:nth-of-type(2):hover,
.btns div:nth-of-type(3){
background-color: #4872f6;
color:white;
transition: all .2s;
}
.btns div:nth-of-type(3):hover{
background-color: #7c9bff;
color:white;
transition: all .2s;
}
</style>
</head>
<body>
html
<div class="bg">
<div class="nav">
<ul>
<li><img src="data:image/png;NoAAAAASUVORK5CYII=" alt=""/></li>
<li>首页</li>
<li>解决方案</li>
<li>产品服务</li>
<li>价格</li>
<li>活动</li>
<li>案例</li>
<li>渠道合作</li>
<li>下载与帮助</li>
<li>关于我们</li>
</ul>
<div class="btns">
<div>我是学员</div>
<div>商家登录</div>
<div>免费试用</div>
</div>
</div>
</div>
</body>
</html>
效果展示：
image.png
第二段代码：
css
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鹅通</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
width:100%;
height:1000px;
}
.f{
width:100%;
height:1000px;
display:flex;
justify-content:center;
align-items:center;
background: linear-gradient(135deg, rgba(244, 247, 251, 0.8), rgba(220, 227, 248, 0.8));
}
.g{
width:2000px;
height:860px;
display:flex;
justify-content:space-evenly;
align-items:center;
flex-direction:column;
}
.h{
width:100%;
height:auto;
font-weight:650;
font-size:40px;
text-align:center;
}
.i{
width:1300px;
height:480px;
border-radius:10px;
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m3moa2m10v5k.png?imageMogr2/format/webp|imageMogr2/ignore-error/1');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.j{
width:1300px;
height:auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.k{
width:420px;
height:220px;
border-radius:10px;
border-top:solid 4px #4876f6;
background-color: #fff;
}
.l,.m{
width:410px;
height:220px;
border-radius:10px;
background-color: #fff;
}
h3{
font-size:23px;
line-height:40px;
font-weight:400;
margin-top:25px;
padding-left:30px;
}
p{
font-size:15px;
font-weight:lighter;
padding-left:30px;
}
.first-p{
margin-top:18px;
}
.second-p{
margin-top:7px;
}
.third-p{
margin-top:30px;
}
</style>
</head>
<body>
html
<div class="f">
<div class="g">
<div class="h">我们的产品能力</div>
<div class="i"></div>
<div class="j">
<div class="k">
<h3 style="color:rgb(55, 117, 209)">知识店铺</h3>
<p class="first-p">1分钟搭建您的知识商城</p>
<p class="second-p">助力高效知识变现</p>
<p class="third-p" style="color:rgb(57, 110, 208) ">免费试用</p>
</div>
<div class="l">
<h3>私域直播</h3>
<P class="first-p">企业级专属私域直播平台</P>
<P class="second-p">实现私域流量高效运营</P>
<P class="third-p" style="color:rgb(50, 104, 230)">免费试用</P>
</div>
<div class="m">
<h3>企微SCRM</h3>
<p class="first-p">企业微信私域运营神器</p>
<p class="second-p">数据洞察驱动业绩增长</p>
<p class="third-p" style="color:rgb(59, 95, 224)">免费试用</p>
</div>
</div>
</div>
</div>
</body>
</html>
第二段效果展示：
image.png
第三段代码：
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小鹅通</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
width:100%;
height:100%;
}
.n{
width:100%;
height:800px;
display:flex;
justify-content:center;
align-items:center;
background: linear-gradient(135deg, rgba(244, 247, 251, 0.8), rgba(220, 227, 248, 0.8));
}
.o{
width:1200px;
height:800px;
display:flex;
justify-content:space-evenly;
flex-direction:column;
align-items:center;
}
.p{
margin-top:50px;
font-size: 40px;
font-weight:600;
}
.q{
width:700px;
height:45px;
background-color: #fff;
display:flex;
justify-content:space-evenly;
align-items:center;
border-radius:23px;
}
.q ul{
width:700px;
height:45px;
border-radius:23px;
background-color: #fff;
display:flex;
justify-content:space-between;
align-items:center;
list-style:none;
}
.q ul li{
cursor:pointer;
font-weight:350;
font-size: 15px;
}
.q ul li:nth-of-type(1){
background-color:#4872f6;
color:#fff;
border-radius: 23px;
width:130px;
height:45px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}
.q ul li:nth-of-type(5){
margin-right: 23px;
}
.r{
width:1200px;
height:500px;
border-radius:10px;
display:flex;
justify-content: space-evenly;
align-items:center;
margin-bottom:50px;
background-color: #fff;
}
.s{
width:680px;
height:500px;
background-size:cover;
background-position:center;
background-repeat: no-repeat;
border-radius:10px;
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m10c72vn0zzo.png?imageMogr2/format/webp|imageMogr2/ignore-error/1');
}
.t{
width:600px;
height:500px;
display:flex;
justify-content:space-evenly;
border-radius:10px;
flex-direction: column;
background:linear-gradient(135deg, rgba(244, 247, 251, 0.8), rgba(220, 227, 248, 0.8));
}
.t h4{
font-size: 30px;
font-weight: 800;
padding-left:80px;
}
.t h5{
font-weight: 450;
font-size: 25px;
margin-top:10px;
padding-left:80px;
}
.t p{
background-image: url('data:image/png;base64,iwC2OHchJ45SqgAAAABJRU5ErkJggg==');
background-position:0 center;
background-repeat: no-repeat;
margin-top: 30px;
color:rgb(105, 102, 102);
margin-left:80px;
padding-left: 30px;
}
.u{
width:600px;
height:50px;
margin-bottom: 50px;
}
.u ul{
display:flex;
list-style: none;
margin-top: 35px;
}
.u ul li{
width:130px;
height:42px;
border-radius: 6px;
cursor:pointer;
text-align: center;
line-height: 40px;
margin-left: 80px;
font-size: 14px;
}
.u ul li:nth-of-type(1){
background-color:#4872f6;
color: #fff;
}
.u ul li:nth-of-type(2){
background-color: #fff;
color: #4872f6;
transition: all 0.2s;
border:solid 1px #4872f6;
margin-left: 18px;
}
.u ul li:nth-of-type(2):hover{
background-color:#4872f6;
color: #fff;
transition: all 0.2s;
}
.u ul li:nth-of-type(1):hover{
background-color: #7391f6;
color: #fff;
}
</style>
</head>
<body>
html
<div class="n">
<div class="o">
<div class="p">我们的场景解决方案</div>
<div class="q">
<ul>
<li>公域获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数据化运营</li>
</ul>
</div>
<div class="r">
<div class="s"></div>
<div class="t">
<h4>公域获客</h4>
<h5>多渠道获客，沉淀私域流量池</h5>
<p>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</p>
<p>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</p>
<p>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告RO</p>
<div class="u">
<ul>
<li>免费试用</li>
<li>了解详情</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
第三段效果展示：
image.png
第四段代码：
css
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font_uc4de1fzsvk/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
body{
font-size: 62.5%;
}
.ninebg{
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m0w7ssdh01vr.png?imageMogr2/format/webp|imageMogr2/ignore-error/1');
background-position: 0 center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 700px;
display: flex;
justify-content: center;
align-items: center;
}
.ninecontent{
width: 1200px;
height: 650px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.nineheader{
width: 100%;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 42px;
font-weight: 600;
color: #fff;
margin-top: 45px;
}
.ninecontentfooter{
width: 100%;
height: 420px;
border-radius: 10px;
overflow: hidden;
/* background-color: aqua; */
display: flex;
justify-content: space-between;
}
.ninefooterleft{
width: 200px;
height: 420px;
background-color: #2b3440;
display: flex;
flex-direction: column;
align-items: center;
}
.ninefooterleft ul{
list-style: none;
width: 150px;
height: auto;
}
.ninefooterleft ul li{
width: 100%;
height: 60px;
color: #fff;
font-size: 16px;
line-height: 60px;
padding-left:20px;
margin-left: 10px;
border-radius: 5px;
}
.ninefooterleft ul li:hover{
border-radius: 5px;
background-color:#4872f6;
}
.ninefooterleft ul li i{
font-size: 16px;
margin-right: 5px;
}
.ninefooterleft ul li:nth-of-type(1){
margin-top: 50px;
}
.ninefootermidddle{
width: 700px;
height: 420px;
background-color: #202832;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.ninehead{
width: 100%;
height: 80px;
/* background-color: aqua; */
}
.ninehead ul{
list-style: none;
margin-left:25px
}
.ninehead ul li:nth-of-type(1){
font-size: 24px;
color: #fff;
}
.ninehead ul li:nth-of-type(2){
color: #fff;
font-size: 14px;
}
.ninecenter{
width: 100%;
height: 200px;
/* background-color: antiquewhite; */
display: flex;
flex-direction: column;
}
.ninetop{
width: 450px;
height: 80px;
/* background-color:beige; */
border-radius:5px;
overflow: hidden;
margin-left: 20px;
}
.ninetop ul{
display: flex;
justify-content: space-between;
list-style: none;
}
.ninetop ul li{
width: 80px;
height: 80px;
/* background-color: aqua; */
border-radius: 5px;
text-align: center;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 1px #fff;
color: #fff;
font-size: 12px;
}
.ninebottom ul{
display: flex;
list-style: none;
}
.ninebottom{
width: 450px;
height: 80px;
/* background-color:beige; */
border-radius:5px;
overflow: hidden;
margin-left: 20px;
margin-top: 20px;
}
.ninebottom ul li{
width: 80px;
height: 80px;
/* background-color: aqua; */
border-radius: 5px;
text-align: center;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 1px #fff;
color: #fff;
margin-right: 14px;
font-size: 12px;
}
.nineend{
width: 100%;
height: 50px;
/* background-color: aquamarine; */
}
.nineend ul{
display: flex;
list-style: none;
}
.nineend ul li:nth-of-type(1){
width: 120px;
height: 40px;
margin-left: 20px;
background-color: #4872f6;
color: #fff;
border-radius: 5px;
line-height: 40px;
text-align: center;
transform: all .5s;
}
.nineend ul li:nth-of-type(2){
width: 120px;
height: 40px;
margin-left: 20px;
color: #4872f6;
border-radius: 5px;
line-height: 40px;
text-align: center;
border: solid 1px #4872f6;
transform: all .5s;
}
.nineend ul li:nth-of-type(1):hover{
background-color: #7593f4;
cursor: pointer;
transition: all .5s;
}
.nineend ul li:nth-of-type(2):hover{
color: #fff;
cursor: pointer;
transition: all .5s;
}
.ten{
flex:1;
display: flex;
align-items: center;
background-color: #202832;
}
.tenmain{
width: 100%;
height: 360px;
/* background-color: aqua; */
border-left: solid 1px rgb(75, 75, 75);
display: flex;
flex-direction: column;
}
.tenhead{
width: 100%;
height: 50px;
color: #fff;
font-size: 17px;
margin-left: 60px;
margin-top: 50px;
}
.tencenter{
width: 100%;
height: 105px;
/* background-color: aqua; */
}
.tenfoot{
width: 100%;
height: 105px;
}
.tencenter ul,.tenend ul{
display: flex;
list-style: none;
margin-left: 50px;
}
.tencenter ul li,.tenend ul li{
margin: 15px;
background-color: #fff;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 75px;
}
.tencenter ul li img,.tenend ul li img{
width: 45px;
height: 45px;
}
.ninefooterleft img{
width:18px;
height:20px;
margin-right:10px;
padding-top: 3px;
}
.ninetop img{
width:18px;
height:20px;
}
.ninebottom img{
width:18px;
height:20px;
}
</style>
</head>
<body>
html
<div class="ninebg">
<div class="ninecontent">
<div class="nineheader">我们的行业解决方案</div>
<div class="ninecontentfooter">
<div class="ninefooterleft">
<ul>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m0z15s580ei2.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt="">新零售门店</li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m0z15s560wz6.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt="">职业培训</li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m0z15tx30tif.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt="">知识付费</li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m2bmj0r30gtx.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt="">美业直播</li>
</ul>
</div>
<div class="ninefootermidddle">
<div class="ninehead">
<ul>
<li>新零售门店解决方案</li><br>
<li>私域直播带货+推广门店体系，助力大健康商家私域流量高效变现</li>
</ul>
</div>
<div class="ninecenter">
<div class="ninetop">
<ul>
<li><img src="data:image/0stroke-linejoin='round'/%3e%3c/svg%3e" alt="">直播带货</li>
<li><img src="data:image/svg+xml,%.26828%2012.2679%208.26818Z'%20fill='%23fff'%20stroke='%23fff'%20stroke-width='.2'/%3e%3c/svg%3e" alt="">在线商城</li>
<li><img src="data:image/svg+xm%3c/svg%3e" alt="">门店管理</li>
<li><img src="data:image/svg+xmlinecap='round'/%3e%3c/svg%3e" alt="">门店核销</li>
<li><img src="data:image/svg+xml,%3cs18Z'%20fill='%23fff'/%3e%3c/svg%3e" alt="">渠道活码</li>
</ul>
</div>
<div class="ninebottom">
<ul>
<li><img src="data:image/svg+xml,%3csvg%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%99%3e%3c/svg%3e" alt="">直播红包</li>
<li><img src="data:image/svg+0stroke-linejoin='round'/%3e%3c/svg%3e" alt="">直播抽奖</li>
<li><img src="data:image/svg+xml,%3csvg%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%2linejoin='round'/%3e%3c/svg%3e" alt="">邀请达人榜</li>
<li><img src="data:image/svg+xml,%3csvg%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20class='design-iconfont'vg%3e" alt="">商品秒杀</li>
</ul>
</div>
</div>
<div class="nineend">
<ul>
<li>免费试用</li>
<li>了解详细</li>
</ul>
</div>
</div>
<div class="ten">
<div class="tenmain">
<div class="tenhead">行业案例</div>
<div class="tencenter">
<ul>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85jwbrv0ll4.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt=""></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85jwa7r0vja.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt=""></li>
</ul>
</div>
<div class="tenend">
<ul>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85jwboh0ssi.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt=""></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85jwbnv0313.png?imageMogr2/format/webp|imageMogr2/ignore-error/1" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
第四段效果展示：
image.png
第五段代码：
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.bg {
width: 100%;
height: 700px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, rgba(244, 247, 251, 0.8), rgba(220, 227, 248, 0.8));
}
.content {
width: 1200px;
height: 640px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
/*background-color: #e1f3a7;*/
}
.header {
font-size: 40px;
font-weight: 600;
/*background-color: #b2eae4;*/
margin-top: 92px;
}
.main {
width: 100%;
height: 360px;
display: flex;
justify-content: space-between;
border-radius: 6px;
overflow: hidden;
background-color: azure;
margin-bottom: 90px;
}
.main .left, .main .middle, .main .right {
width:400px;
height: 360px;
border-radius: 6px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color:#fff;
}
.main .left {
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m04n363d0eas.png?imageMogr2/format/webp');
}
.main .middle {
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m04n363709k8.png?imageMogr2/format/webp');
}
.main .right {
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m04n363e0jjz.png?imageMogr2/format/webp');
}
.right ul li:nth-of-type(1){
font-size:35px;
font-weight: 420;
margin-left:45px;
list-style: none;
margin-top: 100px;
}
.right ul li:nth-of-type(2){
font-size:17px;
list-style: none;
margin-left:45px;
margin-top: 18px;
}
.middle ul li:nth-of-type(1){
font-size:35px;
font-weight: 420;
margin-left:45px;
list-style: none;
margin-top: 100px;
}
.middle ul li:nth-of-type(2){
font-size:17px;
list-style: none;
margin-left:45px;
margin-top: 18px;
}
.left ul li:nth-of-type(1){
font-size:35px;
font-weight: 420;
margin-left:45px;
list-style: none;
margin-top: 100px;
}
.left ul li:nth-of-type(2){
font-size:17px;
list-style: none;
margin-left:45px;
margin-top: 18px;
}
</style>
</head>
<body>
html
<div class="bg">
<div class="content">
<div class="header">我们的技术优势</div>
<div class="main">
<div class="left">
<ul>
<li>超稳定</li>
<li>多云负载均匀/全球CDN加速</li>
</ul>
</div>
<div class="middle">
<ul>
<li>高并发</li>
<li>支持多用户在线</li>
</ul>
</div>
<div class="right">
<ul>
<li>超流畅</li>
<li>观看端自动探测并自动开云路线切换</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
第五段效果展示：
image.png
第六段代码：
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
width:100%;
height:100%;
}
.onebg{
width:100%;
height: 700px;
display:flex;
justify-content:center;
align-items:center;
/*background-color: #ab7777;*/
}
.onecontent{
width:2000px;
height: 700px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
/*background-color: aqua*/
}
.oneheader{
font-size:40px;
font-weight:600;
margin-top: 90px;
}
.onemain{
width:1800px;
height:330px;
/*background-color: #c9e19c;*/
margin-bottom: 180px;
display: flex;
justify-content:space-around;
}
.one{
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m0oqzrmz0sba.png');
background-position:center;
background-repeat: no-repeat;
background-size:cover;
width:420px;
height:220px;
border-radius: 8px;
}
.two{
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m1n888ip0d4s.png');
background-position:center;
background-repeat: no-repeat;
background-size:cover;
width:420px;
height:220px;
border-radius:8px;
}
.three{
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m06hz5h00vxx.png');
background-position:center;
background-repeat: no-repeat;
background-size:cover;
width:420px;
height:220px;
border-radius: 8px;
}
.four{
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m06hz5gy0s0d.png');
background-position:center;
background-repeat: no-repeat;
background-size:cover;
width:420px;
height:220px;
border-radius: 8px;
}
.one ul, .two ul, .three ul, .four ul{
width:380px;
height:110px;
/*background-color: #bc99bf;*/
margin-top:220px;
}
.one ul li:nth-of-type(1){
font-size: 25px;
list-style: none;
padding-top:20px;
}
.one ul li:nth-of-type(2){
margin-top:15px;
color:rgb(84, 82, 82);
list-style: none;
}
.two ul li:nth-of-type(1){
font-size: 25px;
list-style: none;
padding-top:20px;
}
.two ul li:nth-of-type(2){
margin-top:15px;
color:rgb(84, 82, 82);
list-style: none;
}
.three ul li:nth-of-type(1){
font-size: 25px;
list-style: none;
padding-top:20px;
}
.three ul li:nth-of-type(2){
margin-top:15px;
color:rgb(84, 82, 82);
list-style: none;
}
.four ul li:nth-of-type(1){
font-size: 25px;
list-style: none;
padding-top:20px;
}
.four ul li:nth-of-type(2){
margin-top:15px;
color:rgb(84, 82, 82);
list-style: none;
}
</style>
</head>
<body>
html
<div class="onebg">
<div class="onecontent">
<div class="oneheader">我们的运营服务</div>
<div class="onemain">
<div class="one">
<ul>
<li>社群服务</li>
<li>标杆商家分享，同行商家交流，总比别人快一步</li>
</ul>
</div>
<div class="two">
<ul>
<li>管家服务</li>
<li>客户经理、服务管家、多角色在群，服务全面包围</li>
</ul>
</div>
<div class="three">
<ul>
<li>大客服务</li>
<li>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</li>
</ul>
</div>
<div class="four">
<ul>
<li>运营服务</li>
<li>需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
第六段效果展示：
image.png
第七段代码：
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.twobg {
width: 100%;
height: 1030px;
/*background-color: antiquewhite;*/
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/lzuvu9jp0vcl.png');
}
.twoheader {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.twoheader h4 {
font-size: 35px;
font-weight: 600;
margin-top: 60px;
}
.twoheader p {
color: rgb(98, 88, 88);
margin-top: 20px;
font-size: 18px;
font-weight: 400;
}
.twocontent {
width: 1300px;
height: 1100px;
/*background-color: #edd6d6;*/
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
}
.twomain {
width: 100%;
height: 360px;
/*background-color: #a2dab7;*/
display: flex;
justify-content: space-between;
}
.twoleft, .twomiddle, .tworight {
width: 380px;
height: 210px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
border-radius: 8px;
}
h4 {
font-size: 20px;
margin-top: 230px;
margin-left: 25px;
}
p {
color: rgb(80, 75, 75);
font-size: 14px;
margin-left: 25px;
margin-top: 10px;
}
.onetext {
width: 100%;
height: 130px;
/*background-color: beige;*/
display: flex;
justify-content: space-between;
align-items: center;
}
.twotext {
width: 100%;
height: 130px;
/*background-color: rgb(185, 171, 206);*/
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.onetext ul, .twotext ul {
display: flex;
flex-wrap: nowrap;
width: 100%;
justify-content: space-between;
}
.onetext li, .twotext li {
flex: 0 0 auto;
list-style: none;
margin-right: 20px;
}
.onetext img, .twotext img {
width: 200px;
height: 130px;
}
.btns {
width: 150px;
height: 40px;
background-color:white;
display: flex;
justify-content: center;
align-items: center;
margin-bottom:50px;
border:solid 1px #4872f6;
border-radius:6px;
}
.btns p {
margin: 0;
color: rgb(666, 106, 201);
font-size: 16px;
font-weight: 500;
color: #4872f6;font-size:13px;
}
</style>
</head>
<body>
html
<div class="twobg">
<div class="twocontent">
<div class="twoheader">
<h4>他们都在用小鹅通</h4>
<p>（排名不分先后顺序）</p>
</div>
<div class="twomain">
<div class="twoleft" style="background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85nuqux0xat.png?imageMogr2/format/webp')">
<h4>小能熊科学学习</h4>
<p>小能熊学院以学习科学化为使命，专注提供学习方法和自我管理解决方案，陪伴严肃，耐心，永不妥协的终生学习者！</p>
</div>
<div class="twomiddle" style="background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85nuquz0gte.png?imageMogr2/format/webp')">
<h4>刘润●进化的力量</h4>
<p>刘润，润米咨询创始人，“5分钟商学院”课程主理人，著名商业顾问，曾为海尔，中远，恒基，百度等企业提供过战略咨询服务，明年10月举办“进化的力量·年度演讲”，为创业者企业家提供年度规划的参考方向，一起...</p>
</div>
<div class="tworight" style="background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85nuqv40zd5.png?imageMogr2/format/webp')">
<h4>佰君易直播间</h4>
<p>佰君易直播间，由培养过10万项目管理师的王远航老师打造，为各行业提供项目管理实战培训。佰君易直播间与小鹅通深度合作，帮助职场小伙伴升职加薪</p>
</div>
</div>
<div class="one-two">
<div class="onetext">
<ul>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzce60efg.png" alt="轻松玩mac"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzcea0zda.png" alt="刘智工作室MBAMPAcc"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzcea0b1o.png" alt="清培注考"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzceb01ux.png" alt="兔妈文案创业学堂"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzceb0s45.png" alt="冷芸时尚微课"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pze650j3f.png" alt="童心沃SEL社会与情绪学习"></li>
</ul>
</div>
<div class="twotext">
<ul>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pze8e0a1j.png" alt="旁门左道PPT服务号"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pze980638.png" alt="森部落职场训练营"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzech01xn.png" alt="3HFIT能量站"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzecl08ph.png" alt="喵湃气球云课堂"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzfpr0x3n.png" alt="昆仑讲堂"></li>
<li><img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/m85pzfxh0kkc.png" alt="群智企业教练"></li>
</ul>
</div>
</div>
<div class="btns">
<p>查看更多案例</p>
</div>
</div>
</div>
</body>
</html>
第七段代码效果展示：
image.png
第八段代码：
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
.threebg{
width:100%;
height:270px;
display: flex;
justify-content: space-around;
align-items:center;
background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m201jna00mof.png');
}
.threecontent{
width:1200px;
height:270px;
/*background-color: #72b8ac;*/
display: flex;
justify-content: space-around;
align-items:center;
flex-direction: column;
}
.threeheader{
font-size:35px;
font-weight:600;
margin-top: 15px;
}
.threemain{
width:320px;
height:135px;
/*background-color: #de97b8;*/
margin-bottom:17px;
display: flex;
justify-content:space-between;
flex-direction: row;
align-items: center;
}
.threeleft{
background-image:url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/m2cobck10ujl.png?imageMogr2/format/webp|imageMogr2/ignore-error/1');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
width:120px;
height:135px;
}
.threeright{
width:170px;
height:135px;
display: flex;
justify-content: space-between;
flex-direction: column;
/*background-color: #81a9d8;*/
}
.words{
width:170px;
height:100px;
/*background-color: rgb(29, 136, 136);*/
}
.words p:nth-of-type(1){
font-size:20px;
color:white;
}
.words p:nth-of-type(2){
margin-top:5px;
color:white;
}
.twobtns{
width:140px;
height:40px;
border-radius:6px;
background-color:white;
text-align:center;
margin-bottom:2px;
color:rgb(54, 110, 194);
display: flex;
justify-content:space-evenly;
align-items: center;
font-size:14px;
}
</style>
</head>
<body>
html
<div class="threebg">
<div class="threecontent">
<div class="threeheader">立即扫码咨询，领取您的专属解决方案</div>
<div class="threemain">
<div class="threeleft"></div>
<div class="threeright">
<div class="words">
<p>扫码添加客户经理</p>
<p>或者您也可以先</p>
</div>
<div class="twobtns">免费试用</div>
</div>
</div>
</div>
</div>
</body>
</html>
第八段代码效果展示：
image.png
第九段代码：
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html,body{
width:100%;
height:100%;
}
.fourbg{
width:100%;
height:750px;
/*background-color: #cd6e6e;*/
display: flex;
justify-content:space-around;
align-items:center;
background-color: rgb(30, 31, 50);
}
.fourcontent{
width:1450px;
height:620px;
/*background-color: #9decda;*/
display: flex;
justify-content: space-around;
flex-direction: column;
}
.fourheader{
width:1450px;
height:340px;
/*background-color: #a691d6;*/
display: flex;
justify-content:space-between;
}
.oneintroduction{
width:120px;
height:340px;
/*background-color: #d691b2;*/
color:gainsboro;
font-size:14px;
}
.oneintroduction li:nth-of-type(1){
font-size:16px;
color:white;
font-weight:400;
}
.oneintroduction li:not(:first-child){
margin-top:17px;
}
.oneintroduction li:not(:first-child):hover{
cursor:pointer;
}
.oneintroduction li{
list-style: none;
}
.twointroduction{
width:120px;
height:340px;
/*background-color: #8b6267;*/
color:gainsboro;
font-size:14px;
}
.twointroduction li:nth-of-type(1){
font-size:16px;
color:white;
font-weight:400;
}
.twointroduction li:not(:first-child){
margin-top:17px;
}
.twointroduction li:not(:first-child):hover{
cursor:pointer;
}
.twointroduction li{
list-style: none;
}
.threeintroduction{
width:120px;
height:340px;
/*background-color: #a777ad;*/
color:gainsboro;
font-size:14px;
}
.threeintroduction li:nth-of-type(1){
font-size:16px;
color:white;
font-weight:400;
}
.threeintroduction li:not(:first-child){
margin-top:17px;
}
.threeintroduction li:not(:first-child):hover{
cursor:pointer;
}
.threeintroduction li{
list-style: none;
}
.fourintroduction{
width:140px;
height:340px;
/*background-color: #8b6267;*/
color:gainsboro;
font-size:14px;
}
.fourintroduction li:nth-of-type(1){
font-size:16px;
color:white;
font-weight:400;
}
.fourintroduction li:not(:first-child){
margin-top:17px;
}
.fourintroduction li:not(:first-child):hover{
cursor:pointer;
}
.fourintroduction li{
list-style: none;
}
.fiveintroduction{
width:120px;
height:340px;
/*background-color: #8b6267;*/
color:gainsboro;
font-size:14px;
}
.fiveintroduction li:nth-of-type(1){
font-size:16px;
color:white;
font-weight:400;
}
.fiveintroduction li:not(:first-child){
margin-top:17px;
}
.fiveintroduction li:not(:first-child):hover{
cursor:pointer;
}
.fiveintroduction li{
list-style: none;
}
.sixintroduction{
width:320px;
height:340px;
/*background-color: #8b6267;*/
color:gainsboro;
font-size:14px;
}
.sixintroduction li:nth-of-type(1){
font-size:16px;
color:white;
font-weight:400;
}
.sixintroduction li:not(:first-child){
margin-top:17px;
}
.sixintroduction li:not(:first-child):hover{
cursor:pointer;
}
.sixintroduction li{
list-style: none;
}
.sevenintroduction{
width:260px;
height:270px;
/*background-color: #93c1d1;*/
display:flex;
justify-content:space-between;
flex-direction:row;
}
.sevenintroduction li:nth-of-type(1){
font-size:25px;
font-weight:400;
color: white;
list-style: none;
}
.sevenintroduction li:nth-of-type(2){
color:gainsboro;
font-size:12px;
margin-top:5px;
}
.fourphoto img{
width:120px;
height:110px;
margin-top:30px;
}
.fourphoto img:nth-of-type(2){
margin-left:15px;
}
.sevenintroduction li{
list-style: none;
}
.fourwords{
width:260px;
/*background-color:rgb(226, 193, 193);*/
height:15px;
display: flex;
justify-content:space-between;
flex-direction: row;
align-items: center;
margin-top:5px;
}
.fourwords p:nth-of-type(2){
margin-right:15px;
}
.fourphoto p{
font-size:13px;
color:gainsboro;
}
.fourmain{
width:1060px;
height:80px;
/*background-color:azure;*/
display:flex;
flex-direction:row;
justify-content:space-between;
margin-top:10px;
}
.fourmain-one{
width:420px;
/*background-color: #93c1d1;*/
}
.fourmain-one li:not(:nth-child(1)){
margin-top:10px;
}
.fourmain-one li{
font-size:14px;
color:gainsboro;
list-style: none;
}
.fourmain-two{
width:280px;
/*background-color: #d5cbed;*/
margin-left:20px;
}
.fourmain-two li:not(:nth-child(1)){
margin-top:10px;
}
.fourmain-two li{
font-size:14px;
color:gainsboro;
list-style: none;
}
.fourmain-three li:not(:nth-child(1)){
margin-top:10px;
}
.fourmain-three li{
font-size:14px;
color:gainsboro;
list-style: none;
}
.fourmain-three{
width:320px;
/*background-color: aliceblue;*/
}
.version{
width:100%;
height:40px;
/*background-color: rgb(205, 205, 150);*/
margin-top:30px;
border-top: 1px solid gainsboro;
border-bottom:1px solid gainsboro;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.version ul{
display: flex;
justify-content: space-around;
flex-direction: row;
align-items: center;
}
.version li{
color: gainsboro;
list-style: none;
font-size:13px;
text-align: center;
}
.version li:not(:nth-child(1)){
margin-left:20px;
}
.fourfooter{
width:100%;
height:75px;
/*background-color: #9fe48a;*/
margin-top:10px;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.fourfooter .kuaibao{
width:100%;
height:20px;
/*background-color: rgb(130, 128, 176);*/
display: flex;
justify-content: space-between;
}
.fourfooter ul{
flex-direction:row;
display: flex;
justify-content: space-between;
align-items:center;
}
.fourfooter li{
list-style: none;
}
.fourfooter li:nth-of-type(2){
margin-left:500px;
color: gainsboro;
font-size:13px;
}
.fourfooter li:nth-of-type(3){
margin-left:150px;
color: rgb(97, 90, 90);
font-size:13px;
}
.fourfooter li:nth-of-type(4){
margin-left:50px;
color: rgb(97, 90, 90);
font-size:13px;
}
.fourfooter li:nth-of-type(1){
color: gainsboro;
font-size:15px;
}
.kuaibao img{
width:auto;
height:18px;
}
.address{
width:1000px;
height:60px;
/*background-color: aqua;*/
}
.address p:nth-of-type(1){
font-size:13px;
color: rgb(97, 90, 90);
margin-top:10px;
}
.address p:nth-of-type(2){
font-size:13px;
color: rgb(97, 90, 90);
}
</style>
</head>
<body>
html
<div class="fourbg">
<div class="fourcontent">
<div class="fourheader">
<div class="oneintroduction">
<ul>
<li>场景</li>
<li>全局获客</li>
<li>私域运营</li>
<li>直播带货</li>
<li>内容交付</li>
<li>数据化运营</li>
<li>企业内训</li>
</ul>
</div>
<div class="twointroduction">
<ul>
<li>行业</li>
<li>零售电商</li>
<li>职业培训</li>
<li>知识付费</li>
<li>企业营销</li>
<li>美业直播</li>
<li>企业培训</li>
<li>社区团购</li>
<li>销售会务</li>
</ul>
</div>
<div class="threeintroduction">
<ul>
<li>产品</li>
<li>知识店铺</li>
<li>私域直播</li>
<li>企微SCRM</li>
<li>企学院</li>
<li>智能投放</li>
<li>海外版eLink</li>
<li>小鹅云</li>
</ul>
</div>
<div class="fourintroduction">
<ul>
<li>服务</li>
<li>小鹅创业社群</li>
<li>本地社群</li>
<li>教练联盟小鹅通训练营</li>
<li>小鹅通训练营</li>
<li>对话标杆</li>
</ul>
</div>
<div class="fiveintroduction">
<ul>
<li>关于我们</li>
<li>公司简介</li>
<li>加入我们</li>
<li>媒体报道</li>
<li>更多资讯</li>
<li>客户案例</li>
<li>帮助中心</li>
</ul>
</div>
<div class="sixintroduction">
<ul>
<li>媒体报道</li>
<li>D轮融资1.2亿美元，小鹅通究竟在做什么？</li>
<li>知识付费用户达5.27亿，内容创业的下半场风...</li>
<li>知识工作者的终极梦想，可能是拥有一个“第二...</li>
<li>小鹅通：让知识更有价值</li>
<li>小鹅通联合艾瑞咨询发布《2023年中国私域运...</li>
</ul>
</div>
<div class="sevenintroduction">
<ul>
<li>400-102-6665</li>
<li>周一至周日 9:00-21:00</li>
<li>
<div class="fourphoto">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAIAAABJObGsAAAAGWUCbNiwgfID8C5WYEo/WY1HoM4F/BTAjqX8FXYdcn9dgt0F/yvAANzdOQaa8/T0AAAAAElFTkSuQmCC" alt="">
<img src="https://commonresource-1252524126.cdn.xiaoeknow.com/image/lr4jn5ri0juu.jpg" alt="">
<div class="fourwords">
<p>关注小鹅通公众号</p>
<p>进入小鹅创业社区</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="fourmain">
<div class="fourmain-one">
<ul>
<li>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</li>
<li>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</li>
<li>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</li>
</ul>
</div>
<div class="fourmain-two">
<ul>
<li>商务合作：support@xiaoe-tech.com</li>
<li>渠道合作：partner@xiaoe-tech.com</li>
<li>投诉意见：xiaoeks@xiaoe-tech.com</li>
</ul>
</div>
<div class="fourmain-three">
<ul>
<li>互联网违法和不良信息举报电话：0755-26409534</li>
<li>互联网不良信息举报邮箱：xiaoeks-tech.com</li>
<li>安全漏洞反馈邮箱：security@xiaoe-tech.com</li>
</ul>
</div>
</div>
<div class="version">
<ul>
<li>友情链接</li>
<li>知识付费软件</li>
<li>只是付费平台</li>
<li>小鹅通企学院</li>
<li>私域直播工具</li>
<li>小鹅通APP</li>
<li>小鹅创业社区</li>
<li>小鹅通移动版</li>
<li>小鹅通学员版</li>
</ul>
</div>
<div class="fourfooter">
<div class="kuaibao">
<ul>
<li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAAeCAYAAACVBrgjAAAAAXNSR0IArs4c6QAAEORJREFUaEOdWQmUVdWV3fu8P9RA4YQtwq8qJJXEqdVoJypEK5CYII=" alt="">抗菌抗病毒口罩消费风险提示</li>
<li>工商营业执照</li>
<li><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEw7KKbT6e305yEvLS39ZWZmZvM/AgwAdv3YzH7F/f0AAAAASUVORK5CYII=" alt="">工商网监 电子表识</li>
</ul>
</div>
<div class="address">
<p>Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved. 粤ICP备15020529号-1</p>
<p>互联网药品信息服务资格证书（粤）—经营性—2020—0589
医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号</p>
</div>
</div>
</div>
</div>
</body>
</html>
第九段效果展示：
image.png
