模拟小鹅通首页
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="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">
<div class="msg">
<h2>知识付费行业解决方案</h2>
<h3>提供内容变现能力,助力品牌IP打造</h3>
<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>
<div class="you">
<h4>行业案例</h4>
<div>
<div></div>
<div></div>
</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;
padding: 90px;
background-image: url("../images/行业背景图.png");
/* 设置背景图片，值-`url(图片相对路径) */
background-size: 1690px 730px;
/*设置背景图片尺寸，宽度、高度*/
background-repeat: no-repeat;
/* 设置背景图片排列方式，默认x轴、y轴无限循环 */
/*background-position: 0 20px;
/* 设置背景图片出现的位置 */
display:flex;
/* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
flex-direction: column;
/* 样式修改主轴方向 */
/* 弹性样式的主轴方向，默认水平方向(行)
row: 水平-从左到右依次排列
row-reverse：水平-从右到左依次排列
column:垂直-从上到下依次排列
column-reverse：垂直-从下到上一次排列
*/
align-items: center;
/* `交叉轴方向的对齐方式(start\|center\|end) */
justify-content: space-between;
/* 主轴方向对齐方式 space-between 从左到右平均分布，两侧不留空隙 */
}
.industry h1{
font-size:42px;
}
/*
.标签的class属性值 {
样式代码
}class选择器
父选择器 子选择器 {
样式代码
}进阶 - 后代选择器
*/
.industry .he{
width: 1268px;
height: 459px;
background: #39414C4D;
display:flex;
/* 将当前的标签(容器)设置为弹性模型 弹性样式：默认从左到右进行排列 */
flex-direction: row;
/* 样式修改主轴方向 */
/* 弹性样式的主轴方向，默认水平方向(行)
row: 水平-从左到右依次排列
row-reverse：水平-从右到左依次排列
column:垂直-从上到下依次排列
column-reverse：垂直-从下到上一次排列
*/
align-items: center;
/* `交叉轴方向的对齐方式(start\|center\|end) */
justify-content: space-between;
/* 主轴方向对齐方式 space-between 从左到右平均分布，两侧不留空隙 */
}
.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;
}
效果
