HTML+CSS制作導(dǎo)航條

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

導(dǎo)航按鈕效果圖

代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一級導(dǎo)航</title>
		<style>/*css樣式可以在style里面寫*/
			body {
				margin: 0;/*外邊距:分別左,上,右,下都為0,這樣就不會出現(xiàn)左右上下間距*/
				padding: 0;/*內(nèi)邊距:分別左,上,右,下都為0,這樣就不會出現(xiàn)左右上下內(nèi)間距*/
			}
			/*第一個div樣式*/
			#menu {
				width: 100%;/*寬度:100%表示瀏覽器默認(rèn)寬度*/
				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：超鏈接鼠標(biāo)經(jīng)過樣式*/
			#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="#">產(chǎn)品案例</a></li>
					<li><a href="#">免費素材</a></li>
					<li><a href="#">聯(lián)系我們</a></li>
					<li><a href="#">會員注冊</a></li>
					<li><a href="#">會員登錄</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>

以上HTML+CSS代碼復(fù)制可用。

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

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

TML拖放接口為DragEvent, DataTransfer, DataTransferItem和DataTransferItemList（后兩者瀏覽器支持很差）.說簡單點就是關(guān)于拖拽的系列事件。其實除非是要用DataTransfer,更建議使用瀏覽器支持性更好的鼠標(biāo)點擊移動松開相關(guān)事件。

拖拽相關(guān)的系列事件

當(dāng)元素節(jié)點或選中的文本被拖拉時，就會持續(xù)觸發(fā)拖拉事件，包括以下一些事件。

drag：拖拉過程中，在被拖拉的節(jié)點上持續(xù)觸發(fā)（相隔幾百毫秒）。這類連續(xù)觸發(fā)的事件都涉及一個問題叫做防抖節(jié)流（敬請期待）。
dragstart：用戶開始拖拉時，在被拖拉的節(jié)點上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點。通常應(yīng)該在這個事件的監(jiān)聽函數(shù)中，指定拖拉的數(shù)據(jù)。
dragend：拖拉結(jié)束時（釋放鼠標(biāo)鍵或按下 ESC 鍵）在被拖拉的節(jié)點上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點。它與dragstart事件，在同一個節(jié)點上觸發(fā)。不管拖拉是否跨窗口，或者中途被取消，dragend事件總是會觸發(fā)的。
dragenter：拖拉進入當(dāng)前節(jié)點時，在當(dāng)前節(jié)點上觸發(fā)一次，該事件的target屬性是當(dāng)前節(jié)點。通常應(yīng)該在這個事件的監(jiān)聽函數(shù)中，指定是否允許在當(dāng)前節(jié)點放下（drop）拖拉的數(shù)據(jù)。如果當(dāng)前節(jié)點沒有該事件的監(jiān)聽函數(shù)，或者監(jiān)聽函數(shù)不執(zhí)行任何操作，就意味著不允許在當(dāng)前節(jié)點放下數(shù)據(jù)。在視覺上顯示拖拉進入當(dāng)前節(jié)點，也是在這個事件的監(jiān)聽函數(shù)中設(shè)置。
dragover：拖拉到當(dāng)前節(jié)點上方時，在當(dāng)前節(jié)點上持續(xù)觸發(fā)（相隔幾百毫秒），該事件的target屬性是當(dāng)前節(jié)點。該事件與dragenter事件的區(qū)別是，dragenter事件在進入該節(jié)點時觸發(fā)，然后只要沒有離開這個節(jié)點，dragover事件會持續(xù)觸發(fā)。
dragleave：拖拉操作離開當(dāng)前節(jié)點范圍時，在當(dāng)前節(jié)點上觸發(fā)，該事件的target屬性是當(dāng)前節(jié)點。如果要在視覺上顯示拖拉離開操作當(dāng)前節(jié)點，就在這個事件的監(jiān)聽函數(shù)中設(shè)置。
drop：被拖拉的節(jié)點或選中的文本，釋放到目標(biāo)節(jié)點時，在目標(biāo)節(jié)點上觸發(fā)。注意，如果當(dāng)前節(jié)點不允許drop，即使在該節(jié)點上方松開鼠標(biāo)鍵，也不會觸發(fā)該事件。如果用戶按下 ESC 鍵，取消這個操作，也不會觸發(fā)該事件。該事件的監(jiān)聽函數(shù)負責(zé)取出拖拉數(shù)據(jù)，并進行相關(guān)處理。

關(guān)于上述事件的注意點

一旦某個元素節(jié)點的draggable屬性設(shè)為true，就無法再用鼠標(biāo)選中該節(jié)點內(nèi)部的文字或子節(jié)點了。
拖拉過程只觸發(fā)以上這些拖拉事件，盡管鼠標(biāo)在移動，但是鼠標(biāo)事件不會觸發(fā)。
將文件從操作系統(tǒng)拖拉進瀏覽器，不會觸發(fā)dragstart和dragend事件。
dragenter和dragover事件的監(jiān)聽函數(shù)，用來取出拖拉的數(shù)據(jù)（即允許放下被拖拉的元素）。由于網(wǎng)頁的大部分區(qū)域不適合作為放下拖拉元素的目標(biāo)節(jié)點，所以這兩個事件的默認(rèn)設(shè)置為當(dāng)前節(jié)點不允許接受被拖拉的元素。如果想要在目標(biāo)節(jié)點上放下的數(shù)據(jù)，首先必須阻止這兩個事件的默認(rèn)行為。
上述一系列事件只需記住觸發(fā)對象：被拖拽對象、當(dāng)前對象（拖拽過程中經(jīng)過的）、目標(biāo)對象（最終釋放區(qū)域）；時間（開始拖拽，結(jié)束。釋放，進入，在上面，離開）。

dataTransfer

關(guān)于事件event參數(shù)很重要。區(qū)別于其他事件，拖拽系列事件有一點特殊就是dataTransfer。他用來讀寫拖拽需要攜帶的數(shù)據(jù)。往往是開始拖拽設(shè)置數(shù)據(jù)，結(jié)束時候讀取數(shù)據(jù)。

dataTransfer的屬性

DataTransfer.dropEffect屬性用來設(shè)置放下（drop）被拖拉節(jié)點時的效果，會影響到拖拉經(jīng)過相關(guān)區(qū)域時鼠標(biāo)的形狀。它可能取下面的值。
copy：復(fù)制被拖拉的節(jié)點
move：移動被拖拉的節(jié)點
link：創(chuàng)建指向被拖拉的節(jié)點的鏈接
none：無法放下被拖拉的節(jié)點
DataTransfer.effectAllowed屬性設(shè)置本次拖拉中允許的效果。它可能取下面的值。
copy：復(fù)制被拖拉的節(jié)點
move：移動被拖拉的節(jié)點
link：創(chuàng)建指向被拖拉節(jié)點的鏈接
copyLink：允許copy或link
copyMove：允許copy或move
linkMove：允許link或move
all：允許所有效果
none：無法放下被拖拉的節(jié)點
uninitialized：默認(rèn)值，等同于all
DataTransfer.files屬性是一個 FileList 對象，包含一組本地文件，可以用來在拖拉操作中傳送。如果本次拖拉不涉及文件，則該屬性為空的 FileList 對象。
DataTransfer.types屬性是一個只讀的數(shù)組，每個成員是一個字符串，里面是拖拉的數(shù)據(jù)格式（通常是 MIME 值）。比如，如果拖拉的是文字，對應(yīng)的成員就是text/plain。
DataTransfer.items（支持性不好）屬性返回一個類似數(shù)組的只讀對象（DataTransferItemList 實例），每個成員就是本次拖拉的一個對象（DataTransferItem 實例）。如果本次拖拉不包含對象，則返回一個空對象。
DataTransferItemList 實例具有以下的屬性和方法。
length：返回成員的數(shù)量
add(data, type)：增加一個指定內(nèi)容和類型（比如text/html和text/plain）的字符串作為成員
add(file)：add方法的另一種用法，增加一個文件作為成員
remove(index)：移除指定位置的成員
clear()：移除所有的成員
DataTransferItem 實例具有以下的屬性和方法。
kind：返回成員的種類（string還是file）。
type：返回成員的類型（通常是 MIME 值）。
getAsFile()：如果被拖拉是文件，返回該文件，否則返回null。
getAsString(callback)：如果被拖拉的是字符串，將該字符傳入指定的回調(diào)函數(shù)處理。該方法是異步的，所以需要傳入回調(diào)函數(shù)。

dataTransfer的方法

DataTransfer.setData(format,data)方法用來設(shè)置拖拉事件所帶有的數(shù)據(jù)。
DataTransfer.getData(format)方法接受一個字符串（表示數(shù)據(jù)類型）作為參數(shù)，返回事件所帶的指定類型的數(shù)據(jù)
DataTransfer.clearData()方法接受一個字符串（表示數(shù)據(jù)類型）作為參數(shù)，刪除事件所帶的指定類型的數(shù)據(jù)。
DataTransfer.setDragImage()：拖動過程中（dragstart事件觸發(fā)后），瀏覽器會顯示一張圖片跟隨鼠標(biāo)一起移動，表示被拖動的節(jié)點。這張圖片是自動創(chuàng)造的，通常顯示為被拖動節(jié)點的外觀，不需要自己動手設(shè)置。DataTransfer.setDragImage()方法可以自定義這張圖片。

完小編前段時間發(fā)表的HTML學(xué)習(xí)之后，相信大家對網(wǎng)站建設(shè)與網(wǎng)頁編寫有了一定的初步了解，今天我們來開始介紹層疊樣式表css，css是為HTML頁面的排版美化而設(shè)計的，可以實現(xiàn)html無法設(shè)計的效果，一般是用來配合html來使用的，一般模式：選擇器{屬性:值}即selector{property:value}例如：body{corlor:red;font-size：12px;}，他有三種引入方式：行內(nèi)樣式、內(nèi)部樣式表、外部樣式表。

css三種嵌入方式：

一、行內(nèi)樣式

使用style屬性引入CSS樣式。

示例：

<h1 style="color:red;">style屬性的應(yīng)用</h1>

<p style="font-size:14px;color:green;">直接在HTML標(biāo)簽中設(shè)置的樣式</p>

實際在寫頁面時不提倡使用，在測試的時候可以使用。

例如：

<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>行內(nèi)樣式</title> </head> <body>  <h1 style="color:red;">Leaping Above The Water</h1> <p style="color:red;font-size:30px;">我是p標(biāo)簽</p> </body> </html>

二、內(nèi)部樣式表

在style標(biāo)簽中書寫CSS代碼。style標(biāo)簽寫在head標(biāo)簽中。

示例：

<head>

h3{

color:red;

}

</style>

</head>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>內(nèi)部樣式表</title>  <style type="text/css"> div{ background: green; } </style> </head> <body> <div>我是DIV</div> </body> </html>

三、外部樣式表

CSS代碼保存在擴展名為.css的樣式表中

HTML文件引用擴展名為.css的樣式表，有兩種方式：鏈接式、導(dǎo)入式。

語法：

1、鏈接式

2、導(dǎo)入式

@import url("css文件路徑");

</style>

例如：<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>外部樣式表</title>  <link rel="stylesheet" type="text/css" href="css/style.css" />  <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <ol> <li>1111</li> <li>2222</li> </ol> </html>

行內(nèi)樣式>內(nèi)部樣式>外部樣式(后兩者是就近原則)。

css注釋格式如下：

/* 注釋如下*/

css中的顏色值表示如下：

可以是直接寫英文單詞，例如藍色盡可以寫blue；還可以寫為十六進制字符，例如#rrggbb\#ffcc00,#rgb如:#fc0十六進制的顏色可以在顏色表中查詢，這里我給大家提供一個，當(dāng)然網(wǎng)上也有很多，大家也可以自己百度一下：

還有一種顏色的表示方式就是rbg模式，例如：

rgb(x,x,x) 其中x是一個0-255的整數(shù)值如:rgb(255,204,0)

rgb(x%,x%,x%) 其中x是一個0-100的整數(shù)值如rgb(100%,80%,0%)

Css的長度單位：

相對長度單位：px 像素（Pixel） em 相對于當(dāng)前文本字體尺寸的倍數(shù) % 百分比

絕對長度單位：in英寸（Inch） pt 點（Point） cm 厘米（Centimeter）mm 毫米（Millimeter）。

換算比例：1in = 2.54cm = 25.4 mm = 72pt

Css的七大類選擇器：

標(biāo)簽選擇器例如：p{};

類選擇器例如.div{};（一個點加命名的類名）

Id選擇器例如 #div{};（斜體井號加ID名，ID是不可重復(fù)的，類可以相同）

通配符選擇器：*{}；

偽類選擇器：

a:link{}沒有訪問時的鏈接；

a:visited{}已經(jīng)訪問過時的鏈接；

a:hove{}鼠標(biāo)滑過時的鏈接；

a:active{}已經(jīng)選中的鏈接；

:first-child{}為第一個字符設(shè)置樣式；

:last-child{}為最后一個字符設(shè)置樣式；

：nth-child（）{}可以為指定字符設(shè)置樣式

派生選擇器（后代選擇器、子元素選擇器和相鄰兄弟選擇器）：

后代選擇器: 以空格分隔

div ul li {color:#0099cc;}

子元素選擇器: 以>分隔

div >ul li

相鄰兄弟選擇器: 以+分隔

div + div ul li

最后一個就是組合選擇器，以逗號隔開

h1, h2, h3, h4, h5, h6 { color: green }

好了，css基礎(chǔ)就給大家介紹到這里，有什么不懂得地方可以給小編留言，如果您有什么好的建議也可以關(guān)注小編，我們共同學(xué)習(xí)，共同討論，共同進步，接下來我們會介紹下css的屬性，敬請期待吧

在線咨詢

上一篇：碎片時間學(xué)編程「112]：轉(zhuǎn)義 HTML
下一篇：前端隱藏加載執(zhí)行JavaScript

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML+CSS制作導(dǎo)航條

您的項目需求