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 ...
随机推荐
- P4555 [国家集训队]最长双回文串(回文树)
题目描述 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为abc,逆序为cba,不相同). 输入长度为 n 的串 S ,求 S 的最长双回文子串 T ,即可 ...
- 01-JS起步
01-JS起步
- 【Facebook的UI开发框架React入门之九】button简单介绍（iOS平台）-goodmao
--------------------------------------------------------------------------------------------------- ...
- HDU Victor and World (最短路+状态压缩)
题目链接:传送门 题意: n个城市m条路.刚開始在点1,求把每一个城市都遍历一边最后回到1的花费的最小值. 分析: +n2∗2n). 转自Bestcode. 以下说说我的状态转移,首先 ...
- android音乐播放器开发 SweetMusicPlayer 载入歌曲列表
上一篇写了播放器的总体实现思路,http://blog.csdn.net/huweigoodboy/article/details/39855653,如今来总结下载入歌曲列表. 代码地址:https: ...
- Yocto tips (10): Yocto hellworld 加入一个软件包
Yocto中一个软件包是放在bb文件里的,然后非常多的bb文件集成一个recipe(配方),然后很多的recipe又组成一个meta layer.因此,要加入一个包事实上就是在recipe以下加入一个 ...
- javascript中运算符有哪些？ 他们的优先级 呢？
一元操作符 ++, -- + -(正负)逻辑操作符 ! && ||基本运算符 +, -, *, /, %关系操作符 >, <, >=, <=, ===, ==, ...
- JS--处理重复元素
1.Js找出在数组中出现过的元素,即删除重复元素最后只留一个 <script> function findEleOnly(arr){ for(var i=arr.length-1;i> ...
- Codeforces 344D Alternating Current 简单使用栈
Description Mad scientist Mike has just finished constructing a new device to search for extraterres ...
- jython awt demo
jython awt demo : """\ Create a panel showing all of the colors defined in the pawt.c ...