用数组做一个导航条的简单介绍
如何用JS或CSS制作网站导航条
给你一个朴素版的导航(包含css和html2部分):
css.css文件
body{
font-size:12px;
font-family:Arial,
Helvetica,
sans-serif;
margin:0px;
padding:0px;
color:white;
}
ul,li{
margin:0px;
padding:0px;
}
li{
display:inline;
list-style:none;
text-align:center;
font-weight:bold;
float:left;
}
a:link{
color:#336601;
text-align:center;
text-decoration:none;
float:left;
width:100px;
padding:3px
5px
0px
5px;
}
a:visited{
color:#336601;
text-align:center;
text-decoration:none;
float:left;
padding:3px
5px
0px
5px;
width:100px;
}
a:hover{
color:white;
float:left;
padding-left:6px;
text-align:center;
width:100px;
text-decoration:none;
background-color:#539D26;
}
a:active{
color:white;
float:left;
padding:3px
3px
0px
20px;
width:100px;
text-align:center;
text-decoration:none;
background-color:#539D26;
}
#nav{
width:600px;
height:30px;
border-bottom:0px;
padding:0px
5px;
position:absolute;
z-index:1;
left:
198px;
top:
25px;
}
.list{
line-height:20px;
text-align:left;
padding:4px;
font-weight:normal;
}
.menu1{
width:120px;
height:auto;
margin:6px
4px
0px
0px;
border:1px
solid
#9CDD75;
background-color:#F1FBEC;
color:#336601;
padding:6px
0px
0px;
cursor:pointer;
overflow-y:hidden;
filter:Alpha(opacity=70);
-moz-opacity:0.7;
}
.menu2{
width:120px;
height:18px;
margin:6px
4px
0px
0px;
background-color:#F5F5F5;
color:#999999;
border:1px
solid
#EEE8DD;
padding:6px
0px
0px
0px;
overflow-y:hidden;
cursor:pointer;
}
怎么用html+css做一个导航条?
首先要建立一个DIV,为其命名为“nav”,在DIV中建立一个ul无序列表,导航共有几个栏目,就为列表添加几个li的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。
然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:
ul {width:宽度值;height:高度值; list-style:none;}
如果是横向导航,还需为里面的列表项li标签设置左浮动的样式,代码为:li {float:left;}
每个栏目之间分隔的距离可通过margin(外边距)属性来设置。
标签式导航条怎么制作啊?
script language="javascript"
function show1(nam){
nam1.style.borderBottom='none';
nam1.style.background='none';
nam2.style.borderBottom='1px solid #A8CFF0';
nam2.style.backgroundColor='#E3EFFB';
cplist2.style.display='none';
cplist1.style.display='block'
}
function show2(nam){
nam.style.borderBottom='none';
nam.style.background='none';
nam1.style.borderBottom='1px solid #A8CFF0';
nam1.style.backgroundColor='#E3EFFB';
cplist1.style.display='none';
cplist2.style.display='block'
}
/script
style type="text/css"
*{font-size:10pt}
/style
table width="259" height="25" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #A8CFF0; border-bottom:none"
tr
td width="50%" align="center" onmouseover="javascript:show1(this)" id="nam1"
pA href="chanpin.asp?lx=1" style="color:#000000; text-decoration:none"第一个/A/p/td
td align="center" style="border-bottom:1px solid #A8CFF0;border-left:1px solid #A8CFF0;background-color:#E3EFFB;" onmouseover="javascript:show2(this)" id="nam2"A href="chanpin.asp?lx=2" style="color:#000000; text-decoration:none"第二个/A /td
/tr
/table
table width="259" height="370" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #A8CFF0; border-top:none; padding-top:10px; border-collapse:collapse"
tr
td
!--cplist--
div id="cplist1" style="width:100%; height:370px; overflow:hidden"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td
第一个第一个第一个第一个第一个第一个 /td
/tr
/table
/div
div id="cplist2" style="width:100%; height:370px; overflow:hidden; display:none"
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td
第二个第二个第二个第二个第二个第二个第二个第二个/td
td valign="top"
/td
/tr
/table
%rs.movenext
loop
end if
rs.close%
/div
!--cplist end--
/td
/tr
/table
怎么用html+css做一个导航条
首先建立一个DIV,为其命名为“nav”,在DIV中建立一个ul无序列表,导航共有几个栏目,就为列表添加几个li的列表项,为每个列表项中的内容加上超链接,链接到所需的项目页面。
然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:
ul {width:宽度值;height:高度值; list-style:none;}
如果是横向导航,还需为里面的列表项li标签设置左浮动的样式,代码为:li {float:left;}
每个栏目之间分隔的距离可通过margin(外边距)属性来设置。
导航条的更多样式及详细步骤可去这里参考http://jingyan.baidu.com/article/da1091fb05fe93027849d600.html
用数组定义一个导航栏 求教
其实你的意思是有歧义的。我的想法是你是给后台一个数据,然后让后台根据这组数据动态的写出一个重复的li的样式,如果是这个意思的话,其实就是怎么传递数据的问题,你可以这样写
[[value1,value2,value3],[value1,value2,value3],[value1,value2,value3],[value1,value2,value3]]
你这样定义这个数组,首先外边的中括号是数组取名字叫a数组,然后这个数组中的每个元素都是一个数组,就是a数组中的每个元素都是数组,都可以叫做b数组。b数组的大小相当于你想传递的li里面的属性有多少,例如你想传递的li需要有3个属性值设定,分别是class,id,以及里面的文本信息text。可以这样写你的数组[[class1,id1,text1],[class2,id2,text2],[class3,id3,text3],....],a数组的大小就相当于你需要多少个li,以上是我想到的答案,如果不是我所想的样子,请继续提问,
如果满意请采纳