模擬小鵝通首頁
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">
? ? ? ? <!-- 頁頭導(dǎo)航 -->
? ? ? ? <div class="nav">
? ? ? ? ? ? <div class="content">
? ? ? ? ? ? ? ? <!-- 左側(cè)菜單 -->
? ? ? ? ? ? ? ? <div class="nav-menus">
? ? ? ? ? ? ? ? ? ? <div class="logo"></div>
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <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>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <!-- 右側(cè)登錄 -->
? ? ? ? ? ? ? ? <div class="nav-login">
? ? ? ? ? ? ? ? ? ? <div>我是學(xué)員</div>
? ? ? ? ? ? ? ? ? ? <div>商家登錄</div>
? ? ? ? ? ? ? ? ? ? <div>免費(fèi)試用</div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <!-- banner圖 -->
? ? ? ? <div class="banner"></div>
? ? </div>
? ? <!-- 產(chǎn)品介紹 -->
? ? <div class="bg intro">
? ? ? ? <h1>我們的產(chǎn)品能力</h1>
? ? ? ? <img src="./images/m3moa2m10v5k.webp" alt="">
? ? ? ? <div class="info">
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3 class="title active">知識店鋪</h3>
? ? ? ? ? ? ? ? <p>1分鐘搭建您的知識商城<br>
? ? ? ? ? ? ? ? ? ? 助力高效知識變現(xiàn)</p>
? ? ? ? ? ? ? ? <a href="#">免費(fèi)試用 - →</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3 class="title">私域直播</h3>
? ? ? ? ? ? ? ? <p>企業(yè)級專屬私域直播平臺<br>
? ? ? ? ? ? ? ? ? ? 實現(xiàn)私域流量高效運(yùn)營</p>
? ? ? ? ? ? ? ? <a href="#">免費(fèi)試用 - →</a>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3 class="title">企微SCRM</h3>
? ? ? ? ? ? ? ? <p>企業(yè)微信私域運(yùn)營神器<br>
? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)洞察驅(qū)動業(yè)績增長</p>
? ? ? ? ? ? ? ? <a href="#">免費(fèi)試用 - →</a>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <!-- sence -->
? ? <div class="bg sence">
? ? ? ? <h1>我們的場景解決方案</h1>
? ? ? ? <ul class="list">
? ? ? ? ? ? <li>公域獲客</li>
? ? ? ? ? ? <li>私域運(yùn)營</li>
? ? ? ? ? ? <li>直播帶貨</li>
? ? ? ? ? ? <li>內(nèi)容交付</li>
? ? ? ? ? ? <li>數(shù)據(jù)化運(yùn)營</li>
? ? ? ? </ul>
? ? ? ? <div class="info">
? ? ? ? ? ? <img src="./images/m10c72vn0zzo.webp" alt="">
? ? ? ? ? ? <div class="msg">
? ? ? ? ? ? ? ? <h2>公域獲客</h2>
? ? ? ? ? ? ? ? <h3>多渠道獲客，沉淀私域流量池</h3>
? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? <li>打通抖音/快手/小紅書/視頻號/公眾號，支持直播間/短視頻/賬號主頁等多種課程掛載方式，快速開啟知識變現(xiàn)</li>
? ? ? ? ? ? ? ? ? ? <li>多種公域轉(zhuǎn)私域工具，支持添加企微/引流加群加人/渠道活碼/分配引擎等工具，客戶可批量導(dǎo)流到私域流量池</li>
? ? ? ? ? ? ? ? ? ? <li>豐富的廣告獲客能力，落地頁支持表單/支付類/0元領(lǐng)取/添加企微等多場景，提升廣告ROI</li>
? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? <div class="btns">
? ? ? ? ? ? ? ? ? ? <div>免費(fèi)試用</div>
? ? ? ? ? ? ? ? ? ? <div>了解詳情</div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <!-- 行業(yè)解決方案 -->
? ? <div class="bg industry">
? ? ? ? <h1>我們的行業(yè)解決方案</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">職業(yè)培訓(xùn)</span></div>
? ? ? ? ? ? ? ? <div><img src="./images/e97a1e6be8d332de218eba53001b301.png" width="18.59px" height="18.59px"><span style= "margin-left:8px">知識付費(fèi)</span></div>
? ? ? ? ? ? ? ? <div><img src="./images/e97a1e6be8d332de218eba53001b301.png" width="18.59px" height="18.59px"><span style= "margin-left:8px">美業(yè)直播</span></div>
? ? ? ? ? ? ? ? <!--span局部標(biāo)簽，修飾網(wǎng)頁中一**行內(nèi)的部分內(nèi)容-->
? ? ? ? ? ? ? ? <!--
? ? ? ? ? ? ? ? ?img : 圖片標(biāo)簽名稱，主要網(wǎng)頁中顯示圖片
? ? ? ? src屬性：顯示圖片的路徑（網(wǎng)址、本地路徑、圖片數(shù)據(jù)）
? ? ? ? width屬性：設(shè)置圖片寬度，一般推薦以像素為單位
? ? ? ? height屬性：設(shè)置圖片高度，一般推薦以像素為單位
? ? ? ? ? ? 寬度和高度設(shè)置任意一個數(shù)據(jù)，圖片等比例縮放；兩個屬性都設(shè)置-圖片拉伸
? ? ? ? alt屬性：當(dāng)圖片無法正常顯示時替代的文字描述
? ? ? ? ? ? ? ? -->
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="zhuong">
? ? ? ? ? ? ? ? <div class="msg">
? ? ? ? ? ? ? ? ? ? <h2>知識付費(fèi)行業(yè)解決方案</h2>
? ? ? ? ? ? ? ? ? ? <h3>提供內(nèi)容變現(xiàn)能力,助力品牌IP打造</h3>
? ? ? ? ? ? ? ? ? ? <div>知識店鋪</div>
? ? ? ? ? ? ? ? ? ? <div>專欄</div>
? ? ? ? ? ? ? ? ? ? <div>會員</div>
? ? ? ? ? ? ? ? ? ? <div>圈子</div>
? ? ? ? ? ? ? ? ? ? <div>直播</div>
? ? ? ? ? ? ? ? ? ? <div>表單</div>
? ? ? ? ? ? ? ? ? ? <div>裂變海報</div>
? ? ? ? ? ? ? ? ? ? <div>推廣員</div>
? ? <!--
? ? ? ? 按 Shift + Alt + 上/下方向鍵，可以直接復(fù)制一行代碼
? ? -->
? ? ? ? ? ? ? ? ? ? <div class="btns">
? ? ? ? ? ? ? ? ? ? ? ? <div>免費(fèi)試用</div>
? ? ? ? ? ? ? ? ? ? ? ? <div>了解詳情</div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="you">
? ? ? ? ? ? ? ? <h4>行業(yè)案例</h4>
? ? ? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? ? ? ? ? <div></div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
? ? <!-- 技術(shù)優(yōu)勢 -->
? ? <div class="bg tech">
? ? ? ? <h1>我們的技術(shù)優(yōu)勢</h1>
? ? ? ? <div>
? ? ? ? ? ? <img src="./images/7d5219a0ba20153ccea8b3dfd995db5.png" width="1268px" height="375px">
? ? ? ? </div>
? ? </div>
? ? <!-- 運(yùn)營服務(wù) -->
? ? <div class="bg service">
? ? ? ? <h1>我們的運(yùn)營服務(wù)</h1>
? ? ? ? <div class="nierong">
? ? ? ? ? ? <div><img src="./images/大客服務(wù).png" width="405px" height="215px"><div class="title">社群服務(wù)</div><div class="desc">標(biāo)桿商家分享，同行商家交流，總比別人快一步</div></div>
? ? ? ? ? ? <div><img src="./images/大客服務(wù).png" width="405px" height="215px"><div class="title">管家服務(wù)</div><div class="desc">客戶經(jīng)理、服務(wù)管家、多角色在群，服務(wù)全面包圍</div></div>
? ? ? ? ? ? <div><img src="./images/大客服務(wù).png" width="405px" height="215px"><div class="title">大客服務(wù)</div><div class="desc">設(shè)置夜班服務(wù)管家/假期值班管家，24小時在線服務(wù)，服務(wù)從不掉線</div></div>
? ? ? ? ? ? <div><img src="./images/大客服務(wù).png" width="405px" height="215px"><div class="title">運(yùn)維服務(wù)</div><div class="desc">需求24小時反饋，需求處理率大于90% ，產(chǎn)品經(jīng)理1v1回復(fù)</div></div>
? ? ? ? </div>
? ? </div>
? ? <!-- 小鵝通 -->
? ? <div class="bg xiaoet">
? ? ? ? <h1>他們都在用小鵝通</h1>
? ? ? ? <div>（*排名不分先后順序）</div>
? ? </div>
? ? <!-- 咨詢 -->
? ? <div class="bg advisory">
? ? ? ? <h1>立即掃碼咨詢，領(lǐng)取您的專屬解決方案</h1>
? ? </div>
? ? <!-- 友情鏈接、公司信息 -->
? ? <div class="bg message">
? ? ? ? <ul class="listo">
? ? ? ? ? ? <li>場景</li>
? ? ? ? ? ? <li>行業(yè)</li>
? ? ? ? ? ? <li>產(chǎn)品</li>
? ? ? ? ? ? <li>服務(wù)</li>
? ? ? ? ? ? <li>關(guān)于我們</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樣式：過渡動畫，讓樣式過渡持續(xù)指定時間 */
? ? 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);
? ? /* 設(shè)置背景圖片，值-`url(圖片相對路徑) */
? ? background-size: 115px 35px;
? ? /*設(shè)置背景圖片尺寸，寬度、高度*/
? ? background-repeat: no-repeat;
? ? /* ?設(shè)置背景圖片排列方式，默認(rèn)x軸、y軸無限循環(huán) */
? ? background-position: 0 20px;
? ? /* ?設(shè)置背景圖片出現(xiàn)的位置 */
}
.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;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: column;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.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/行業(yè)背景圖.png");
? ? /* 設(shè)置背景圖片，值-`url(圖片相對路徑) */
? ? background-size: 1690px 730px;
? ? ? ? /*設(shè)置背景圖片尺寸，寬度、高度*/
? ? background-repeat: no-repeat;
? ? ? ? /* ?設(shè)置背景圖片排列方式，默認(rèn)x軸、y軸無限循環(huán) */
? ? /*background-position: 0 20px;
? ? ? ? /* ?設(shè)置背景圖片出現(xiàn)的位置 */
? ? display:flex;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: column;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.industry h1{
? ? font-size:42px;
}
/*
.標(biāo)簽的class屬性值 {
? ? 樣式代碼
}class選擇器
父選擇器 ?子選擇器 {
? ? 樣式代碼
}進(jìn)階 - 后代選擇器
*/
.industry .he{
? ? width: 1268px;
? ? height: 459px;
? ? background: #39414C4D;
? ? display:flex;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: row;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.tech{
? ? padding: 90px;
? ? height: 658px;
? ? background-color:rgb(248, 248, 248);
? ? display:flex;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: column;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.service{
? ? height: 734px;
? ? padding: 90px;
? ? background-color:rgb(248, 248, 248);
? ? display:flex;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: column;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.service .nierong{
? ? width: 1700px;
? ? height: 334px;
? ? display:flex;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: row;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.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;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: column;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.xiaoet .div{
? ? width: 150px;
? ? height: 20px;
? ? color: #666666
}
.advisory{
? ? color: #fff;
? ? height:264px;
? ? background-color:rgb(5, 54, 249);
? ? display:flex;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: column;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.message{
? ? height:721px;
? ? background-color:rgb(36, 36, 36);
? ? color: #fff;
? ? display:flex;
? ? /* 將當(dāng)前的標(biāo)簽(容器)設(shè)置為彈性模型 彈性樣式：默認(rèn)從左到右進(jìn)行排列 */
? ? flex-direction: column;
? ? /* 樣式修改主軸方向 */
? ? /* 彈性樣式的主軸方向，默認(rèn)水平方向(行)
? ? row: 水平-從左到右依次排列
? ? row-reverse：水平-從右到左依次排列
? ? column:垂直-從上到下依次排列
? ? column-reverse：垂直-從下到上一次排列
? ? ?*/
? ? align-items: center;
? ? /* `交叉軸方向的對齊方式(start\|center\|end) */
? ? justify-content: space-between;
? ? /* 主軸方向?qū)R方式 ? ?space-between 從左到右平均分布，兩側(cè)不留空隙 */
}
.listo{
? ? list-style:none;
? ? background-color:white;
? ? width:725px;
? ? height:42px;
? ? border-radius:21px;
? ? display:flex;
? ? justify-content: space-evenly;
}
效果
