小鵝通主頁效果展示
屏幕截圖_22-3-2025_215238_.jpeg
<!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/demo02.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bg header-nav">
<div class="w-content">
<div class="nav">
<div class="logo">
<ul class="left">
<li class="lg"><img src="./img/下載 (1)(1).png" alt=""></li>
<li><a href="#">首頁</a></li>
<li><a href="#">解決方案</a></li>
<li><a href="#">產(chǎn)品服務(wù)</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="#">關(guān)于我們</a></li>
</ul>
<ul class="right">
<li>我是學員</li>
<li>商家登錄</li>
<li>免費試用</li>
</ul>
</div>
</div>
<div class="banner"><img src="./img/m28mi8rp0qr5(1).webp" alt=""></div>
</div>
</div>
<div class="bg chanpin">
<div class="content">
<div class="biaoti">我們的產(chǎn)品能力</div>
<div class="tupian">
<img src="./img/m3moa2m10v5k(1).png">
</div>
<div class="jieshao">
<div>
<h3>知識店鋪</h3>
<p>一分鐘搭建您的知識商店<br>
助力高效的知識變現(xiàn)</p>
<p><a href="#">免費試用 →</a></p>
</div>
<div>
<h3>私域直播</h3>
<p>企業(yè)級專屬私域直播平臺<br>
實現(xiàn)私域流量高效運營</p>
<p><a href="#">免費試用 →</a></p>
</div>
<div>
<h3>企微SCRM</h3>
<p>企業(yè)微信私域運營神器<br>
數(shù)據(jù)洞察驅(qū)動業(yè)績增長</p>
<p><a href="#">免費試用 →</a></p>
</div>
</div>
</div>
</div>
<div class="bg changjing">
<div class="content">
<div class="bt">我們的場景解決方案</div>
<div class="cd">
<ul class="kk">
<li class="active">公域獲客</li>
<li>私域運營</li>
<li>直播帶貨</li>
<li>內(nèi)容交付</li>
<li>數(shù)據(jù)化運營</li>
</ul>
</div>
<div class="neirong">
<div class="tp"><img src="./img/m10c72vn0zzo (2)(1).png" alt=""></div>
<div class="wenzi">
<h2>公域獲客</h2>
<h3>多渠道獲客，沉淀私域流量池</h3>
<p>打通抖音/快手/小紅書/視頻號/公眾號，支持直播間/短視頻/賬號主頁等多種課程掛載方式，快速開啟知識變現(xiàn)</p>
<p>多種公域轉(zhuǎn)私域工具，支持添加企微/引流加群加人/渠道活碼/分配引擎等工具，客戶可批量導流到私域流量池</p>
<p>豐富的廣告獲客能力，落地頁支持表單/支付類/0元領(lǐng)取/添加企微等多場景，提升廣告ROI</p>
<div class="free">
<div>免費試用</div>
<div>了解詳情</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg hangye">
<div class="content">
<h1 class="title">我們的行業(yè)解決方案</h1>
<div class="box">
<!-- 左側(cè)菜單 -->
<div class="left-menu">
<div class="menu-item">新零售門店</div>
<div class="menu-item">職業(yè)培訓</div>
<div class="menu-item">知識付費</div>
<div class="menu-item">美業(yè)直播</div>
</div>
<!-- 中間內(nèi)容 -->
<div class="bushi">
<h2>新零售門店解決方案</h2>
<p>私域直播帶貨+推廣門店體系</p>
<div class="grid">
<div class="grid-item">直播帶貨</div>
<div class="grid-item">在線商城</div>
<div class="grid-item">門店管理</div>
<div class="grid-item">門店抖音</div>
<div class="grid-item">直播紅包</div>
<div class="grid-item">直播抽獎</div>
<div class="grid-item">邀請達人</div>
<div class="grid-item">商品秒殺</div>
</div>
<button>免費試用</button>
<button>了解詳情</button>
</div>
<!-- 右側(cè)案例 -->
<div class="right-cases">
<h3>行業(yè)案例</h3>
<div class="cases-grid">
<div class="case"><img src="./img/m1.png" alt=""></div>
<div class="case"><img src="./img/m2.png" alt=""></div>
<div class="case"><img src="./img/m3.png" alt=""></div>
<div class="case"><img src="./img/m4.png" alt=""></div>
</div>
</div>
</div>
</div>
</div>
<div class="bg jishu">
<div class="gg">
<div class="topic">
<h2>我們的技術(shù)優(yōu)勢</h2>
</div>
<div class="mask">
<div class="ziji">
<div class="aa"><img src="./img/m04n363d0eas.webp" alt=""></div>
<div class="bb"><img src="./img/m04n363e0jjz(1).png" alt=""></div>
<div class="cc"><img src="./img/m04n363709k8(1).png" alt=""></div>
</div>
</div>
</div>
</div>
<div class="bg yunying">
<div class="w-content">
<h1 class="service-headline">我們的運營服務(wù)</h1>
<div class="under">
<div class="service-card-container">
<!-- 社群服務(wù) -->
<div class="service-card-item">
<div class="service-image-wrapper">
<img src="./img/A.png" alt="社群服務(wù)" class="service-image">
</div>
<h2 class="service-title-text">社群服務(wù)</h2>
<p class="service-desc-text">標桿商家分享，同行商家交流，想比別人快一步</p>
</div>
<!-- 管家服務(wù) -->
<div class="service-card-item">
<div class="service-image-wrapper">
<img src="./img/B.png" alt="管家服務(wù)" class="service-image">
</div>
<h2 class="service-title-text">管家服務(wù)</h2>
<p class="service-desc-text">客戶經(jīng)理、服務(wù)管家、多角色在群，服務(wù)全面包圍</p>
</div>
<!-- 大客服務(wù) -->
<div class="service-card-item">
<div class="service-image-wrapper">
<img src="./img/C).png" alt="大客服務(wù)" class="service-image">
</div>
<h2 class="service-title-text">大客服務(wù)</h2>
<p class="service-desc-text">設(shè)置夜班服務(wù)管家/假期值班管家，24小時在線服務(wù)，服務(wù)從不掉線</p>
</div>
<!-- 運維服務(wù) -->
<div class="service-card-item">
<div class="service-image-wrapper">
<img src="./img/D.png" alt="運維服務(wù)" class="service-image">
</div>
<h2 class="service-title-text">運維服務(wù)</h2>
<p class="service-desc-text">需求24小時反饋，需求處理1v1回復</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<div class="bg xiaoetong">
<div class="w-content">
<h1 class="top">他們都在用小鵝通</h1>
<p class="word">(排位不分先后)</p>
<div class="exterior">
<div class="photo">
<img src="./img/code1.png " alt="">
</div>
<div class="photo">
<img src="./img/code2.png " alt="">
</div>
<div class="photo">
<img src="./img/code3.png " alt="">
</div>
</div>
<div class="screenshot"><img src="./img/screenshot.png"></div>
<p class="click">查詢更多案例</p>
</div>
</div>
<div class="bg saoma">
<div class="w-content">
<div class="banner">立即掃碼咨詢，領(lǐng)取您的專屬解決方案</div>
<div class="QR">
<img src="./img/qr).png" alt="">
<div class="miaoshu">
<ul class="list">
<li>
掃碼添加客戶經(jīng)理
</li>
<li>或者您也可以先</li>
<li>免費試用</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg footer">
<div class="content">
<div class="frame">
<div class="outline">
<h2>場景</h2>
<div class="line">
<ul>
<li>公域獲客</li>
<li>私域運營</li>
<li>直播帶貨</li>
<li>內(nèi)容交付</li>
<li>數(shù)據(jù)化運營</li>
<li>企業(yè)內(nèi)訓</li>
</ul>
</div>
</div>
<div class="outline">
<h2>行業(yè)</h2>
<div class="line">
<ul>
<li>新零售門店</li>
<li>職業(yè)培訓</li>
<li>知識付費</li>
<li>美業(yè)直播</li>
</ul>
</div>
</div>
<div class="outline">
<h2>產(chǎn)品</h2>
<div class="line">
<ul>
<li>知識店鋪</li>
<li>私域直播</li>
<li>企微SCRM</li>
<li>小鵝通小程序</li>
<li>小鵝通直播</li>
</ul>
</div>
</div>
<div class="outline">
<h2>服務(wù)</h2>
<div class="line">
<ul>
<li>社群服務(wù)</li>
<li>管家服務(wù)</li>
<li>大客服務(wù)</li>
<li>運維服務(wù)</li>
</ul>
</div>
</div>
<div class="outline">
<h2>關(guān)于我們</h2>
<div class="line">
<ul>
<li>關(guān)于我們</li>
<li>聯(lián)系我們</li>
<li>加入我們</li>
<li>媒體報道</li>
</ul>
</div>
</div>
<div class="outline">
<h2>媒體報道</h2>
<div class="line">
<ul>
<li>D輪融資1.2億美元，小鵝通究竟在做什么？</li>
<li>知識付費用戶達5.27億，內(nèi)容創(chuàng)業(yè)的下半場風口在...</li>
<li>知識工作者的終極夢想，可能是擁有一個“第二大腦”
</li>
<li>小鵝通：讓知識更有價值
</li>
<li>
小鵝通聯(lián)合艾瑞咨詢發(fā)布《2023年中國私域運營洞察</li>
</ul>
</div>
</div>
<div class="number">400-102-6665
<ul class="number">
<li>周一至周日 9:00-21:00
</li>
</ul>
<div class="b">
<div><img src="./img/qr1.png" alt=""></div>
<div><img src="./img/3.jpg" alt=""></div>
</div>
</div>
</div>
<div class="floor">
<ul class="contact-way">
<li>
<深圳總部：深圳市南山區(qū)粵海街道科興科學園D3棟7樓 </li>
<li>北京地址：北京市朝陽區(qū)朝外大街乙6號23層2301B-2307
</li>
<li>上海地址：中國（上海）自由貿(mào)易試驗區(qū)世紀大道1500號1601-A室</li>
</ul>
<ul class="email">
<li>商務(wù)合作：support@xiaoe-tech.com
</li>
<li>渠道合作：partner@xiaoe-tech.com
</li>
<li>投訴意見：xiaoeks@xiaoe-tech.com
</li>
</ul>
<ul class="contact-way">
<li>互聯(lián)網(wǎng)違法和不良信息舉報電話：0755-26409534
</li>
<li>互聯(lián)網(wǎng)違法和不良信息舉報電話：0755-26409534
</li>
<li>互聯(lián)網(wǎng)違法和不良信息舉報電話：0755-26409534
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
css樣式代碼
bg {
width: 100%;
display: flex;
justify-content: center;
}
.w-content {
width: 1800px;
}
.content {
width: 1400px;
}
.header-nav .w-content {
height: 600px;
/*background-color: rgb(183, 118, 33);*/
}
/* 小鵝通菜單 */
.nav {
height: 72px;
/*background-color: #fff;*/
justify-content: center;
display: flex;
background-color: transparent;
}
.nav:hover{
background-color: #fff;
}
.logo {
width: 1600px;
/* background-color: #535553;*/
height: 72px;
display: flex;
justify-content: space-between;
}
ul {
list-style: none;
}
.left {
display: flex;
align-items: center;
gap: 28px;
}
.left a {
/*: #333;*/
text-decoration: none;
}
.left a:hover {
color: #3582f5;
}
.lg img {
width: 100px;
height: 42px;
}
.right {
display: flex;
gap: 25px;
align-items: center;
font-weight: 480;
font-size: 18px;
}
.right li:nth-of-type(1):hover {
color: #3582f5;
cursor: pointer;
}
.right li:nth-of-type(2) {
width: 120px;
height: 42px;
border: solid 1px #3582f5;
border-radius: 8px;
text-align: center;
line-height: 40px;
}
.right li:nth-of-type(2):hover {
background-color: #3582f5;
color: #fff;
transition: all .2s;
cursor: pointer;
}
.right li:nth-of-type(3) {
background-color: #3582f5d8;
color: #fff;
border: solid 1px #3582f5;
border-radius: 8px;
width: 120px;
height: 42px;
text-align: center;
line-height: 40px;
}
.right li:nth-of-type(3):hover{
background-color: hsla(216, 85%, 61%, 0.847);
color: #fff;
cursor: pointer;
}
.banner{
width: 100%;
height: 528px;
}
.banner img{height: 600px;
position: absolute;
top: -72px;
left: -180px;
z-index: -1;
}
/*-----產(chǎn)品的css*/
.chanpin .content {
height: 1126px;
background-color: #F5F8FF;
display: flex;
justify-content: space-evenly;
flex-direction: column;
align-items: center;
background:linear-gradient(177edg,#fff,#eef1fc);
}
.biaoti{font-size: 50px;
font-weight: 600;
gap: 5px;
}
.tupian img{height: 560px;
width: 1400px;
border-radius: 10px;
}
.jieshao {display: flex;
gap: 120px;
}
.jieshao div{
width: 380px;
height: 200px;
background-color: #f6f4f4;
padding: 30px;
display: flex;
justify-content: space-between;
flex-direction: column;
border-radius: 5px;
}
.jieshao div h3{
font-size: 30px;
font-family: "微軟雅黑";
font-weight: 500;
}
.jieshao div p{
color: rgb(168, 160, 160);
}
.jieshao div p a{
text-decoration: none;
color: #4872f6;
}
/*--------場景布局*/
.changjing .content {
height: 1000px;
background: linear-gradient(90edg,#fefef1,#e2e2f1);
justify-content:space-evenly;
display: flex;
flex-direction: column;
align-items: center;
}
.bt{
font-size: 42px;
font-weight: 600;
}
.kk{
width: 850px;
height: 35px;
background-color: rgb(241, 243, 244);
}
.cd ul{display: flex;
justify-content: space-between;
border: solid 2px rgb(250, 253, 254);
border-radius: 25px;
padding: 3px;
text-align: center;
}
.content li.active{background-color: #4872f6;
color: hsl(0, 100%, 100%);
border-radius: 25px;
}
.neirong{display: flex;
border-radius: 10px;
border: solid 4px hsl(180, 11%, 96%);
width: 1400px;
height: 550px;
}
.tp img{width: 630px;
height: 546px;
}
.wenzi{
width: 760px;
height: 546px;
background-color: hsl(60, 100%, 100%);
justify-content: space-around;
align-items: center;
flex-direction: column;
padding: 50px;
display: flex;
}
.wenzi h2{
font-size: 30px;
}
.wenzi h3{
font-size: 22px;
font-weight: 500;
}
.wenzi p{
color: gray;
background-image:url(./下載\ \(1\)\(1\).pn);
background-repeat: no-repeat;
background-position: 0 center;
padding-left: 20px;
}
.wenzi .free{
display: flex;
gap: 30px;
}
.wenzi .free div{
width: 100px;
height: 38px;
border: solid 1px #4872f6;
border-radius: 8px;
text-align: center;
line-height: 38px;
}
.wenzi .free div:nth-of-type(1){
background-color: #4872f6;
color: #fff;
}
.wenzi .free div:nth-of-type(2){
background-color: #fff;
color: #4872f6;
transition: all .2s;
}
/*行業(yè)布局*/
.hangye .content {
height: 500px;
background-color:#1a2942;
}
.title {
text-align: center;
margin-bottom: 30px;
}
.box {
display: flex;
gap: 20px;
padding: 20px;
max-height: 400px;
justify-content: space-between;
align-items: center;
}
/* 左側(cè)菜單 */
.left-menu {
width: 150px;
background:#293646 ;
padding: 10px;
color: #fff;
}
.menu-item {
padding: 10px;
margin: 5px 0;
background: #1a2942;
color: #fff;
}
/* 中間內(nèi)容 */
.bushi{
height: 300px;
background: #243447;
padding: 20px;
color: #fff;
}
.button{
border: solid 1px #fff;
border-radius: 12px;
width: 120px;
height: 42px;
text-align: center;
line-height: 40px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 20px 20px;
}
.grid-item {
background: #1a2942;
padding: 10px;
text-align: center;
}
button {
padding: 8px 16px;
margin-right: 10px;
}
/* 右側(cè)案例 */
.right-cases {
width: 150px;
background: #243447;
padding: 10px;
max-height: 400px;
}
.cases-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.case {
background: white;
height: 60px;
}
.case img{
width: 100%;
height: 60px;
}
/*技術(shù)布局*/
.jishu .content {
height: 745px;
background-color:#F5F7FA ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
}
.topic h2{font-size: 42px;
font-weight: 600;
text-align: center;
margin-top: 180px;
}
.mask{
display: flex;
width: 1400px;
justify-content: space-between;
align-items: center;
}
.ziji{
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 20px;
margin-top: 180px;
}
.aa img{width: 450px;
height: 300px;
border-radius: 12px;
border: solid 1px #fff;
}
.bb img{width: 450px;
height: 300px;
border-radius: 12px;
border: solid 1px #fff;
}
.cc img{width: 450px;
height: 300px;
border-radius: 12px;
border: solid 1px #fff;
}
.yunying .w-content {
height: 830px;
background-color: #FBFBFB;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.operation-wrapper {
max-width: 1400px;
max-height: 700px;
margin: 0 auto;
padding: 20px;
}
.under{
margin-top: 180px;
}
.service-headline {
text-align: center;
font-size: 42px;
margin-bottom: 40px;
font-weight: 600;
margin-top: 180px;
}
.service-card-container {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.service-card-item {
flex: 1;
min-width: 300px;
max-width: 320px;
overflow: hidden;
}
.service-image-wrapper {
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 8px;
}
.service-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.service-image:hover {
transform: scale(1.05);
}
.service-title-text {
font-size: 20px;
font-weight: bold;
margin: 15px 0 10px;
color: #333;
}
.service-desc-text {
font-size: 14px;
line-height: 1.6;
color: #666;
}
/*小鵝通*/
.xiaoetong .w-content {
height: 1200px;
background-color: #CCECFF;
justify-content: space-evenly;
flex-direction: column;
}
.top{
font-size: 42px;
font-weight: 600;
text-align: center;
margin-top: 100px;
}
.word{
color:#868F95 ;
text-align: center;
font-size: 24px;
}
.exterior{
display: flex;
justify-content: space-evenly;
margin-top: 150px;
}
.photo img{
width: 300px;
height: 300px;
border: solid 1px #fff;
border-radius: 12px;
}
.screenshot img{
width: 1800px;
height: 350px;
align-items: center;
margin-top: 30px;
}
.click{text-align: center;
font-size: 24px;
border: solid 1px #3d56f4;
border-radius: 8px;
background-color: #fff;
width: 150px;
color: #4872f6;
margin-top: 50px;
margin-left: 850px;
cursor: pointer;
}
.click:hover{
background-color: #4872f6;
color: #fff;
transition: all .2s;
}
.saoma .w-content {
height: 300px;
background-color: #4872f6;
display: flex;
flex-direction: column;
}
.banner{font-size: 35px;
text-align: center;
font-weight: 600;
color: #fff;
}
.QR{
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}
.QR img{
width: 160px;
height: 150px;
display: flex;
}
.list :nth-of-type(1){
font-size: 20px;
color: #fff;
}
.list :nth-of-type(3){
width: 120px;
height: 30px;
border: solid 1px #fff;
border-radius: 2px;
background-color: #fff;
color:#1472FF;
text-align: center;
margin-top: 20px;
}
.list :nth-of-type(2){
color: #fff;
}
.footer .content {
height: 760px;
background-color: #161E30;
}
.frame{
display: flex;
justify-content: space-between;
gap: 20px;
font-size: 20px;
}
.outline h2{
color: #fff;
}
.line li{
margin-bottom: 10px;
}
.line {
font-size: 16px;
font-weight: 500;
color:#9EA1A9;
margin-top: 20px;
}
.line ul{
margin:0 0 16px;
}
.number{
font-size: 50px;
color: #fff;
}
.number:nth-of-type(1){
font-size: 20px;
color: #eae9e9;
}
.b{
display: flex;
gap: 20px;
}
.b img{
width: 100px;
height: 100px;
}
.floor{
width: 800px;
height: 300px;
display: flex;
gap: 10px;
margin-top: 35px;
}
.floor ul{font-size: 16px;
color:#9A9EA6;
gap: 10px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
width: 100%;
height: 100%;
}
