CSS導航欄制作總結

時間：2023-07-26 18:12:02 | 來源：網(wǎng)站運營

時間：2023-07-26 18:12:02 來源：網(wǎng)站運營

CSS導航欄制作總結：首先導航欄可以叫做鏈接列表。這樣我們就能夠清楚的知道，該如何進行制作了。

我們使用列表元素 + 鏈接元素 = 列表鏈接（導航欄）

為此 我制作了一個demo，效果展示在這里

點擊三種導航欄的制作

前言

在進行導航欄制作之前。我們需要知道，html中的列表中有一個默認的樣式。如圖所示




對于ol和ul兩種標簽，有個默認的屬性，padding-left=40px而margin-top和margin-bottom為16px。




對于dl這種元素來說。dl標簽 有margin-top和 margin-bottom均為16px。對于dd有margin-left為40px。

水平導航欄

由于使用列表元素，都會有一個默認的樣式，所以我們在進行導航欄制作的時候，一定要將這些樣式去除掉

ul { list-style-type: none; padding: 0; margin: 0;}li a { text-decoration: none;}


兩種方式創(chuàng)建水平導航欄，一種是display:inline-block一種是 float

display:inline-block

同樣的

/*修改默認樣式*/ul { list-style-type: none; padding: 0; margin: 0; background-color: #333;}?/*修改鏈接樣式*/li a { color: white; display: inline-block;/*注意如果要更改a鏈接的尺寸，必須給他block化*/ width: 50px; text-decoration: none;}/*將列表水平化*/li{ display: inline-block; text-align: center;}?/*更改懸浮狀態(tài)*/li a:hover { background-color: #111;}/*給出一個active類 進行導航激活狀態(tài)顯示*/li a.active { background-color: #4CAF50;}我們可以看上面的demo第一個效果。

需要注意的是 ，我們在進行display:inline-block的時候發(fā)現(xiàn)，block 和 block之間會有一個空格顯示，之前的文章探究過這個問題，這是由于<li>元素與<li>元素中間的回車符導致的。所以我們需要將html的代碼寫成這樣。

<ul class = "menu1"> <li><a class = "active" href="#">首頁</a></li><li><a href="#">發(fā)現(xiàn)</a></li><li><a href="#">關于</a></li></ul>這樣就可以解決了！效果：點擊三種導航欄的制作

float

將上面的導航欄，用float實現(xiàn)一下。由于我們這里面有浮動元素，所以需要清除浮動。需要在ul標簽中增加overflow: hidden;

sli { float: left; text-align: center;}?li a { color: white; display:inline-block; width: 50px; text-decoration: none;}li a:hover{ background-color: #111;}li a.active{ background-color: #4CAF50;}效果見demo。

垂直導航欄

和前面有些不同的是，我們可以通過ul來直接設置他的寬度了，因為此時的寬度就是垂直導航的寬度！

/*垂直導航欄的實現(xiàn)*/ul { width: 100px;}li { background-color: #111; text-align: center; border-bottom: 1px solid #333;}li a { display: inline-block; width: 100px; color: white; text-decoration: none;}?li a:hover{ background-color: aquamarine;}li a.active { background-color: #4CAF50;}效果如上面的demo點擊三種導航欄的制作

京東導航欄制作項目實例

點開京東的首頁，即可發(fā)現(xiàn)京東首頁。他有兩個導航欄，一個是左側垂直的導航欄，在進行懸浮的時候，出現(xiàn)右面的二級菜單目錄。

CSS基本的思路如下




我們首先進行頁面的基本結構書寫。左邊的垂直導航欄應該不是問題了。

一級菜單樣式

<!--左側一級導航欄布局--><div class="wrap"> <ul class="main"> <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="#">美妝/個護清潔/寵物</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="#">醫(yī)藥保健/計生情趣</a></li> <li><a href="#">圖書/文娛/電子書</a></li> <li><a href="#">機票/酒店/旅游/生活</a></li> <li><a href="#">理財/眾籌/白條/保險</a></li> <li><a href="#">安裝/維修/清潔保養(yǎng)</a></li> <li><a href="#">工業(yè)品</a></li> </ul></div>首先進行wrap 我們將其定寬為220px。同時后面的二級菜單需要用到絕對定位，所以需要將wrap進行relative化。

.wrap { width: 220px; font-size: 14px; position: relative;}之后就是將一些默認樣式更改。

由于之后要和二級菜單進行配合，所以在進行l(wèi)i 懸浮的時候，需要用到js的配合，所以不適用hover，而是使用active類，來進行。




.wrap { width: 220px; font-size: 14px;}?.wrap .main { list-style-type: none; margin: 0; overflow: hidden;?}?.wrap li { padding: 2px 0 2px 20px;?}?.wrap li a { text-decoration: none; color: #636363;}.wrap li.active { background-color: #d9d9d9;}.wrap li a:hover { color: #c81623;}接下來進行二級菜單的書

2. 二級菜單樣式

上面我們已經(jīng)大體畫出來了，可以使用dl來實現(xiàn)。

html可以這樣寫。由于這里是默認需要隱藏的，所以可以在里面添加一個none 類。

<div id="sub" class="none"> <div id="a" class="sub_content none"> <dl> <dt><a href="#">冰箱</a></dt> <dt> <a>xxx</a> <a>xxx</a> <a>XXX</a> <div id="sub" class="none"> <div id="a" class="sub_content none"> <dl> <dt><a href="#">冰箱</a></dt> <dt> <a>xxx</a> <a>xxx</a> <a>XXX</a> </dt> </dl> <dl> <dt></dt> <dd> <a></a> <a></a> </dd> </dl> </div> <div id="b" class="sub_content none"> </div> </div> </dt> </dl> <dl> <dt></dt> <dd> <a></a> <a></a> </dd> </dl> </div></div>?進行二級菜單的布局。

首先將sub絕對定位到相應的位置。并設置相應的寬度。和相應的背景，邊框。以及字體等等 。

#sub { position: absolute; width: 620px; left: 220px; top:0; border: 1px solid #f7f7f7; background-color: white; box-shadow: 2px 0 5px rgba(0,0,0,.3); margin: 0; padding: 10px; }


之后進行鏈接默認樣式的更改

#sub .sub_content a { font-size: 12px; text-decoration: none; color: #666;}由于我們之后進行的都是有浮動的，所以需要在其父元素下進行清除浮動。

.sub_content dl { overflow: hidden;}進行dt 和 dd的修改。首先需要將dt和dd在同一條線上進行排布，所以使其向左浮動。設置寬度，讓箭頭定位。同時我們需要將它的元素默認屬性margin-left40px 改成 0

.sub_content dt { float: left; width: 70px position: relative；}.sub_content dd { margin: 0; padding-left: 80px;//讓其自己對齊}之后，需要將 dd中的a元素進行浮動定位，從而能夠使得不自動換行，完整的a標簽不被拆分成兩行。同時還需要加入一些樣式。border-left

.sub_content dd a { float: left; padding: 0 10px; margin: 4px 0; border-left: 1px solid #e0e0e0;}到此為止。只需要加入箭頭的定位即可。我們可以看出來，我們是可以通過i來設置寬高的。之后進行垂直居中，由前面可以推斷出dt的高度為12px（字體高度）+ 2 X 4px(a元素的margin)=20px

所以我們將i元素的高度設置為14px,需要將top偏移3px即可！需要注意i元素內部也要居中，只要將line-height: 14px;即可

.sub_content dt i { position: absolute; height: 14px; font: 9px/14px Consolas;/*字體在a 元素垂直居中*/ top: 3px; right: 0;}至此，我們的就全部樣式表就完成了，還需要將none的類隱藏掉display: none

目前沒有做交互頁面，接下來會更新，也在慢慢學習中。

代碼如下

float和display: inline-block到底有什么區(qū)別？

float和inline-block的區(qū)別就在于：inline-block是基于line box模型的，可以通過vertical-align: top/bottom/center來更改對齊方式。

如果我們試圖去設計這樣一個導航欄。




如果我們使用的是float對齊（已修改默認樣式，未在代碼中體現(xiàn))：

<style> .wrap { width: 100%; background-color: #66BB33; } .wrap ul { overflow: auto; } .wrap li { width: 20px; height: 50px; background-color: #B2DD99; float: left; line-height: 50px; text-align: center; } .wrap li.active { padding-top: 20px; background-color: white; } .wrap li:hover { background-color: white; padding-top: 20px; }?</style> <div class="wrap"> <ul> <li>1</li> <li class="active">2</li> <li>3</li> <li>4</li> </ul> </div> 效果是這樣的(沒有百分百還原，未添加邊距，只提供效果)：







這種情況下，就需要用到inline-block來進行l(wèi)ine-box模型布局。

如下只需要將上述的float：left改為display:inline-block;父元素不需要清除浮動。效果如圖（如果需要清除空格的影響，ul需要設置font-size: 0 li部分重新設置字體大小即可：




（完）