HTML+CSS制作導航條

天無意中看到一個網站的導航條，覺得效果還不錯，而且制作也很簡單，就自己試著用HTML+CSS做了個一模一樣的，下面就把導航條的制作方法及步驟分享給大家！

導航按鈕效果圖

代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一級導航</title>
		<style>/*css樣式可以在style里面寫*/
			body {
				margin: 0;/*外邊距:分別左,上,右,下都為0,這樣就不會出現左右上下間距*/
				padding: 0;/*內邊距:分別左,上,右,下都為0,這樣就不會出現左右上下內間距*/
			}
			/*第一個div樣式*/
			#menu {
				width: 100%;/*寬度:100%表示瀏覽器默認寬度*/
				height: 45px;/*高度*/
				background-color:#FF0033;/*背景顏色:紅色*/
			}
			/*第二個div樣式*/
			#menu-title {
				width: 1000px;
				height: 45px;
				margin-left: auto;/*margin-left: auto;margin-right: auto;可以把div自動居中*/
				margin-right: auto;
			}
			/*第二個div里面無需列表樣式*/
			#menu-title ul {/*ul是無序列表*/
				margin: 0px;
				padding: 0px;
				list-style: none;/*列表樣式:無*/
			}
			/*第二個div里面無需列表li樣式*/
			#menu-title ul li {
				width: 142.8px;
				height: 45px;
				float: left; /*多個li往左浮動*/
				line-height: 45px;/*行高*/
				text-align: center;/*文本對齊:居中*/
			}
				/*第二個div里面無需列表li里的a：超鏈接樣式*/
			#menu-title ul li a {
				color: white; /*顏色:白*/
				text-decoration: none;/*文本下劃線:無*/
			}
			/*第二個div里面無需列表li里的a：超鏈接鼠標經過樣式*/
			#menu-title ul li:hover {
				background-color: #333333;
			}
		</style>
	</head>
	<body>
		<div id="menu">
			<div id="menu-title">
				<ul>
					<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>
				</ul>
			</div>
		</div>
	</body>
</html>

以上HTML+CSS代碼復制可用。

好多小白不知道怎么搭配顏色，為你們搜集了一下網頁顏色搭配工具：http://tool.c7sky.com/webcolor/#hue_0

下一個文章：HTML+CSS二級導航制作，敬請期待

過 HTML DOM，您能夠使用節點關系在節點樹中導航。

HTML DOM 節點列表

getElementsByTagName() 方法返回節點列表。節點列表是一個節點數組。

下面的代碼選取文檔中的所有 <p> 節點：

實例

varx=document.getElementsByTagName("p");

可以通過下標號訪問這些節點。如需訪問第二個 <p>，您可以這么寫：

y=x[1];

嘗試一下 ?

注意：

下標號從 0 開始。

HTML DOM 節點列表長度

length 屬性定義節點列表中節點的數量。

您可以使用 length 屬性來循環節點列表：

實例

x=document.getElementsByTagName("p");for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write("<br>");}

實例解析：

獲取所有 <p> 元素節點
輸出每個 <p> 元素的文本節點的值

導航節點關系

您能夠使用三個節點屬性：parentNode、firstChild 以及 lastChild ，在文檔結構中進行導航。

請看下面的 HTML 片段：

<html><head><metacharset="utf-8"></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了節點的關系。</p></div></body></html>

首個 <p> 元素是 <body> 元素的首個子元素（firstChild）
<div> 元素是 <body> 元素的最后一個子元素（lastChild）
<body> 元素是首個 <p> 元素和 <div> 元素的父節點（parentNode）

firstChild 屬性可用于訪問元素的文本：

實例

<pid="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script>

嘗試一下 ?

DOM 根節點

這里有兩個特殊的屬性，可以訪問全部文檔：

document.documentElement - 全部文檔
document.body - 文檔的主體

實例

<p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了 <b>document.body</b> 屬性。</p></div><script>alert(document.body.innerHTML);</script>

嘗試一下 ?

childNodes 和 nodeValue

除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。

下面的代碼獲取 id="intro" 的 <p> 元素的值：

實例

<pid="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script>

嘗試一下 ?

在上面的例子中，getElementById 是一個方法，而 childNodes 和 nodeValue 是屬性。

家好，今天給大家介紹一款，帶圖標的垂直導航菜單的html頁面源碼（圖1）。送給大家哦，獲取方式在本文末尾。

圖1

點擊每個按鈕時，都有切換特效，并顯示按鈕的說明，看起來非常不錯（圖2）

圖2

代碼完整，需要的朋友可以下載（圖3）

圖3

本源碼編碼：10148，需要的朋友，點擊下面的鏈接后，搜索10148，即可獲取。

就愛UI - 分享UI設計的點點滴滴

在線咨詢

上一篇：Python如何將Markdown轉成HTML，Py
下一篇：我來廣州需要隔離嗎？現在來(返)穗啥政策？答案在此

您的項目需求

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

整合營銷服務商

HTML+CSS制作導航條

家好，今天給大家介紹一款，帶圖標的垂直導航菜單的html頁面源碼（圖1）。送給大家哦，獲取方式在本文末尾。

點擊每個按鈕時，都有切換特效，并顯示按鈕的說明，看起來非常不錯（圖2）

代碼完整，需要的朋友可以下載（圖3）

本源碼編碼：10148，需要的朋友，點擊下面的鏈接后，搜索10148，即可獲取。

您的項目需求