Web前端开发实战4：导航菜单(一)
在前面的博文中我们提到横向一级菜单，这里我们来看看导航菜单。
导航菜单种类非常多，可是制作原理都是大同
小异的。这里看的比二级下拉式菜单还简单。
来看一些站点上的导航菜单：
垂直导航菜单：
水平导航菜单：
一垂直菜单
制作原理：(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：导航菜单(一)的更多相关文章
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
- Web前端开发实战1：二级下拉式菜单之CSS实现
二级下拉式菜单在各大学校站点.电商类站点.新闻类站点等大型?站点非经常见,那么它的实现原理是什么呢? 学习了Web前端开发的知识后,我们是能够实现这种功能的.复杂的都是从基础效果上加入做出来的.原理和 ...
- Web前端开发实战2：二级下拉式菜单之JS实现
上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...
- 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)
用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...
- Web 前端开发人员和设计师必读精华文章【系列二十六】
<Web 前端开发精华文章推荐>2014年第5期(总第26期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十八】
<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web前端开发（高级）下册-目录
多媒体与绘图 多媒体音频格式视频格式 HTML5多媒体支持 <audio>和<video> htmlaudioElement和htmlVideoElement <audi ...
- Web 前端开发学习之路（入门篇）
字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.＝＝ ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
随机推荐
- windows平台Perl模块离线安装
工具: Perl windows工具:ActivePerl-5.24.0.2400-MSWin32-x86-64int-300560.exe Dmake工具:https://cpan.metacpan ...
- 紫书 习题 10-14 UVa 10886（暴力+数据范围）
开始的时候一看这题感觉很难,觉得肯定有什么很快的办法 不能暴力做(受了上一题10-13的影响) 然后一看那个函数感觉无从下手. 然后看了博客发现,原来这道题就是直接暴力-- 因为n的范围为10的7次方 ...
- ZJU 1346 Comparing Your Heroes 状态压缩DP 拓扑排序的计数
做多校的时候遇见一个求拓扑排序数量的题,就顺便来写了一下. 题意: 你有个朋友是KOF的狂热粉丝,他有一个对其中英雄的强弱比较,让你根据这些比较关系来给这些英雄排名.问一共有多少种排名方式. 思路: ...
- [Python] Pandas load DataFrames
Create an empty Data frame with date index: import pandas as pd def test_run(): start_date='2017-11- ...
- android自己定义刷新类控件
android尽管定义了种类很丰富的控件.可是有的时候这些自己定义的控件还是不能满足我的要求,为了可以适配很多其它的需求,我们须要在原有的基础上进行自己定义控件. 今天我向大家介绍的就是android ...
- Go 语言编程
[课程名称]Go 语言编程 [课程时间]2014年7月30日(周三) 20:50 - 22:00 [课程安排]20:50-21:00 通过邮件地址登录网络课堂 ...
- MAC 文件加密
MAC 文件加密 (2011-10-08 00:08:52) 标签: 杂谈 分类: MAC技巧篇 我们都有一些私密的文件需要保存,在苹果操作系统下,如何为这些文件或文件夹设置密码呢? 利用系统自带的创 ...
- 3.React Native在Android中自己定义Component和Module
React Native终于展示的UI全是Native的UI.将Native的信息封装成React方便的调用. 那么Native是怎样封装成React调用的?Native和React是怎样交互的? V ...
- 如何保证对象线程内唯一：数据槽（CallContext）
CallContext 是类似于方法调用的线程本地存储区的专用集合对象,并提供对每个逻辑执行线程都唯一的数据槽.数据槽不在其他逻辑线程上的调用上下文之间共享.当 CallContext 沿执行代码路径 ...
- BZOJ 2553 AC自动机+矩阵快速幂 （神题）
思路: 我们先对所有读进来的T建一个AC自动机 因为走到一个禁忌串就需要回到根 所以呢 搞出来所有的结束点 或一下 fail指针指向的那个点 然后我们就想转移 a[i][j]表示从i节点转移到j节点的 ...