整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天无意中看到一个网站的导航条，觉得效果还不错，而且制作也很简单，就自己试着用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 是属性。
图1
图2
图3
就爱UI - 分享UI设计的点点滴滴
*请认真填写需求信息，我们会在24小时内与您取得联系。
