HTML静态网页导航制作
普通导航栏制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航栏</title>
<style>
*{
margin:0px;
padding:0px;
}
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
margin:0px auto;
}
.nav ul li{
float:left;/*让li元素左浮动*/
list-style:none;/*取消ul无序列表前的点*/
border:1px solid #000;
}
.nav ul li a{
width:80px;/*设置元素宽为80px*/
height:28px;/*设置高度为28px*/
line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:5px 10px;
font-size:12px;/*用12号字*/
display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none; /*去掉下划线*/
}
.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
<li><a href="">导航4</a></li>
<li><a href="">导航5</a></li>
<li><a href="">导航6</a></li>
</ul>
</div>
</body>
</html>
隐藏显示导航栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function xianshi()
{
}
</script>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.div1{
text-align:center;
background-color:#0FC;
font-size:28px;
height:30px;
width:120px;
top:40px;
left:50px;
position:relative;
overflow:hidden;
}
.div11{
text-align:center;
background-color:#C00;
font-size:28px;
height:30px;
width:120px;
top:40px;
left:50px;
position:relative;
overflow:visible;
}
.div2
{
text-align:center;
background-color:#F3F;
font-size:24px;
height:90px;
width:120px;
top:30px;
left:0px;
position:absolute;
}
.div3
{
text-align:center;
height:30px;
width:120px;
background-color:#F3F;
}
.div33
{
text-align:center;
height:30px;
width:120px;
background-color:#930;
}
</style>
</head>
<body>
<div id="div1" class="div1" onmouseover="zhixing()" onmouseout="this.className='div1'"><a href="">菜单</a>
<div class="div2">
<div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">首页</div>
<div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">关于我们</div>
<div class="div3" onmouseover="this.className='div33'" onmouseout="this.className='div3'">联系我们</div>
</div>
</div>
</body>
</html>
<script>
function zhixing()
{
var a = document.getElementById("div1");
a.setAttribute("class","div11");
}
</script>
