HTML實戰篇：純css制作二級橫向以及豎向菜單導航

本篇文章主要給大家介紹一下如何使用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代碼就如下圖所示：

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

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

、HTML與XHTML的區別

（1）在XHTML 中標簽名稱必須小寫，在HTML 中標簽名稱既可以小寫也可以大寫；

（2）在XHTML 中標簽必須封閉，在HTML中標簽可以不成對出現；

（3）在XHTML 中標簽必須嚴格嵌套，HTML對標簽嵌套沒有嚴格規定；

（4）在XHTML 中屬性名稱必須小寫，在HTML 中也一樣；

（5）在XHTML 中標簽必須用雙引號引起來，HTML中可以不用；

二、特殊符號

表示空格；
"表示雙引號；
&表示&符號；
>表示大于號>；
<表示小于號<；
&copy?表示版權符號?；

三、列表的使用

（1）無序列表

無序列表是一個項目列表，使用項目符號標記無序列表的項目，無序列表也就是沒有順序的列表；
無序列表的type屬性取值有三種，分別是circle（圓圈）、disc（實心圓點）、square（方塊）；

# 打印實心圓點的無序列表

<body>
 <ul type="disc">
 <li>第一</li>
 <li>第二</li>
 <li>第三</li>
 </ul>
</body>

（2）有序列表

有序列表也是由一個個列表項組成，列表想既可以使用數字標記，也可以使用字母標記；
有序列表的type屬性取值有5中，分別是1（數字）、i（小寫羅馬字母）、I（大寫羅馬字母）、a（小寫字母）、A（大寫字母）；

# 打印數字排序的有序列表

<body>
 <ol type="1">
 <li>我最愛椰奶</li>
 <li>第二愛可樂</li>
 <li>第三愛橙汁</li>
 </ol>
</body>

（3）定義列表

定義列表是當無序列表和有序列表都不適合時，通過自定義列表來完成自定義展示，所以定義列表不僅僅是一個項目列表，而是項目和注釋的組合；

<body>
 <dl>
 <dt>春曉</dt>
 <dd>春眠不覺曉，處處聞啼鳥</dd>
 <dd>夜來風雨聲，花落知多少</dd>
 </dl>
</body>

四、表格的使用

（1）表格的基本結構

單元格：表格的最小單位，一個或多個單元格縱橫排列組成了表格；
行：一個或多個單元格橫向堆疊形成了行；
列：一個或多個單元格縱向堆疊形成了列；

<table>
 <tr>
 <td>第一行第一列</td> 
 <td>第一行第二列</td> 
 <td>第一行第三列</td> 
 </tr>
 <tr>
 <td>第二行第一列</td> 
 <td>第二行第二列</td> 
 <td>第二行第三列</td> 
 </tr>
</table>

（2）表格的對齊方式

align屬性：left表示水平居左、center表示水平居中、right表示水平居右；
valign屬性：top表示垂直置頂、middle表示垂直居中、bottom表示垂直靠底；

（3）表格的其他屬性

th：一種特殊的單元格，加粗并居中；
caption：表格標題；
cellspacing：規定單元格之間的空間；
cellpadding：規定單元邊沿與其內容之間的空白；
colspan：表格跨列；
rowspan：表格跨行；

果圖：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML+CSS3橫向導航欄</title>
<link rel="stylesheet" href="index.css" media="screen" type="text/css" />
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>This is Panel One</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>this is panel two</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>this is panel three</p>
</div>
<div class="panel">
<h2>This is Panel four</h2>
<p>this is panel four</p>
</div>
</div>
</article>
</body>
</html>

index.css

在線咨詢

上一篇：如何制作海景酒店預訂小程序，民宿旅館預訂小程序全攻略
下一篇：HTML的基本語法以及如何使用HTML來創建網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML實戰篇：純css制作二級橫向以及豎向菜單導航

1）制作頁面所用知識點

2）縱向菜單導航

您的項目需求