`

WEB2.0标准教程：第十一天 不用表格的菜单

CSSHTML 
阅读更多
布局初步搭建起来，我开始填充里面的内容。首先是定义logo图片：

样式表：#logo{MARGIN:0px;padding:0px;WIDTH:200px;HEIGHT:80px;}
页面代码：<divid="logo"><atitle="WEB2.0标准教程循序渐进十二天的基础学习！"href="http://www.yzci.com/"><imgheight="80"alt="WEB2.0标准教程"src="logo.gif"width="200"/></a></div>
以上代码现在应该容易理解。先在CSS定义了一个logo的层，然后在页面中调用它。需要说明的是，为了使网页有更好的易用性，web标准要求大家给所有的、属于正式内容的图片，加一个alt属性。这个alt属性是用来说明图片的作用(当图片不能显示的时候就显示替换文字)，所以不要只写成无意义的图片名称。
接下来是定义菜单：

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

我们先来看菜单的最终效果：
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]




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

程序代码 程序代码
<divid="menu">
<ul>
<li><atitle="网站标准"href="http://www.yzci.com/webstandards.html">什么是网站标准</a></li>
<li><atitle="标准的好处"href="http://www.yzci.com/benefits.html">使用标准的好处</a></li>
<li><atitle="怎样过渡"href="http://www.yzci.com/howto.html">怎样过渡</a></li>
<li><atitle="相关教程"href="http://www.yzci.com/tutorial.html">相关教程</a></li>
<li><atitle="工具"href="http://www.yzci.com/tools.html">工具</a></li>
<li><atitle="资源及链接"href="http://www.yzci.com/resources.html">资源及链接</a></li>
</ul>
</div>




没有用任何table,而用的是无序列<li>，整个菜单的效果实现的秘密完全在于id="menu"，我们再来看CSS中关于menu的定义：

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

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




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

程序代码 程序代码
#menuul{
MARGIN:0px;
PADDING:0px;
BORDER:mediumnone;/*不显示边框*/
LINE-HEIGHT:normal;
LIST-STYLE-TYPE:none;
}
#menuli{BORDER-TOP:#FFF1pxsolid;MARGIN:0px;}




说明：这里用的是id选择器的派生方法定义(参考第7天：CSS入门的介绍)了在menu层中的子元素<ul>和<li>的样式。LIST-STYLE-TYPE:none一句表示不采用无序列表的默认样式，即：不显示小圆点（我们后面用自己的图标来代替小圆点）。BORDER-TOP:#FFF1pxsolid;则定义了菜单之间的1px间隔线。

(3)定义onmouseover效果

程序代码 程序代码
#menulia{
PADDING:5px0px5px15px;
DISPLAY:block;
FONT-WEIGHT:bold;
BACKGROUND:url(attachments/month_0612/d2006122221544.gif)transparentno-repeat2px8px;
WIDTH:100%;
COLOR:#444;
TEXT-DECORATION:none;
}
#menulia:hover{BACKGROUND:url(attachments/month_0612/42006122221553.gif)#C61C18no-repeat2px8px;
COLOR:#fff;}




解释如下：

●"display:block;"表示将标签a当作块级元素来显示，使得链接变成一个按钮；
●"BACKGROUND:url(attachments/month_0612/d2006122221544.gif)transparentno-repeat2px8px;"这一句定义了替代li的小圆点的图标。"transparent"指背景为透明，"2px8px"指定图标的位置是距左边2px，距上边8px。这一句也可以拆分写成四句："BACKGROUND-IMAGE:url(attachments/month_0612/d2006122221544.gif);BACKGROUND-POSITION:2px8px;BACKGROUND-REPEAT:no-repeat;BACKGROUND-COLOR:transparent;"
●"#menulia:hover"定义了当鼠标移动到链接上以后的颜色变化和小图标变化。
ok，不用表格的菜单就这样实现了。大家可以明显感觉到，原来写在HTML里的表现样式全部剥离放到CSS文件里去了。页面代码节约了大半。通过CSS要修改菜单样式就很简单了。

2.不用表格的菜单(横向)

上面是纵向的菜单,如果要显示横向菜单，用li也可以吗？当然是可以的，下面给出代码。
效果如下:
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]



页面代码

程序代码 程序代码
<divid="submenu">
<ul>
<liid="one"><atitle="首页"href="http://www.yzci.com/">Home</a></li>
<liid="two"><atitle="关于我们"href="http://www.yzci.com/aboutus.html">关于我们</a></li>
<liid="three"><atitle="网站标准"href="http://www.yzci.com/webstandards.html">网站标准</a></li>
<liid="four"><atitle="标准的好处"href="http://www.yzci.com/benefits.html">标准的好处</a></li>
<liid="five"><atitle="怎样过渡"href="http://www.yzci.com/howto.html">怎样过渡</a></li>
<liid="six"><atitle="相关教程"href="http://www.yzci.com/tutorial.html">相关教程</a></li>
<liid="seven"><atitle="工具"href="http://www.yzci.com/tools.html">工具</a></li>
<liid="eight"><atitle="资源及链接"href="http://www.yzci.com/resources.html">资源及链接</a></li>
<liid="nine"><atitle="常见问题"href="http://www.yzci.com/faq.html">常见问题</a></li>
</ul>
</div>




样式表代码

程序代码 程序代码
#submenu{
MARGIN:0px8px0px8px;
PADDING:4px0px0px0px;
BORDER:#fff1pxsolid;
BACKGROUND:#dfdfdf;
COLOR:#666;
HEIGHT:25px;}

#submenuul{
CLEAR:left;
MARGIN:0px;
PADDING:0px;
BORDER:0px;
LIST-STYLE-TYPE:none;
TEXT-ALIGN:center;
DISPLAY:inline;
}

#submenuli{
FLOAT:left;
DISPLAY:block;
MARGIN:0px;
PADDING:0px;
TEXT-ALIGN:center}

#submenulia{
DISPLAY:block;
PADDING:2px3px2px3px;
BACKGROUND:url(attachments/month_0612/d2006122221544.gif)transparentno-repeat2px8px;
FONT-WEIGHT:bold;
WIDTH:100%;
COLOR:#444;
TEXT-DECORATION:none;
}

#submenulia:hover{
BACKGROUND:url(attachments/month_0612/42006122221553.gif)#C61C18no-repeat2px8px;
COLOR:#fff;}

#submenuulli#oneA{WIDTH:60px}
#submenuulli#twoA{WIDTH:80px}
#submenuulli#threeA{WIDTH:80px}
#submenuulli#fourA{WIDTH:90px}
#submenuulli#fiveA{WIDTH:80px}
#submenuulli#sixA{WIDTH:80px}
#submenuulli#sevenA{WIDTH:60px}
#submenuulli#eightA{WIDTH:90px}
#submenuulli#nineA{WIDTH:80px}




以上代码不逐一分析了。横向菜单的关键在于：定义<li>样式时的"FLOAT:left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。

Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。
分享到：
| WEB2.0标准教程：第十天 自适应高度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    零基础学ASP.NET 2.0电子书&源代码绝对完整版1

    第11章（\Chapter 11） 示例描述：本章学习网站导航。 11-01.aspx 使用页面导航。 Default.aspx 实现导航路径。 Resume.aspx 实现导航路径。 11-02.aspx 实现导航菜单。 第12章（\Chapter 12） 示例...

    asp.net知识库

    Web2.0时代，RSS你会用了吗？(技术实现总结) 知识集锦：三分钟全面了解 Blog 和 RSS C#+ASP.NET开发基于Web的RSS阅读器 ASP.NET RSS Toolkit(RSS工具) Serialize Your Deck with Positron [XML Serialization, XSD, ...

    网管教程 从入门到精通软件篇.txt

    网管教程 从入门到精通软件篇 ★一。★详细的xp修复控制台命令和用法!!! 放入xp（2000）的光盘，安装时候选R，修复！ Windows XP（包括 Windows 2000）的控制台命令是在系统出现一些意外情况下的一种非常有效的...

    零基础学ASP.NET 2.0&源代码绝对完整版1

    第11章（\Chapter 11） 示例描述：本章学习网站导航。 11-01.aspx 使用页面导航。 Default.aspx 实现导航路径。 Resume.aspx 实现导航路径。 11-02.aspx 实现导航菜单。 第12章（\Chapter 12） 示例描述：本章...

    《CSS全程指南》随书光盘

    1.5 用Web2.0标准改善现有网站 16 1.5.1 初级改善 16 1.5.2 中级改善 17 1.6 小结 19 第2章 CSS基础 20 2.1 CSS概述 21 2.1.1 CSS介绍 21 2.1.2 CSS的优点 22 2.2 调用样式表 23 2.2.1 内嵌样式 23 2.2.2 内部样式表...

    软件界面设计工具_3款合集

    Balsamiq Mockups是一款免费的带有手绘风格的原型设计软件，可以帮助你设计桌面应用软件，Web 2.0 站点, RIA富网络应用程序, Web站点和Web应用软件。 功能和亮点： 操作方面：拖拽，控件分组，甚至元素之间的对齐...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    第11章（/C11/） 11.1.htm 采用标准的DOM方法创建一个表格并将其插入到页面中 11.2.htm 添加单元格 11.3.htm 删除表格的第一行和第一列 11.4.htm 实现单元格行顺序的改变 dynamicTable ...

    div+css有实例,易学易懂

    div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...

    XML高级编程pdf

    第11章 服务器到服务器 11.1 XML的传送 11.1.1 基于FTP的XML传送 11.1.2 XML和消息队列 11.1.3 基于HTTP的XML 11.1.4 基于SMTP的XML 11.2 作为一种分布式组件模式的XML 11.2.1 消息传送和串行化 11.2.2 紧...

    JAVA上百实例源码以及开源项目

    　当用户发送第一次请求的时候，验证用户登录，创建一个该qq号和服务器端保持通讯连接得线程，启动该通讯线程，通讯完毕，关闭Scoket。 　QQ客户端登录界面，中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...

    JAVA上百实例源码以及开源项目源代码

    　当用户发送第一次请求的时候，验证用户登录，创建一个该qq号和服务器端保持通讯连接得线程，启动该通讯线程，通讯完毕，关闭Scoket。 　QQ客户端登录界面，中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...

    vfp6.0系统免费下载

    Microsoft Visual FoxPro web 站点上有一份优秀的策略背景论文，它比较了 Visual FoxPro、Visual Basic、SQL Server 和 Access 等 Microsoft 产品之间的不同。 问题 1-7: 哪里可以找到 Visual FoxPro 的使用示例？ ...

    java开源包11

    JOpenID是一个轻量级的OpenID 2.0 Java客户端，仅50KB+（含源代码），允许任何Web网站通过OpenID支持用户直接登录而无需注册，例如Google Account或Yahoo Account。 JActor的文件持久化组件 JFile JFile 是 JActor ...

    XML高级编程 (Extensible Markup Language)

    第11章 服务器到服务器 11.1 XML的传送 11.1.1 基于FTP的XML传送 11.1.2 XML和消息队列 11.1.3 基于HTTP的XML 11.1.4 基于SMTP的XML 11.2 作为一种分布式组件模式的XML 11.2.1 消息传送和串行化 11.2.2 紧...

    XML 高级编程（高清版）

    第11章 服务器到服务器 11.1 XML的传送 11.1.1 基于FTP的XML传送 11.1.2 XML和消息队列 11.1.3 基于HTTP的XML 11.1.4 基于SMTP的XML 11.2 作为一种分布式组件模式的XML 11.2.1 消息传送和串行化 11.2.2 紧...

    java开源包1

    JOpenID是一个轻量级的OpenID 2.0 Java客户端，仅50KB+（含源代码），允许任何Web网站通过OpenID支持用户直接登录而无需注册，例如Google Account或Yahoo Account。 JActor的文件持久化组件 JFile JFile 是 JActor ...

Magicbox
Global site tag (gtag.js) - Google Analytics