小白，你最近看CSS的時候碰到position屬性了么？"

“碰到了，通過position可以改變?nèi)萜鞯亩ㄎ唬矣浀霉俜矫枋鍪沁@樣的：這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認(rèn)位置偏移。”

“恩，不錯，今天咱說一下position里面的fixed類型吧，這個屬性值是讓容器基于瀏覽器窗口的絕對定位，在我們平時的制作中經(jīng)常會碰到。”

老朱接著說：“給一個容器設(shè)定position為fixed以后，可以通過left、right、bottom、top進(jìn)行四個方向的距離定位。現(xiàn)在我們在頁面中寫一個fixed容器，看一下代碼片段。”

“你看，這里我在body里面加了一個標(biāo)識為foot的div，然后他的css里面把position設(shè)置成了fixed，并且bottom（距離底部）為0，這里的bottom是基于瀏覽器窗口的距離進(jìn)行計算的，foot的寬和高也進(jìn)行了設(shè)定。現(xiàn)在我們看一下效果！”

“你可以看到，拖動滾動條往下滾動網(wǎng)頁的時候，foot的位置并不會隨著滾動條的滾動發(fā)生改變，它就像是漂浮在那里一樣。這里的foot是一個div容器，所以它的內(nèi)部我們還可以放任何你希望布局的內(nèi)容，比如放一個圖片，或者其他的容器。”

“這里插入的圖片要想跟foot容器寬度一致，根據(jù)我們之前說過的對圖片css的操作，把圖片的寬度（width）設(shè)定為100%，圖片就會自動與父容器寬度一致了。”

小白突然想到了很多手機HTML5頁面下方都有導(dǎo)航條，問道：“很多手機的HTML5頁面里面下方的導(dǎo)航條不會隨著頁面的滾動而滾動，這種導(dǎo)航條是不是也通過fixed來設(shè)定的。”

“是的，跟這里的foot一樣，我們只需要把導(dǎo)航條的父容器設(shè)定為fixed就可以了。有個需要注意的地方是導(dǎo)航條會根據(jù)手機屏幕的分辨率自動占用屏幕寬度，所以我們在給foot設(shè)定css樣式的時候就不能設(shè)定寬度了。”

小白問道：“那應(yīng)該怎么設(shè)定呢？”

老朱說：“你忘了我們剛說了fiex可以通過top、right、bottom、left設(shè)定四個方向的距離么？如果要讓一個fixed容器左右靠邊，我們只需要left為0，right為0，它就會自動匹配窗口的寬度。現(xiàn)在我們把之前的foot容器改一下。”

“通過設(shè)定bottom、left、right可以讓foot靠近底部并且保持與窗口寬度一致。然后我們在foot里面放了一個ul-li容器，讓li容器向左浮動并且寬度為父容器的25%，布局就會變成這樣。”

“網(wǎng)頁上的底部導(dǎo)航通常都會放入透明的png圖片，現(xiàn)在我們插入png圖，再進(jìn)行一下css的調(diào)整。”

“網(wǎng)頁底部導(dǎo)航條，上面還會牽扯到鼠標(biāo)事件，焦點樣式變化，這些知識我們隨后也會一一展開討論，今天先這樣吧！你先練習(xí)練習(xí)今天說的這些內(nèi)容，然后試著做一個居中漂浮的層，看看能不能做出來！”

想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力！

篇文章，小海老師帶領(lǐng)大家一同做一個利用CSS技術(shù)實現(xiàn)的導(dǎo)航欄。通過這個導(dǎo)航欄的制作，希望大家能夠?qū)η皫灼恼轮袑W(xué)習(xí)到的CSS屬性能有一個整體的認(rèn)識，并能夠達(dá)到靈活運用的程度。

承接文章：靈活控制塊級元素在一行內(nèi)顯示，CSS浮動屬性，知道原理就很簡單

技術(shù)等級：初級 | 適合前端開發(fā)的初學(xué)者閱讀學(xué)習(xí)。

希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。

如果你是初學(xué)前端開發(fā)，強烈建議跟著文章中講的步驟自己做一做。步驟不多，思路簡單，占用不了大家太多的時間，自己做一遍，一定會收獲不少。

一、導(dǎo)航欄效果圖展示：

今天我們要做的導(dǎo)航欄效果如下圖所示。

導(dǎo)航欄效果圖展示

這個效果主要使用的是<ul></ul>標(biāo)記對和<a></a>標(biāo)記對共同實現(xiàn)的。

整個實例涉及到的CSS屬性如下所示：

• width

• height

• background-color

• list-style-type

• display

• float

• margin

• line-height

二、實現(xiàn)頁面效果：

首先為導(dǎo)航欄設(shè)置一個<div>容器，并設(shè)置其id屬性的取值設(shè)置為nav。該容器用來控制導(dǎo)航欄的通欄位置。通欄的容器寬度應(yīng)該設(shè)置為100%，這里高度設(shè)置為40px，顏色為#a72f2e。實現(xiàn)代碼如下所示：

<div id=”nav”></div>

#nav{

width:100%; height:40px;

background-color:#a72f2e;

}

由于要在通欄的容器中顯示固定寬度為1000px的導(dǎo)航欄主體，因此在該容器內(nèi)部再制作一個<div>容器，用來盛放真正的導(dǎo)航欄代碼。我們將它的class屬性取值為navContent。這個容器的寬度設(shè)置為1000px，高度與#nav的高度等高，并且在#nav容器內(nèi)部水平居中。實現(xiàn)代碼如下所示：

<div class=”navContent”></div>

#nav .navContent{

width:1000px; height:40px;

margin:0 auto;

}

接下來在.navContent容器內(nèi)部書寫導(dǎo)航欄的各個條目。導(dǎo)航欄是使用<ul></ul>標(biāo)記對實現(xiàn)的，而它的導(dǎo)航欄條目是利用<li></li>標(biāo)記對書寫的。因為導(dǎo)航欄需要單擊后跳轉(zhuǎn)頁面，所以在<li></li>內(nèi)部使用了<a></a>標(biāo)記對。

這里要說明一點，因為<li></li>標(biāo)記對是塊級元素，<a></a>標(biāo)記對是內(nèi)聯(lián)元素，因此要讓<li></li>標(biāo)記對包裹<a></a>標(biāo)記對，不要用<a></a>標(biāo)記對包裹<li></li>標(biāo)記對。

這里以導(dǎo)航欄條目“首頁”和“網(wǎng)站介紹”為例，下列HTML代碼展示了導(dǎo)航欄的條目內(nèi)容。

<ul>

<li><a href="index.html">首頁</a></li>

<li><a href="#">網(wǎng)站簡介</a></li>

…

</ul>

需要更多的導(dǎo)航欄條目，可以在<ul>標(biāo)記對內(nèi)部重復(fù)書寫<li></li>和<a></a>的代碼格式。

三、編寫整個導(dǎo)航欄的CSS樣式：

整個導(dǎo)航欄是使用<ul></ul>標(biāo)記對實現(xiàn)的，所以需要對<ul></ul>標(biāo)記對編寫CSS樣式。

由于無序列表的列表項左側(cè)帶有小圓點的項目符號，因此需要將該項目符號去掉。所以<ul></ul>標(biāo)記對的CSS代碼如下所示：

#nav .navContent ul{

list-style-type:none;

}

四、編寫導(dǎo)航欄條目的CSS樣式：

導(dǎo)航欄條目是使用<li></li>標(biāo)記對實現(xiàn)的，所以需要對<li></li>標(biāo)記對編寫CSS樣式。

由于<li></li>標(biāo)記對是塊級元素，因此即使去掉了左側(cè)的項目符號，所有的條目依然都各自獨占一行顯示，所以需要讓它們在一行內(nèi)顯示，這就需要讓所有的<li></li>標(biāo)記對左浮動。CSS代碼如下所示：

#nav .navContent ul li{

float:left;

}

五、編寫導(dǎo)航欄條目中鏈接的CSS樣式：

導(dǎo)航欄條目中的鏈接是使用<a></a>標(biāo)記對實現(xiàn)的，所以需要對<a></a>標(biāo)記對編寫CSS樣式。

由于<a></a>標(biāo)記對是內(nèi)聯(lián)元素，因此無法設(shè)置寬度和高度，也就無法為每一個導(dǎo)航欄條目設(shè)置尺寸。因此需要將<a></a>標(biāo)記對轉(zhuǎn)換為塊級元素（display屬性），然后設(shè)置寬度和高度（width屬性和height屬性）。

有了寬度和高度，就需要讓鏈接的文本在容器中水平居中（text-align屬性）和垂直居中（line-height屬性）了。

最后去掉鏈接的下劃線（text-decoration屬性），并設(shè)置鏈接的文本顏色（color屬性）。

導(dǎo)航欄條目中鏈接的CSS代碼如下所示：

#nav .navContent ul li a{

display:block;

width:100px; height:40px;

text-align:center;

line-height:40px;

text-decoration:none;

color:#dddddd;

}

六、編寫鼠標(biāo)經(jīng)過導(dǎo)航欄條目時的CSS樣式：

鼠標(biāo)經(jīng)過導(dǎo)航欄目時，即使沒有觸碰到鏈接的文本部分，也應(yīng)該能夠進(jìn)行跳轉(zhuǎn)。因此需要對<a></a>標(biāo)記對編寫鼠標(biāo)經(jīng)過時的CSS樣式。

鼠標(biāo)經(jīng)過時，希望背景顏色（background-color屬性）和文本顏色（color屬性）發(fā)生變化。

鼠標(biāo)經(jīng)過鏈接時的CSS代碼如下所示：

#nav .navContent ul li a:hover{

background-color:#ff5857;

color:#ffffff;

}

七、整體代碼：

至此，這個簡單的導(dǎo)航欄效果就完全實現(xiàn)了，CSS整體使用了約30行代碼。實現(xiàn)這個導(dǎo)航欄效果的HTML代碼如下圖所示。

HTML整體代碼

實現(xiàn)這個導(dǎo)航欄效果的CSS代碼如下圖所示。

CSS整體代碼

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設(shè)計版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了這篇文章的你同時也可以關(guān)注一下“小海前端”的頭條號，因為這些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會學(xué)到對你有用的知識。

關(guān)注“小海前端”，我會繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅持的走下去。

文章預(yù)告

下一次，小海老師開始為大家講解CSS的盒屬性。盒屬性是div布局的基礎(chǔ)，在實際的布局過程中有許多應(yīng)用技巧。下一篇文章我會為大家將盒屬性一個一個進(jìn)行詳細(xì)的分析。