怎么制作导航盒子（导航软件是怎么制作出来的）
本文目录一览：
如何制作首页导航
可以用div+css做的
head
title/title
style
body { background-color:#000000;}
#nav { height:30px; list-style:none;}
#nav li { float:left;}
#nav li a { color:#fff; text-decoration:none; padding-top:4px; display:block; width:118px; line-height:22px; height:24px; text-align:center; background:url(/uploadfile/200806/17/66191858519.gif); margin-left:5px; font-size:14px; font-weight:bold;}
#nav li a:hover { background:url(/uploadfile/200806/17/66191858519.gif) left -42px; color:#ffffff;}
#nav li a#current { background:url(/uploadfile/200806/17/66191858519.gif) left -84px; color:#fff;}
/style
/head
body
ul id="nav"
lia href="/index.asp"主页/a/li
lia id="current" href="/Sort/List_4.html"DIV+CSS教程/a/li
lia href="/Sort/List_5.html"常用代码/a/li
lia href="/Sort/List_6.html"水晶图标/a/li
lia href="/Sort/List_7.html"幻灯图片/a/li
lia href="/Sort/List_10.html"软件下载/a/li
lia href="/css2/"CSS2.0实用手册/a/li
/ul
/body
/html
如何制作一个导航栏
!DOCTYPE html
html
head
meta charset="utf-8"
title学习导航栏的制作/title
script src=""/script
script
$(document).ready(function() {
$(".div1").click(function() {
$(".div2").addClass("dlHover");
});
$(".div1").hover(function(){//第一个函数作为鼠标悬浮时执行的函数
$(this).addClass("bg");
},function(){//第二个函数作为鼠标离开时执行的函数
$(this).removeClass("bg");
$(".div2").removeClass("dlHover");
});
});
/script
style
*{margin: 0px auto;padding: 0px;text-align: center;}
ul{list-style: none;}
.div2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;}
.dlHover{position:absolute;z-index: 9999;display: block;}
.div1{border: 1px solid gray;width: 100px;background-color: #999999;}
.bg{background-color: #1F9999;}
/style
/head
body
div class="625c-4020-3648-6d4d div1"
span class="4020-3648-6d4d-a5d3 span1"导航1/span
div class="3648-6d4d-a5d3-6b44 div2"
ul
lia href="#"导航2/a/li
lia href="#"导航3/a/li
/ul
/div
/div
h3学习导航栏的制作/h3
p这是一个简单的导航栏/p
/body
/html
CSS样式制作导航条的步骤
一、定义一个盒子（“menu”）,用来装这个导航的。
二、用无序列表（ul）中的列（li）放导航的内容。
三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。
四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style type="text/css"
#menu{
width:500px;
margin:0 auto; /*令盒子居中*/
font-size:20px; /*定义字体的大小*/
}
ul{
margin:0; padding:0; /*把浏览器默认的间隔去掉*/
list-style:none; /*把前面的序列号去掉*/
}
li{
float:left; /*向左浮动，这个是实现水平的重要步骤！！*/
padding:0 15px; /*li里面的字体和边框的距离*/
}
a{
text-decoration:none; /*去掉超链接的下划线*/
color:#333; /*超链接的字体颜色*/
}
a:hover{
color:#696;
}
/style
/head
body
div id="menu"
ul
lia href="#"菜单1/a/li
lia href="#"菜单1/a/li
lia href="#"菜单1/a/li
lia href="#"菜单1/a/li
/ul
/div
/body
/html
如何制作导航栏
1、打开Deamweaver8，新建一网页文件。接着输入以下导航菜单的内容：
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title导航栏示例/title
/head
body
ul id="navigation"
li/li
lia href="#"首 页/a/li
lia href="#"我的博客/a/li
lia href="#"互动交流/a/li
lia href="#"开心一刻/a/li
lia href="#"悬 赏 令/a/li
li/li
/ul
/body
/html
2、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
3、然后将以下CSS代码加入到head/head之间：
style type="text/css"
body {text-align:center;}
#navigation
{ list-style-type:none; height:auto;}
#navigation li { width:154px; height:60px; text-align:center;
float:left; padding-top:18px;font-size:20px; font-family:"微软雅黑", "宋体", "隶书";
background-image:url(images/noactive.jpg);}
a {width:154px; height:72px;}
a:link { text-decoration:none; color:#FFFF00;}
a:visited { text-decoration:none; color:#FFFF00; }
#navigation li:hover { color:#CC0000; text-decoration:underline;
background-image:url(images/active.jpg);}
a:hover{ color:#CC0033;}
#left {background-image:url(images/left.jpg); width:22px;}
/style
4、接下来，对网页效果进行调整，将HTML菜单部分进行调整：
body
ul id="navigation"
li style="background-image:url(images/left.jpg);width:22px;"/li
lia href="#"首 页/a/li
lia href="#"我的博客/a/li
lia href="#"互动交流/a/li
lia href="#"开心一刻/a/li
lia href="#"悬 赏 令/a/li
li style="background-image:url(images/right.jpg);width:22px;"/li
/ul
/body
5、最终炫酷的导航栏就制作完成啦！
怎样在DW中制作盒子,是不用写代码点几下就出来了的那种~
在PS的那个文件夹里找到导航栏的图片，然后在拖入DW里。当然也是需要按顺序的了。否则还是会错位。
此外，还可以用DW打开PS做的那个网页，表格/表格转换为图层（好像是这个菜单吧，很久没用过DW了），那些表格就自动转换成DIV（盒子）了，而且也不至于会错位。
如何做一个盒子
所需材料：硬卡纸、尺子、铅笔、剪刀、胶水
制作步骤：
1、在硬卡纸上画出下图形状（注意比例）
2、用剪刀剪下图形
3、沿虚线折起来，用胶水将盒子粘起来
4、一个盒子就完成了
