第一步：建立新文件css，images，index.html
第二部代码
css
#style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width:100%;
height:100%;
font-family: "宋体";
font-size: 16px;
}
index.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;
transition: .2s all;
}
.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);
background-size: 115px 35px;
background-repeat: no-repeat;
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),
.btns div:nth-of-type(1),
.btns div:nth-of-type(2){
transition: .2s all;
cursor:pointer;
width:100px;
height:40px;
line-height: 40px;
text-align:center;
border:solid 1px #4872f6;
border-radius:5px;
background-color:white;
color:#4872f6;
}
.btns div:nth-of-type(1),
.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;
transition: .2s all;
}
.info .msg .btns div:nth-of-type(1):hover,
.nav-login div:nth-of-type(3):hover{
background-color:#819cf8;
transition: .2s all;
}
.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;
}
.industry h1,
.intro h1,
.sence 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;
justify-content: 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(120deg, #ffffff, #e6edf6);
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;
}
.btns{
display:flex;
gap: 20px;
}
.industry{
height:732px;
background-color:rgb(255, 127, 234);
background-image:url(../images/m0w7ssdh01vr.png);
background-size:cover;
background-position:center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.industry h1{
color:white;
}
.industry .box{
width: 1263px;
height: 457px;
background-color: rgba(33, 39, 47, 0.8);
border-radius:12px;
overflow:hidden;
backdrop-filter: blue(5px);
display:flex;
}
.box .b-left{
width: 181px;
height: 457px;
background-color: #2e3646;
padding:28px 21px;
}
.b-left{
display:flex;
flex-direction: column;
gap:20px;
}
.b-left p{
width:146px;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.b-left p.active{
background: linear-gradient(90deg, #3e59af, #2e3646);
}
.b-left img{
width:20px;
height:20px;
}
.b-left span{
color:#fff;
}
.b-center{
padding: 35px;
color:white;
display:flex;
flex-direction: column;
justify-content: space-between;
font-size:13px;
}
.b-center h2{
font-size:26px;
}
.b-center .items{
width:600px;
display:flex;
gap:20px;
flex-wrap: wrap;
}
.items .item-box{
width:75px;
height: 75px;
border:solid 1px #666;
border-radius:4px;
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.items .item-box img{
width:30px;
height:30px;
}
.item .btns{
height:150px;
}
.b-right{
width:200px;
height:100%;
padding:50px;
}
.b-right h3{
padding-left:10px;
padding-bottom:50px;
font-size:18px;
font-weight:500;
color:white;
}
.b-right .item-box{
display:flex;
flex-wrap: wrap;
gap:20px;
width:200px;
}
.b-right .item-box img{
width:83px;
height: 83px;
}
.tech{
height: 658px;
background-color:blanchedalmond;
}
.service{
height: 734px;
background-color:aquamarine;
}
.xiaoet{
height:1058px;
background-color:bisque;
}
.advisory{
height:264px;
background-image:url(../images/m201jna00mof.png);
background-size:cover;
background-position:left;
}
.message{
height:721px;
background-color:black;
}
images:存图片文件夹
index.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="#">免费试用 →</a>
</div>
<div>
<h3 class="title">私域直播</h3>
<p>企业级专属私域直播平台<br>
实现私域流量高效运营</p>
<a href="#">免费试用 →</a>
</div>
<div>
<h3 class="title">企微SCRM</h3>
<p>企业微信私域运营神器<br>
数据洞察驱动业绩增长</p>
<a href="#">免费试用 →</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="box">
<div class="b-left">
<p class="active">
<img src="./images/m0z15s580ei2.webp" alt="">
<span>新零售门店</span>
</p>
<p>
<img src="./images/m0z15s560wz6.webp" alt="">
<span>职业培训</span>
</p>
<p>
<img src="./images/m0z15tx30tif.webp" alt="">
<span>知识付费</span>
</p>
</div>
<div class="b-center">
<h2>新零售门店解决方案</h2>
<p>私域直播带货+推广门店体系，助力大健康商家私域流量高效变现</p>
<div class="items">
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
<div class="item-box">
<img src="./images/m0z15s560wz6.webp" alt="">
<span>直播带货</span>
</div>
</div>
<div class="btns">
<div>免费试用</div>
<div>了解详情</div>
</div>
</div>
<div class="b-right">
<h3>行业案例</h3>
<div class="item-box">
<img src="./images/m1n7u98h0aet.webp" 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"></div>
<!-- 运营服务 -->
<div class="bg service"></div>
<!-- 小鹅通 -->
<div class="bg xiaoet"></div>
<!-- 咨询 -->
<div class="bg advisory"></div>
<!-- 友情链接、公司信息 -->
<div class="bg message"></div>
</body>
</html>
第三步结果展示
屏幕截图 2025-02-07 182035.png
屏幕截图 2025-02-07 182140.png
屏幕截图 2025-02-07 182214.png
