CSS 横向菜单的制作
   来源:网络收集   评论:0 点击:

html代码利用CSS的浮动属性,可以很容易的制作网上常见的横向菜单。打开我们的小例子index html,我们将利用CSS的浮动属性把导航菜单做成横

html代码

利用CSS的浮动属性,可以很容易的制作网上常见的横向菜单。

打开我们的小例子index.html,我们将利用CSS的浮动属性把导航菜单做成横向菜单。导航部分的htnl代码如下:




可以看出,首先是一个 id="header" 的div,包含了网站的logo图标和 id="menu" 网站菜单div。

标签标出了网站首页,多个

标签列出了网站的菜单。

 

如下图所示,没有定义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;
}

语法分析

  1. 首先定义header的宽度及高度,为了增加层次感,还给header标签设定了背景图案
  2. 定义了.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;
}

语法分析

  1. 首先定义menu的宽度及高度,并且向右浮动
  2. 定义了每一个h2标签的宽度,文字居中,然后关键的使用float属性让3个h2标签横向排列

效果如下所示:

菜单效果示意图

从图上可以看出,已经基本达到了横向菜单的效果,下面就对菜单做进一步装饰。

定义标签


#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;
}

语法分析

  1. 首先定义标签的效果,定义宽度,选择合适的行高,字体颜色,背景色等
  2. 定义标签关键的一步是display: block属性设置,它让标签以块级元素显示,这样定义的宽度才有效

效果如下所示:

菜单效果最终示意图

至此,已经完成了横向菜单的制作,您可以发挥自己的想象,制作出更漂亮的菜单效果来。有的网站不是用h2标签而以li标签列出菜单列表,其制作原理是一样的。

纯 CSS3 的导航菜单生成工具和教程
22款经典二级下拉菜单导航系列


手机页面二维码(扫一扫转给需要的人)

相关热词搜索:横向 菜单

上一篇:CSS 清除浮动 clear 属性
下一篇:最后一页

分享到: 收藏