在前面的博文中我们提到横向一级菜单,这里我们来看看导航菜单。

导航菜单种类非常多,可是制作原理都是大同

小异的。这里看的比二级下拉式菜单还简单。

来看一些站点上的导航菜单:

垂直导航菜单:

水平导航菜单:

一垂直菜单

制作原理:(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>

效果展示:

初始化状态或鼠标离开的状态:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

鼠标放上去的状态:

二水平菜单

制作原理:在垂直菜单的基础上,将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>

效果展示:

初始化状态或鼠标离开的状态:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

鼠标移上去的状态:

Web前端开发实战4:导航菜单(一)的更多相关文章

  1. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  2. Web前端开发实战1:二级下拉式菜单之CSS实现

    二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...

  3. Web前端开发实战2:二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

  4. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  5. Web 前端开发人员和设计师必读精华文章【系列二十六】

    <Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...

  6. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】

    <Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. Web前端开发(高级)下册-目录

    多媒体与绘图 多媒体音频格式视频格式 HTML5多媒体支持 <audio>和<video> htmlaudioElement和htmlVideoElement <audi ...

  8. Web 前端开发学习之路(入门篇)

    字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== ...

  9. Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】

    <Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

随机推荐

  1. Linux下的压缩与解压缩

    1 .gz 1)压缩 root@xiaohuang-virtual-machine:/home/xiaohuang/桌面/hellow/hellow# gzip 2.txt 3.txt root@xi ...

  2. 【习题 8-20 UVA-1620】Lazy Susan

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现,如果把连续4个数字进行一次翻转的话. 假设这连续的4个数字的逆序数为x; 那么翻转过后,逆序数就会变成6-x; (最多6个逆 ...

  3. CodeForces 316c1 Tidying Up

    Tidying Up Time Limit: 4000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Orig ...

  4. Network authentication method and device for implementing the same

    A network authentication method is to be implemented using a network authentication device and a use ...

  5. WEB前端,混合排版,有的宽有的窄,滚动会出现空白处,怎么办。

    多数时候出现空白都是由于有滚动栏滚到一边就会产生空白. overflow-x: hidden; 在最大图的那个div里写这句.

  6. HDU3265 Examining the Rooms【stirling数】

    题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=3625 题目大意: 有N个房间,每一个房间的要是随机放在某个房间内,概率同样.有K次炸门的机会. 求 ...

  7. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  8. vue父子间通信案列三($emit和prop用法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. linux 10201 ocfs RAC 安装+升级到10205

    准备环境的时 ,要4个对外IP,2个对内IP 不超过2T,,一般都用OCFS 高端存储适合用ASM linux10G安装的时候,安装的机器时间要小于等于(如果是等于要严格等于)第二个机器的时间(只有l ...

  10. 如何在Centos官网下载所需版本的Centos——靠谱的Centos下载教程

    很多小伙伴不知道对应版本的Centos怎么下载,最近小编整理了一份Centos详细的下载教程,希望小伙伴们不在为下不到对应版本的Centos而苦恼. 1.进入Centos官网:https://www. ...