html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>learnning</title>
<link rel="stylesheet" type="text/css" href="test5.css" />
</head>
<body>
<div class="page">
<div class="nav">
<div class="nav-li">
<!--//一级框-->
<div class="tittle">导航1</div>
<ul>
<!--//二级框-->
<li>
二级栏目
<div class="list-3">
<!--//三级框-->
<div class="list-3Dom">
三级栏目
</div>
<div class="list-3Dom">
三级栏目
</div>
<div class="list-3Dom">
三级栏目
</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">
三级栏目
</div>
<div class="list-3Dom">
三级栏目
</div>
<div class="list-3Dom">
三级栏目
</div>
</div>
</li>
<li>
二级栏目
<div class="list-3">
<div class="list-3Dom">
三级栏目
</div>
<div class="list-3Dom">
三级栏目
</div>
<div class="list-3Dom">
三级栏目
</div>
</div>
</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">导航1</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
<div class="nav-li">
<div class="tit">导航1</div>
<ul>
<li>二级栏目</li>
<li>二级栏目</li>
<li>二级栏目</li>
</ul>
</div>
</div>
</div>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
/*消除所有的边距*/
}
html,body{
width: 100%;
height: 100%;
}
.page{
/*表示整个网页*/
width: 100%;
height: 4043px;
background:url(../img/0.jpg) center no-repeat;
/*图片居中不平铺*/
border: 1px solid red;
}
.nav{
width:160px;
/*//宽度*/
height:205px;
/*//高度根据子元素来算*/
margin-top:-103px;
position:fixed;
left:10px;
top:50%;
/*//上下居中*/
font-family: "微软雅黑";
}
.nav-li{
/*一级框*/
width:160px;
height:auto;
border-bottom:1px solid #FFFFFF;
background:#333333;
text-align:center;
/*//水平居中*/
line-height:40px ;
/*//垂直居中*/
color:#FFFFFF;
font-size:16px;
}
.tittle{
/*一级内容*/
width:160px;
height:40px;
}
.nav-li ul{
/*二级框*/
width:160px;
height:auto;
background-color:#FFF;
display:none;
/*//一开始二级标题是隐藏的*/
}
.nav-li:hover ul{
display:block;
/*//当鼠标移动到一级框上边时显示，取代上边的display:none;*/
cursor: pointer;
/*//改变鼠标的形状*/
}
.nav-li ul li{
/*二级内容*/
width:160px;
height:40px;
border-bottom: 1px dashed #666;
color: #333;
text-align: center;
line-height: 40px;
position:relative;
/*//父元素*/
}
.nav-li ul li:hover .list-3{
/*//当鼠标移动到二级内容上时，三级栏目显示*/
display:block;
}
.list-3{
/*三级框*/
/*//三级栏目*/
width:160px;
height:auto;
position:absolute;
left:160px;
top: 0;
display:none;
}
.list-3Dom{
/*三级内容*/
/*//三级栏目的子栏目*/
width: 160px;
height: 40px;
background:#444;
border-bottom: 1px solid #FFF;
text-align: center;
line-height: 40px;
color:#FFFFFF;
}
2、垂直导航栏菜单的制作（1）
<html>
<head>
<meta charset="UTF-8"/>
<title>导航菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 100px;
height:auto;
background-color:#CCCCCC;
border: 1px solid red;
list-style-type: none;
}
a{
text-decoration: none;
text-indent: 18px;/*使用缩进*/
display: block;/*将a标签变为块级元素*/
width: 100px;
height: 40px;
line-height: 40px;
font-size: 16px;
margin-bottom:1px solid red;
}
a:hover{
background-color: #00FF00;
color: #FFFFFF;
}
</style>
</head>
<body>
<ul>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
</ul>
</body>
</html>
3、水平菜单的制作
<html>
<head>
<meta charset="UTF-8"/>
<title>导航菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
text-align: center;
height:40px;
background-color:#CCCCCC;
border: 1px solid red;
list-style-type: none;
}
li{
float: left;
}
a{
text-align: center;
text-decoration: none;
display: block;/*将a标签变为块级元素*/
width: 100px;
height: 40px;
line-height: 40px;
font-size: 16px;
margin-bottom:1px solid red;
}
a:hover{
background-color: #00FF00;
color: #FFFFFF;
}
</style>
</head>
<body>
<ul>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
<li><a href="">导航</a></li>
</ul>
</body>
</html>
4、菜鸟教程垂直导航栏
<html>
<head>
<title>导航栏</title>
<meta charset="UTF-8"/>
<style type="text/css">
ul{
margin:0px;
padding:0px;
width:15%;
height: 100%;
position: fixed;
overflow: auto;
list-style-type: none;
background-color:#CCC;
}
li{
text-align: center;
border-bottom: 1px solid black;
}
li:last-child{
border-bottom: none;
}
a{
display: block;/**/
text-decoration: none;
}
a:hover{
background-color: red;
color: white;
}
.active{
background-color:rgb(37, 162, 58);
}
</style>
</head>
<body>
<ul>
<li class="active"><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
</ul>
</body>
</html>
5、菜鸟教程导水平航栏
(1)display:inlie;
<html>
<head>
<title>导航栏</title>
<meta charset="UTF-8"/>
<style type="text/css">
ul{
margin:0px;
padding:20px;
width: 100%;
position: fixed;
list-style-type: none;
background-color:#CCC;
}
li{
padding: 16px;
display: inline;
}
a{
text-decoration: none;
}
a:hover{
background-color: red;
color: white;
}
.active{
background-color:rgb(37, 162, 58);
}
</style>
</head>
<body>
<ul>
<li class="active"><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
</ul>
</body>
</html>
(2) li { float:left; } a { display:block; width:60px; }
<html>
<head>
<title>导航栏</title>
<meta charset="UTF-8"/>
<style type="text/css">
ul{
margin:0px;
padding:20px;
width: 100%;
position: fixed;
list-style-type: none;
background-color:#CCC;
}
li{
float: left;
padding: 16px;
}
a{
display: block;
width: 60px;
text-decoration: none;
}
a:hover{
background-color: red;
color: white;
}
.active{
background-color:rgb(37, 162, 58);
}
</style>
</head>
<body>
<ul>
<li class="active"><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
<li><a href="">导航栏</a></li>
</ul>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
