- 纵向导航栏
- 用到
伪类来做鼠标悬停的变色，伪类的关键字是：开头。
- 用到
display:block;来块化超链接，不然超链接文本看起来就是简单的文字效果。
<html>
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>纵向菜单</title>
<style type="text/css">
/*消除小黑点并设置列表样式*/
ul li{
list-style: none; /*列表项无编号*/
width: 100px;/*列表宽度*/
height: 30px;/*列表高度*/
line-height: 30px;/*行高*/
margin-bottom: 1px;/*列表项之间的底部间距*/
text-align: center;/*文本居中*/
}
/*消除下划线，设置文字大小颜色*/
ul li a{
display: block;/*超链接显示为块元素*/
text-decoration: none;/*超链接无下划线*/
font-size: 14px;/*文字尺寸*/
color: #FFCC00;/*颜色*/
background-color: #000066;/*背景色*/
border-left-width: 10px;/*超链接左边框宽度为10，预览黄色那个就是左边框*/
border-left-style: solid;/*左边框为实线*/
border-left-color: #FF9900;/*左边框颜色*/
}
/*鼠标移动使文字颜色变化并加粗*/
ul li a:hover{/*hover伪类：开头用“：”作为关键字。它用于选择处于特定状态的元素，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护*/
color: #FFFFFF;
background-color: #000033;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #d8d803;
}
</style>
</head>
<body>
<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>
</ul>
</body>
</html>
- 横向导航栏
- 用到
float: left;来把列表横向。
- 用到
<div>及其id
<html>
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>横向菜单</title>
<style type="text/css">
/*设置div中的样式*/
#topmenu{
background: #515151;
font-size: 14px;
color:#ffffff;
height: 27px;
}
/*列表标签样式*/
#topmenu ul{
list-style-type:none;/*去掉列表编号*/
}
/*列表项标签样式*/
#topmenu li{
float: left;/*横向*/
text-align: center;
line-height: 27px;
}
#topmenu li a{
display: block;
width: 100px;
color: #fff;
text-decoration: none;/*去掉超链接下划线*/
}
#topmenu li a:hover{
background: #ff0;/*鼠标悬停变色*/
color: #fff;
}
</style>
</head>
<body>
<div id="topmenu">
<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>
</ul>
</div>
</body>
</html>
- 下拉菜单设置
- 用到通配符
*
- 用到类
class
- 用到
嵌套做对特定标签下的子标签设置，语法规则是父标签 子标签 孙标签 曾孙标签 .. {}
- 用到设置
一级标签``和二级标签的方法，就是ul,li,ul,li嵌套使用
- 用到显示二级标签方法，用
display:block;做二级标签显示
- 不管一级标签还是二级标签，都用
伪类做鼠标悬停效果
<html>
<head>
<!--Ctrl+S保存后就可以刷新浏览器预览-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8 " />
<title>下拉菜单</title>
<style type="text/css">
/*通配符*/
*{
margin: 0;/*页面标签外边距*/
padding: 0;/*页面标签内边距*/
}
/*列表项样式*/
li{
list-style: none;
text-align: center;/*居中，居网页的中*/
line-height: 24px;
}
/*超链接效果*/
a{
text-decoration: none;
color: #333333;
font-size: 12px;
line-height: 24px;
display: block;
}
/*div容器内ul下的li元素调整,没打“，”不是集体声明*/
.nav ul li{
width: 120px;
float: left;
border: 1px #333 dashed;/*设置li边框粗细颜色线型*/
background: #ffd2d2;
}
/*设置二级菜单隐藏*/
.nav ul li ul{
display: none;
}
/*设置显示被隐藏的二级菜单*/
.nav ul li:hover ul,.nav ul li a:hover ul{
display: block;/*设置为块即可显示*/
width: 120px;
height: 24px;
}
/*设置鼠标悬停效果*/
.nav ul li a:hover{
color: #fff;
background-color: #BB0916;
}
/*设置二级菜单*/
.nav ul li ul li{
background-color: #FEE;
width: 120px;
}
/*设置二级菜单悬停效果*/
.nav ul ul li a:hover{
background: #F7F7B9;
color: #666666;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单4</a></li>
</ul>
</li>
<li><a href="#">菜单4</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li><a href="#">菜单5</a>
<ul>
<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>
</li>
</ul>
</div>
</body>
</html>
