html代码
利用CSS的浮动属性,可以很容易的制作网上常见的横向菜单。
打开我们的小例子index.html,我们将利用CSS的浮动属性把导航菜单做成横向菜单。导航部分的htnl代码如下:
<div id="header"> <h1 class="logo"><a href="index.html" title="首页"><img src="images/logo.gif" alt="首页" /></a></h1> <div id="menu"><!--nav start--> <h2><a href="index.html">首页</a></h2> <h2><a href="blog.html">博客</a></h2> <h2><a href="guestbook.html">留言板</a></h2> </div><!--nav end--> </div><!--header end-->
可以看出,首先是一个 id="header" 的div,包含了网站的logo图标和 id="menu" 网站菜单div。<h1>标签标出了网站首页,多个<h2>标签列出了网站的菜单。
如下图所示,没有定义CSS,就是普通的由上至下文档流方式:
注意我们在《改进的小例子-5》中已经做了全局基本设定,所以上图显示的是设定后的效果。
定义header及logo
如果您只是想了解横向菜单的制作,这一步可以略过。教程里有这一步,是为了同时完善整个例子的header标签。
定义header及logo:
/*header*/ #header{ width: 100%; height: 70px; background: url(../images/header_bg.gif) repeat-x bottom; float: left; } .logo{ width:310px; height:60px; margin: 5px 0 0 10px; float: left; }
语法分析
- 首先定义header的宽度及高度,为了增加层次感,还给header标签设定了背景图案
- 定义了.logo,用于定义网站logo图片的位置
效果如下所示:
从图上可以看出,由于浮动的效果,menu这个div已经包含在header内了而不是普通的文档流布局。
定义menu
/*munu*/ #menu{ width: 500px; height: 38px; margin: 16px auto 0 20px; float: right; } #menu h2{ width: 100px; text-align: center; float: left; }
语法分析
- 首先定义menu的宽度及高度,并且向右浮动
- 定义了每一个h2标签的宽度,文字居中,然后关键的使用float属性让3个h2标签横向排列
效果如下所示:
从图上可以看出,已经基本达到了横向菜单的效果,下面就对菜单做进一步装饰。
定义<a>标签
#menu a{ width: 99px; line-height: 24px; font-weight: normal; color: #FFFFFF; background: #ff3300; display: block; } #menu a:hover{ font-weight: bold; text-decoration: none; color: #FFFFFF; background: #800000; }
语法分析
- 首先定义<a>标签的效果,定义宽度,选择合适的行高,字体颜色,背景色等
- 定义<a>标签关键的一步是display: block属性设置,它让<a>标签以块级元素显示,这样定义的宽度才有效
- 下面定义了一个伪类,显示鼠标放上去的效果(下图紫色为鼠标放上去菜单效果)
- 可以利用背景图片代替背景色以制作出更炫的效果
效果如下所示:
至此,已经完成了横向菜单的制作,您可以发挥自己的想象,制作出更漂亮的菜单效果来。有的网站不是用h2标签而以li标签列出菜单列表,其制作原理是一样的。