場景一：字?jǐn)?shù)不一樣,右側(cè)有長豎線代碼如下：

可" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 超實用！網(wǎng)頁中常見的導(dǎo)航欄布局

超實用！網(wǎng)頁中常見的導(dǎo)航欄布局

時間：2023-10-01 00:00:01 | 來源：網(wǎng)站運營

時間：2023-10-01 00:00:01 來源：網(wǎng)站運營

超實用！網(wǎng)頁中常見的導(dǎo)航欄布局：在網(wǎng)頁開發(fā)中關(guān)于導(dǎo)航欄的布局相信各位小伙伴都碰到過吧，接下來我給大家整理了在網(wǎng)頁中常見的幾種導(dǎo)航欄的布局，大家看看有沒有自己需要的。

場景一：字?jǐn)?shù)不一樣,右側(cè)有長豎線

代碼如下：

可以看到在導(dǎo)航條中每一個選項里面的字的數(shù)量都是不一樣的，所以我們是不能定寬度的，左右的間距應(yīng)該用內(nèi)間距擠開比較合適。

html結(jié)構(gòu)：

<div class="nav"> <ul class="center"> <li><a href="#">考試認(rèn)證</a></li> <li><a href="#">前端開發(fā)</a></li> <li><a href="#">編程語言</a></li> <li><a href="#">軟件測試</a></li> <li><a href="#">電商設(shè)計</a></li> <li><a href="#">其他的課程</a></li> <li><a href="#">新聞資訊</a></li> <li><a href="#">人力資源</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul></div>css樣式：

/* 清除掉默認(rèn)的內(nèi)外間距 */* { padding: 0; margin: 0; } /* 導(dǎo)航條定高度和背景色，寬度不定，大通欄 */ .nav{ height: 58px; background-color: #000; } .center { width: 1000px; list-style: none; margin: 0 auto; background-color: pink; } /* 利用浮動讓每一個選項橫向排列 */ li{ float: left; border-right: 1px solid rgb(161, 158, 158); } /* 鼠標(biāo)滑過編一個背景色 */ li:hover{ background-color: violet; } /* 轉(zhuǎn)塊元素是為了讓選項的點擊范圍變大，左右通過內(nèi)間距擠開，行高和大通欄高度一樣 */ a{ display: block; padding: 0 20px; line-height: 58px; text-decoration: none; color: white; } /* 取消最后一個選項的右側(cè)線 */ .nav li:last-child{ border-right: 0; }

場景二：導(dǎo)航右側(cè)短豎線的做法

html結(jié)構(gòu)：

<div class="nav"> <ul class="center"> <li><a href="#">考試認(rèn)證</a>|</li> <li><a href="#">前端開發(fā)</a>|</li> <li><a href="#">編程語言</a>|</li> <li><a href="#">軟件測試</a>|</li> <li><a href="#">電商設(shè)計</a>|</li> <li><a href="#">其他的課程</a>|</li> <li><a href="#">新聞資訊</a>|</li> <li><a href="#">人力資源</a>|</li> <li><a href="#">聯(lián)系我們</a></li> </ul></div>css樣式：

* { padding: 0; margin: 0; } .nav{ height: 58px; background-color: #000;}.center { width: 1000px; list-style: none; margin: 0 auto; background-color: pink;}li{ color: rgb(224, 9, 9); float: left;}li:hover{ background-color: violet;}a{ /* 一定注意要把a轉(zhuǎn)成行內(nèi)塊元素， 如果轉(zhuǎn)的是塊元素那么短豎線會掉下去， 因為塊級元素是獨占一行的 */ display:inline-block; padding: 0 20px; line-height: 58px; text-decoration: none; color: white;}

場景三：鼠標(biāo)滑過消失的底邊線

html結(jié)構(gòu)：

<div class="nav"> <ul class="center"> <li><a href="#">考試認(rèn)證</a></li> <li><a href="#">前端開發(fā)</a></li> <li><a href="#">編程語言</a></li> <li><a href="#">軟件測試</a></li> <li><a href="#">電商設(shè)計</a></li> <li><a href="#">其他的課程</a></li> <li><a href="#">新聞資訊</a></li> <li><a href="#">人力資源</a></li> </ul> </div>css樣式：

* { padding: 0; margin: 0; } .nav{ margin-top: 50px; height: 58px; } .center { width: 1000px; height: 100%; list-style: none; margin: 0 auto; border-bottom: 1px solid #000; } li{ background-color: #ccc; float: left; border: 1px solid red; border-bottom: 0; margin-right: 10px; } /* 鼠標(biāo)滑過的時候讓li高度加大，再往上走一點， 將底邊線的顏色加成白色，這樣就會覆蓋掉那條黑色的線 */ li:hover{ height: 60px; margin-top: -3px; border-bottom: 1px solid #fff; } a{ display:block; padding: 0 20px; height: 57px; line-height: 57px; text-decoration: none; color: rgb(231, 108, 108); } li:last-child{ margin-right: 0; }

場景四：移動端導(dǎo)航條

在移動端上經(jīng)常會出現(xiàn)橫向滾動的效果，右側(cè)有一個更多按鈕，這種布局的代碼參考如下：

html結(jié)構(gòu)：

<nav> <ul> <li>精選</li> <li>首頁</li> <li>男裝</li> <li>女裝</li> <li>童裝</li> <li>高跟鞋</li> <li>筆記本</li> <li>筆記本2</li> <li>筆記本3</li> </ul> <!-- 這是更多的圖標(biāo)，利用iconfont寫的 --> <div class="iconfont icon-gongzuo"></div></nav>::-webkit-scrollbar { display: none;}* { padding: 0; margin: 0;}ul { list-style: none;}nav { height: 35px; display: flex; border-bottom: 1px solid gray;}nav>ul { flex: 1; height: 100%; display: flex; align-items: center; overflow: auto;}nav>ul>li { flex-shrink: 0; padding: 0 10px;}nav>div { text-align: center; width: 35px; height: 100%; line-height: 35px;}場景五：二級菜單的制作

我們?nèi)绻抢胏ss的hover來實現(xiàn)的鼠標(biāo)滑過出現(xiàn)二級菜單

html結(jié)構(gòu)：

<ul class="nav clear-fix"> <li>小米手機</li> <li>紅米手機</li> <li>電視</li> <li>筆記本</li> <li>平板</li></ul><div class="bigBox"> <ul> <li>xiaomi</li> <li>xiaomi</li> <li>xiaomi</li> <li>xiaomi</li> <li>xiaomi</li> </ul></div>css樣式：

* { padding: 0; margin: 0; box-sizing: border-box;}.clear-fix::after { display: block; content: " "; width: 0; height: 0; visibility: hidden; overflow: hidden; clear: both;}ul { list-style: none;}.nav { width: 800px; margin: 0 auto; margin-top: 50px;}.nav li { width: 150px; height: 40px; background: pink; border-right: 1px solid purple; float: left; text-align: center; line-height: 40px;}.bigBox { height: 200px; background: red; display: none;}.bigBox ul { width: 1000px; height: 100%; margin: auto; background: rosybrown;}.bigBox ul li { width: 200px; height: 100%; border-right: 1px solid blue; background: blueviolet; float: left;}js代碼：

let oLis = document.querySelectorAll(".nav li");let oBigBox = document.querySelector(".bigBox");lis2 = document.querySelectorAll(".bigBox>ul>li")for (let i = 0; i < oLis.length; i++) { oLis[i].onmouseover = function (e) { oBigBox.style.display = "block"; for (let j = 0; j < lis2.length; j++) { lis2[j].innerHTML = oLis[i].innerHTML + j } } oLis[i].onmouseout = function (e) { oBigBox.style.display = "none"; }}oBigBox.onmouseover = function (e) { oBigBox.style.display = "block";}oBigBox.onmouseout = function (e) { oBigBox.style.display = "none";}好了，今天就分享到這里了。希望今天的分享能幫到大家，有什么疑問可以在評論中留言分享。

關(guān)鍵詞：導(dǎo)航,布局,中常,實用

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉