一级导航，二级导航，三级导航介绍

一级导航

（新学者如有不懂可以去参看我博客里其他的相关随笔）

* { margin: 0; padding: 0; }消除网页默认的margin值和padding值

.nav { width: 1280px; height: 60px; border: 1px solid red; margin: 70px auto; }

给div设置宽高和边界线

`ul li { list-style: none; }`去除无序列表前面的点

ul li a{
float: left; 向左浮动
width: 320px; 块320像素
height: 60px; 高60像素
text-align: center; 文字居中
line-height: 60px; 字高60像素
font-weight: bold; 字体加粗
display: block; 显示为块类型
text-decoration: none; 去除下划线
background-color: green; 背景颜色为绿色
color: black; 字体颜色为黑色
}这里定义a标签的属性

ul li a:hover { background-color: black; color: white; }当鼠标悬浮于a标签上时背景和字体发生的变化
ul li a:active { background-color: red; color: orange; }当鼠标点击a标签上时背景和字体发生的变化 ##以下是一级导航完整代码 ---- 一级导航网页链接导航
****** #二级导航 **.nv ul li:hover ul**表示定义（class=nv属性下ul ul下的li
在li上进行hover 操作时产生的ul ）的css属性值 ！
这是二级导航的重要css代码

.nv ul li ul {
position: absolute; 绝对定位
display: none; 隐藏块类型
}
.nv ul li ul li {
float: none; 消除浮动
}
.nv ul li ul li a {
background:pink;
color: black;
}
.nv ul li:hover ul {
display:block; 显示块
}

以下是二级导航的全部代码（含部分解释）





二级导航







三级导航

这是三级导航的重要代码和二级导航有相似

.nav ul li:hover ul li ul {
display: none;
position: absolute;
left: 200px;
top: 0px;
}
.nav ul li ul li ul li {
float: none;
}
.nav ul li ul li ul li a {
background-color: green;
color: black;
/* top: 0;
left: 200px;*/
}
.nav ul li:hover ul li:hover ul {
display: block;
}





三级导航










欢迎广大IT爱好者评论！

新学者如有不懂可以去参看我博客里其他的相关随笔

posted @ 2017-06-27 20:50  苹果喂草莓  阅读(87918)  评论(0)    收藏  举报