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
}
这是由两个div来实现的,首先建立一个外层div并设置宽高,要使宽度随屏幕宽度变化(即浏览器宽度变化),那么宽度就得设置100%,高度设置为你需要的高度即可,具体属性为 width:100%height:你自己的高度background:你需要的颜色这样就让该div随屏幕(浏览器)宽度变化而变化了。然后在这个div里面再嵌套一个div给定一个宽高属性,就是你导航的宽高,要使之居中,各人使用的方法也有所不同,但是常用的还是margin属性,具体属性如下 width:你导航的宽度height:你导航的高度margin:0 auto 这样就实现了,如果背景是图片的话就更改background属性即可,还有不明白的随时Hi我。这个很简单,用js才能实现,css样式我就不说了,左侧是a链接,右侧是div,关键是js,在每个点击里添加onclick事件,事件触发opens函数,函数通过参数判断要打开哪个div,其余的再隐藏,给个例子你,很简单的东西,我随便写的,没有测试过,你自己研究研究:
<a href="#" onclick="opens(1)">1</a>
<a href="#" onclick="opens(2)">1</a>
<a href="#" onclick="opens(3)">1</a>
<div id="dis1">111</div>
<div id="dis2" style="display:none">222</div>
<div id="dis3" style="display:none">333</div>
<script>
function opens(obj){
for(var i = 1i<=3i++){
if(i == obj){document.getElementById("dis"+i).style.display="block"
}else
document.getElementById("dis"+i).style.display="none"
}
}
</script>