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 ...
随机推荐
- P2420 让我们异或吧(树链剖分)
题目描述 异或是一种神奇的运算,大部分人把它总结成不进位加法. 在生活中-xor运算也很常见.比如,对于一个问题的回答,是为1,否为0.那么: (A是否是男生 )xor( B是否是男生)＝A和B是否能 ...
- Java实现断点续传。
http://www.cnblogs.com/liaojie970/p/5013790.html
- centos的终端字体杂乱的问题
sudo yum -y install dejavu-sans-* dejavu-serif-fonts 下载字体一下就好了
- Android Studio获取开发版SHA1值和发布版SHA1值，详细过程
转自原文 Android Studio获取开发版SHA1值和发布版SHA1值的史上最详细方法 前言: 今天我想把百度地图的定位集成到项目中来,想写个小小的案例,实现一下,但在集成百度地图时首先要申请秘 ...
- 动态限制EdiText仅仅能输入特定字符
怎样设置EditText,使得仅仅能输入数字或者某些字母呢? 一.设置EditText,仅仅输入数字: 方法1:直接生成DigitsKeyListener对象就能够了. et_1.setKeyList ...
- POJ2485 Highways 【MST】
Highways Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22842 Accepted: 10525 Descri ...
- Lesson 2 Building your first web page: Part 2
Tag Diagram You may have noticed that HTML tags come in pairs; HTML has both an opening tag (<tag ...
- Linux 内核源码（kernel source）
查看内核的发行版:uname -r(--kernel-release) $ uname -r 4.4.0-78-generic 内核源码所在的位置:/usr/src $ cd /usr/src $ l ...
- Gym - 100338E Numbers 贪心
Gym - 100338E 题意:给你n,k问在1-n中能整出k的字典序最小的数.范围1018 思路:比较简单的贪心了,枚举10的幂m,然后加上k-m%k, 更新答案就可以了,数据一定要用unsign ...
- RedHat Linux 下安装、测试摄像头
RedHat Linux 下安装.测试摄像头(全文见附件) 随着视频电话的迅速发展我相信大家一定有过在Windows 下安装摄像头的经历,然而大多数 都不支持Linux .我现以罗技摄像头为例 ...