本篇文章主要給大家介紹一下如何使用html+css完成二級橫向以及豎向菜單導航制作；菜單導航是網站建設中最常用的一塊了，基本每個網站內都會有個導航菜單，用鼠標劃過還可以有下拉子菜單。

由上圖我們可以看出，該圖包含一個橫向導航條，然后鼠標經過橫向導航條之后，子導航顯示出來。

1）制作頁面所用知識點

我們這里主要用到的知識點就是列表標簽（ul、dl）的使用、浮動（float）的使用、絕對定位（absolute）及鼠標經過（hover）的效果。

1、列表標簽ul、dl（我們使用ul、dl來創建同類型的導航元素內容，通過設置css樣式來達到圖片所示效果）；

2、浮動元素float（每個導航元素我們需要使用float:left;讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；

3、絕對定位absolute（對于子導航我們要使用絕對定位來讓其浮動在上級有定位元素的下方，不占據元素空間）

4、鼠標經過hover（使用css的鼠標經過元素（hover）效果，配合display的none（隱藏）和block（顯示）來實現子菜單的顯示與隱藏）

具體的實現html代碼以及css代碼就如下圖所示：

2）縱向菜單導航

還有一個縱向菜單導航原理跟橫向的類似，只需簡單調整一下css代碼即可。

html代碼跟橫向一樣，這里就不再貼圖，具體的實現圖片效果以及css代碼就如下圖所示：

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信我即可。

每日金句：每天收獲小進步，積累起來就是大進步；每天收獲小幸福，積攢起來便成大幸福。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

本例參考了網上的例子，唯一不一樣的是，我這里的操作是一步一步講解，網上僅是源碼。

一、我們先創建一張空白的網頁，網頁要自適應手機。

二、我們再創建網頁的頭部。

三、做出來的網頁頭部太丑了，我們要去掉盒子與瀏覽器的間隙，還有給頭部加內部距離。

四、給網頁頭部添加一些內容。

五、接下來開始做導航條了。

六、發現沒，導航條居然看不見，沒有東西在里面自然是看不見的，我們加三個鏈接吧。

七、這回是看見了，不過樣式太丑，我們改改樣式。

八、加上內部距離，就好看了許多，即然是鏈接，我們加點動態吧，當鼠標在鏈接上面時，鏈接塊變色。

九、開始做網頁內容，網頁內容我分為三塊，左右兩邊是側欄，中間是主要內容。

十、我想讓它橫著排，它卻是豎著排，改改各個塊的樣式。

十一、給主體的各個塊加點內容。

十二、內容是有了，但你會發現各塊之間沒有間隙，貼得太近了，我們改一下樣式，加個內部距離。

十三、距離是有了，但有一個側欄跑到了另一行，怎么回事？原來padding是會改變盒子的整體寬度，我們原本是100%，現在多了padding的寬度，自然就換行了，解決一下吧。

十四、這回終于在一行了，接下來可以做網頁底部了。

十五、改改樣式，讓底部好看一點。

十六，這個時候，網頁的整體版面就完成了，再補充一個小內容，讓網頁瀏覽器在小于600像素寬的時候，主體內容的三個塊由橫變豎。

移動端中我們經常碰到橫屏豎屏的問題，那么我們應該如何去判斷或者針對橫屏、豎屏來寫不同的代碼呢。

CSS如何判斷橫屏豎屏

豎屏引用

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

橫屏引用

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

css代碼

@media screen and (orientation: portrait) { 
 /*豎屏 css*/ 
} 
@media screen and (orientation: landscape) { 
 /*橫屏 css*/ 
} 

JS判斷橫屏豎屏方法