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要修改菜单样式就很简单了。
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 一、简介flask中session组件可分为内置的session组件还有第三方flask-session组件,内置的session组件功能单
- 看过一篇关于下载网页中图片的文章,它只能下载以http头的图片,我做了些改进,可以下载网页中的所有连接资源,并按照网页中的目录结构建立本地目
- //TransmitFile实现下载protected void Button1_Click(object sender, EventArg
- 众所周知,Python 支持多种编程范式:过程式(使用基础的语句)、面向对象编程和函数式编程。Python 也提供了其他函数式编程语言的工具
- 如果你想把Python嵌入C/C++中是比较简单的事情,你需要的是在VC中添加Python的include文件目录和lib文件目录。下面我们
- --******************************************************* --* 清空所有表中的数
- 环境Sqlserver 2016 .net 4.5.2 目前测试数据1300万 大约3-4分钟.(限制一次读取条数 和
- 什么是RC4算法呢?也许您还不知道,没关系我为您找了下相关资料方便大家查看;RC4加密算法 RC4加密算法是大名鼎鼎的RSA三人组
- 目录1. format格式化_填充符号使用1.1 format格式化1.2 format的填充符号的使用2. 字符串相关的方法3. 列表的相
- 1. 查看数据库的版本select @@version2.查看数据库所在机器操作系统参数exec master..xp_msver3. 查看
- 如下所示:from numpy import *import numpy as npimport matplotlib.pyplot as
- 只是做笔记,没什么!! --创建测试表 CREATE TABLE [dbo].[Student]( [ID] [int] IDENTITY(
- Python 中方法的缺省参数问题在Python中可以缺省给方法制定缺省值,但是这个缺省值在某些情况下确是和我们预期不太一致的&he
- 作用:用ASP程序将页面中的电话号码生成图片格式。以下是引用片段:<% Call Com_CreatValidCode(Request
- IDA Pro 6.0使用Qt 框架实现了跨平台的UI。它的好处是插件编写者还可以直接使用 Qt 开发跨平台 UI。但是编剧呢?在这篇博文中
- 本文实例讲述了Go语言中嵌入C语言的方法。分享给大家供大家参考。具体分析如下:Go语言官方带了一个工具叫cgo,可以很方便的在Go语言代码中
- 如下所示:beta分布的最大特点是其多样性, 从下图可以看出, beta分布具有各种形态, 有U形, 类似正态分布的形状, 类似unifor
- 概念MySQL5.0版本开始支持存储过程,存储过程就是一组SQL语句集,功能强大,可以实现一些比较复杂的逻辑功能,类似于JAVA语言中的方法
- openpyxl是一个读写Excel文档的Python库,能够同时读取和修改Excel文档。openpyxl是一个开源项目,因此在使用之前需
- (PS:本文假设你已经在本地联调好django和客户端,只是需要将django部署到外网)购买阿里云服务器到[阿里云官网],选择轻量应用服务