b2c信息网

您现在的位置是:首页 > 最近新闻 > 正文

最近新闻

用数组做一个导航条的简单介绍

hacker2022-06-10 20:00:27最近新闻107
本文导读目录:1、如何用JS或CSS制作网站导航条2、
本文导读目录:

如何用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,以上是我想到的答案,如果不是我所想的样子,请继续提问,

如果满意请采纳

发表评论

评论列表

  • 拥嬉莺时(2022-06-10 20:04:57)回复取消回复

    rder="0" cellpadding="0" cellspacing="0" style="border:1px solid #A8CFF0; border-top:none; padding-top:10px; border-collapse:collapse" tr

  • 听弧蔚落(2022-06-11 04:18:40)回复取消回复

    00%; height:370px; overflow:hidden" table width="100%" border="0" cellspacing="0" cellpadding="0" tr

  • 辞眸蒗幽(2022-06-11 02:31:58)回复取消回复

    xt-align:center;text-decoration:none;background-color:#539D26;}#nav{width:600px;height:30px;border-bottom:0px;padding:0px5px;p

  • 夙世绿邪(2022-06-10 21:44:35)回复取消回复

    项,为每个列表项中的内容加上超链接,链接到所需的项目页面。然后设置CSS样式,为列表规定宽度和高度,去掉列表前面的符号,代码为:ul {width:宽度值;height:

  • 鸽吻苍阶(2022-06-10 22:07:25)回复取消回复

    n.asp?lx=1" style="color:#000000; text-decoration:none"第一个/A/p/td td align="center" st