WEB2.0网页制作标准教程(11)不用表格的菜单

作者:阿捷 来源:w3cn 时间:2008-02-19 19:36:00 

阅读上一篇教程:WEB2.0网页制作标准教程(10)自适应高度

布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:

样式表:

#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}


页面代码:

<div id="logo"><a title="网页设计师" href="http://www.w3cn.org/" ><img height="80" alt="链接到w3cn.org首页" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>

以上代码现在应该容易理解。先在CSS定义了一个logo的层,然后在页面中调用它。需要说明的是,为了使网页有更好的易用性,web标准要求大家给所有的、属于正式内容的图片,加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字),所以不要只写成无意义的图片名称。

接下来是定义菜单。

1.不用表格的菜单(纵向)

我们先来看菜单的最终效果:


通常方法我们至少嵌套2层表格来实现这样的菜单,间隔线采用在td中设置背景色并插入1px高的透明GIF图片实现;背景色的交替效果采用td的onmouseover事件实现。但查看本菜单的页面代码,你会看到只有如下几句:

<div id="menu">
<ul>
<li><a title="标记语言和样式手册" href="https://www.aspxhome.com/program/2008/2755.htm">标记语言和样式手册</a></li>
<li><a title="站长必读" href="https://www.aspxhome.com/webmaster/">站长必读</a></li>
<li><a title="asp之家" href="http://www.aspxhome.com">asp之家</a></li>
<li><a title="网页设计" href="https://www.aspxhome.com/design/">网页设计</a></li>
<li><a title="Ajax技术" href="https://www.aspxhome.com/asp/ajax/">Ajax技术</a></li>
<li><a title="资源下载" href="https://www.aspxhome.com/download/">资源下载</a></li>
</ul>
</div>  

没有用任何table,而用的是无序列<li>,整个菜单的效果实现的秘密完全在于

id="menu"

,我们再来看CSS中关于menu的定义:

(1)首先定义了menu层的主要样式:

#menu {
MARGIN: 15px 20px 0px 15px;  /*定义层的外边框距离*/
PADDING:15px;    /*定义层的内边框为15px*/
BACKGROUND: #dfdfdf;   /*定义背景颜色*/
COLOR: #666;    /*定义字体颜色*/
BORDER:#fff 2px solid;  /*定义边框为2px白色线条*/
WIDTH:160px;    /*定义内容的宽度为160px*/
}

(2)其次定义无序列表的样式:

#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; /*不显示边框*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;

}
#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}

说明:这里用的是id选择器的派生方法定义(参考第7天:CSS入门的介绍)了在menu层中的子元素<ul>和<li>的样式。

LIST-STYLE-TYPE: none

一句表示不采用无序列表的默认样式,即:不显示小圆点(我们后面用自己的图标来代替小圆点)。

BORDER-TOP: #FFF 1px solid;

则定义了菜单之间的1px间隔线。

(3)定义onmouseover效果

#menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }

解释如下:

  • "

    display:block;

    "表示将标签a当作块级元素来显示,使得链接变成一个按钮;

  • "

    BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;

    "这一句定义了替代li的小圆点的图标。"transparent"指背景为透明,"2px 8px"指定图标的位置是距左边2px,距上边8px。这一句也可以拆分写成四句:"BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"

  • "

    #menu li a:hover

    "定义了当鼠标移动到链接上以后的颜色变化和小图标变化。

ok,不用表格的菜单就这样实现了。大家可以明显感觉到,原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。

标签:菜单,表格,css,web2.0
0
投稿

猜你喜欢

  • python图形用户界面tkinter之按钮Button的使用说明

    2022-09-14 06:48:28
  • php文件缓存类用法实例分析

    2023-08-17 16:26:44
  • php小技巧之过滤ascii控制字符

    2023-10-03 05:13:15
  • JavaScript编写推箱子游戏

    2024-03-17 17:47:32
  • 基于php实现七牛抓取远程图片

    2024-05-05 09:17:07
  • go micro微服务proto开发安装及使用规则

    2024-03-19 14:40:13
  • asp fso创建与删除文件与文件夹

    2008-12-31 16:07:00
  • Python实现爬虫设置代理IP和伪装成浏览器的方法分享

    2021-05-26 19:42:29
  • Python利用Nagios增加微信报警通知的功能

    2021-07-15 13:48:46
  • JS模仿手机端九宫格登录功能实现代码

    2024-04-17 10:33:21
  • Python descriptor(描述符)的实现

    2021-12-22 09:07:56
  • 在线一元二次方程计算器实例(方程计算器在线计算)

    2024-04-10 10:45:41
  • Python实现文件及文件夹操作大全

    2021-05-22 09:35:21
  • Pytorch数据读取之Dataset和DataLoader知识总结

    2023-11-02 22:57:37
  • Golang学习之平滑重启

    2024-04-25 15:05:57
  • 大写锁定提醒

    2009-06-11 13:12:00
  • python实现Dijkstra算法的最短路径问题

    2023-05-18 23:22:15
  • python3使用QQ邮箱发送邮件

    2023-09-05 05:16:15
  • asp如何用CDONTS发送带附件的邮件?

    2010-06-11 19:57:00
  • Python抓取通过Ajax加载数据的示例

    2023-12-09 21:28:38
  • asp之家 网络编程 m.aspxhome.com