通过代码可以看到,设定了表格的宽高,并把边框边距设为0以便于隐藏表格线,然后让第个单元格的文本对齐方式为居中,就实现了简单导航,这里的要点在于设计了一个与导航形式类似的数据表,将导航交往每一格数据中。再来看一下如何用css来设计同样的导航系统。 DIV+CSS布局的核心是实现了表现和内容的分离,先来认识一下内容部分的代码编写方式: 程序代码---[WWW.AA25.CN]
这段代码使用了一个新的元素ul,在导航之前,先简要了解一下ul元素。ul是css而已中使用得很广泛的一种元素主要用来描述列表型内容,每一个
表示其中的内容为一个列表块,块中的每一条列表数据用
来描述,可以看一下不加任何样式的ul的实现显示效果。 如图所示,作为一种列表型内容,ul默认样式就中上了圆点状序号,而且默认为从上至下排列。为什么我们的导航系统要使用ul元素?实际上导航也是种列表,可以理解为导航列表,每一个列表数据就是导航中的一个导航频道,同样也可以使用二层嵌套的div来实现一个导航的代码结构,但相对于ul列表来说,div显得过于复杂,ul的使用还是应当重点放在块状型区域,而对于简单的只有文字的导航来说,ul就更为轻巧灵活。 在代码中我们也为ul定义了一个id叫nav,接下来为这个ul及其下面的对象编写代码让它实现需要的导航效果。 把第一段样式编写给了ul下的li对象,我们希望列表中的每一个一列表项不再遵行其默认的从上至下的排列,因此给#nav li指定了foat:left;的属性,如同div的foat:left;一样,也是通过浮动定位的原理使得自身向左浮动,从而使下一个对象贴紧该对象的右边,最终所有的li都具有了向左浮动的我,从而形式了横向的排列形式。 导航的关键在于a链接对象的样式控制,在这里使用#nav li a{}给li下的每一个a链接对象编写了样式: display:block是这里的重点,它使得a链接对象的显示方式由一段文本改为一个块状对象,和idv的特性相同,div默认状态下是一个块状对象,a链接对象默认状态下是一个普通文本,这样就没有办法使得a链接对象能够像一个方块状按钮一样去动作,使用display:block之后,a链接对象将能够像div和其它元素一样成为一个块状对象(block),就可以使用css外边距、内边距等属性给a链接标签加上一系列的样式了。 通过display:block的应用,我们让a标签元素有了宽度width:97px,高度height:22px,并在每一个a之间使用margin-left:2px;形式了左侧的外边距为2px。 display属性是css中对对象显示模式操作的一个属性,主要用一专稿 变对象的显示方式,在css中,所有对象都有自己默认的显示方式,如a与span等对象,它们默认为一种午间内联对象,显示时它们不会影响其它任何对象的显示,如当应用span之后,span之后的内容会自动排在span的右边,像一段文本一样,而div这类对象的默认显示为块状冲锋枪,它们默认状态下便占据了一行的空间,并像一个广场一样显示在页面中,通过display:block,将a也变成了块状对象。此外,display还有众多使用方式将在以后逐步了解到。
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
主页
DIV+CSS教程
常用代码
水晶图标
幻灯图片
软件下载
CSS2.0实用手册
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 预览一下效果,已经像个导航的模样了,不过鼠标移上去没有任何响应,这样对于用户体验来说是非常不友好的,因此需要通过一些带有交互反馈的操作来提示用户对象是可以点击的: #nav li a:hover { background-color:#bbbbbb; color:#ffffff;} 这次预览效果,用鼠标移上一个频道,响应出现了,这样我们的导航已经变得友好多了。
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
主页
DIV+CSS教程
常用代码
水晶图标
幻灯图片
软件下载
CSS2.0实用手册
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]初级导航模块完成,不妨对比一下使用表格式布局和css而已在这方面的优劣,你会发现,css的优势是显而易见的。 注:从本节开始不再写出具体详细的制作步骤,如果你对其中的部分不明白,可以在本节留言;对css掌握不熟练的朋友,建议再温习前几节,平时多用dreamweaver做一些实例,慢慢会逐步掌握的。
QQ客服
公众号
手机版
帮助中心