整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天無意中看到一個網(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)航制作，敬請期待
過 HTML DOM，您能夠使用節(jié)點關(guān)系在節(jié)點樹中導(dǎo)航。
HTML DOM 節(jié)點列表
getElementsByTagName() 方法返回節(jié)點列表。節(jié)點列表是一個節(jié)點數(shù)組。
下面的代碼選取文檔中的所有 <p> 節(jié)點：
實例
varx=document.getElementsByTagName("p");
可以通過下標(biāo)號訪問這些節(jié)點。如需訪問第二個 <p>，您可以這么寫：
y=x[1];
嘗試一下 ?
注意：
下標(biāo)號從 0 開始。
HTML DOM 節(jié)點列表長度
length 屬性定義節(jié)點列表中節(jié)點的數(shù)量。
您可以使用 length 屬性來循環(huán)節(jié)點列表：
實例
x=document.getElementsByTagName("p");for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write("<br>");}
實例解析：
獲取所有 <p> 元素節(jié)點
輸出每個 <p> 元素的文本節(jié)點的值
導(dǎo)航節(jié)點關(guān)系
您能夠使用三個節(jié)點屬性：parentNode、firstChild 以及 lastChild ，在文檔結(jié)構(gòu)中進行導(dǎo)航。
請看下面的 HTML 片段：
<html><head><metacharset="utf-8"></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了節(jié)點的關(guān)系。</p></div></body></html>
首個 <p> 元素是 <body> 元素的首個子元素（firstChild）
<div> 元素是 <body> 元素的最后一個子元素（lastChild）
<body> 元素是首個 <p> 元素和 <div> 元素的父節(jié)點（parentNode）
firstChild 屬性可用于訪問元素的文本：
實例
<pid="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script>
嘗試一下 ?
DOM 根節(jié)點
這里有兩個特殊的屬性，可以訪問全部文檔：
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 屬性來獲取元素的內(nèi)容。
下面的代碼獲取 id="intro" 的 <p> 元素的值：
實例
<pid="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script>
嘗試一下 ?
在上面的例子中，getElementById 是一個方法，而 childNodes 和 nodeValue 是屬性。
圖1
圖2
圖3
就愛UI - 分享UI設(shè)計的點點滴滴
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
