大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单。导航菜单种类很多,但是制作原理都是大同
小异的,这里看的比二级下拉式菜单还简单。来看一些网站上的导航菜单:
垂直导航菜单:
水平导航菜单:
一垂直菜单
制作原理:(1)用无序列表构建菜单;(2)<a>标签的设置:ul li a{display:block;}。定义的关键是将<a>标签设置为
块元素。
代码:
<!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=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微软雅黑";
}
.nav{
height:200px;
width:90px;
margin-top:50px;
margin-left:10px;
}
.nav ul{
list-style:none;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
/*设置的关键*/
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-bottom:1px;
}
.nav li a:hover{
background-color:#FF6600;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="nav" class="nav">
<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>
</div>
</body>
</html>
效果展示:
初始化状态或鼠标离开的状态:
鼠标放上去的状态:
二水平菜单
制作原理:在垂直菜单的基础上,将li元素进行左浮动设置。由于li元素浮动脱离原来的文档流会失去宽和高,因
此一定要在a元素上使用display:block属性将其变为块级元素,然后进行宽和高的设置。
只改变CSS样式代码:
/*CSS全局设置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微软雅黑";
}
.nav{
height:40px;
margin-top:50px;
margin-left:10px;
}
.nav ul{
list-style:none;
}
/*设置的关键*/
.nav li{
float:left;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-right:1px;
}
.nav li a:hover{
background-color:#FF6600;
color:#FFFFFF;
}
效果展示:
三圆角菜单
制作原理:在水平菜单的基础上我们进行CSS圆角属性的设置,但是IE6,7,8浏览器并不支持这个属性,制作一定
要考虑浏览器的兼容性,在这里我们使用圆角属性。解决不兼容的方法就是我们可以裁剪圆角背景图作为每个li元素
的背景即可。
完整的代码:
<!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=gb2312" />
<title>导航菜单</title>
<style type="text/css">
/*CSS全局设置*/
*{
margin:0;
padding:0;
font-size:16px;
font-family:"微软雅黑";
}
.nav{
height:50px;
margin-top:20px;
margin-left:10px;
}
.nav ul{
list-style:none;
height:50px;
border-bottom:10px solid #FF6600;
padding-left:30px;
}
.nav li{
float:left;
margin-top:10px;
}
.nav li a{
background-color:#EEEEEE;
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
line-height:40px;
text-align:center;
margin-left:1px;
/*设置圆角属性,IE6,7,8不支持*/
border-top-left-radius:15px;
border-top-right-radius:15px;
}
.nav li a:hover,.nav li a.on{
background-color:#FF6600;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="nav" class="nav">
<ul>
<li><a class="on" href="#">网站首页</a></li>
<li><a href="#">课程大厅</a></li>
<li><a href="#">学习中心</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
效果展示:
初始化状态或鼠标离开的状态:
鼠标移上去的状态:
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159460.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...