CSS网页布局入门教程9用CSS设计网站导航横向导航.docVIP

CSS网页布局入门教程9：用CSS设计网站导航——横向导航 　网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等三种形式。　　横向导航　作为门户网站的设计而言，主导航一般采用横向导航。由于门户网站下方文字较多，且每个频道均有一同的样式区分，因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择，国内大部分门户均采用这种形式。　　纵向导航　目前在门户网站的设计中已经不再流行，纵向导航更倾向于表达产品分类。　　下拉导航　主要用于功能复杂的网站。在有些网站上也常见的。　　总的来说导航的核心目标是设计一个简便快捷的操作入口，帮助用户快速到达网站中的相应内容，设计上应当根据网站类型及内容的需求设计合理的导航形式。这里我们将使用css对常用的三种导航形式进行设计，看看css是如何实现这些样式的。　　横向导航　　使用 HYPERLINK /layout/ \o css布局 \t _blank css布局的形式制作导航与table布局有很大的区别，网站除了 HYPERLINK /layout/ \o 页面布局 \t _blank 页面布局之外，最重要的就是导航部分，在这一步应该先制作出一个简单明快的导航系统，然后一步一步的完成具有设计效果的最终导航。在这里我们先构想出了顶部的初级设计样式，导航为一种横向导航形式。在开始css的导航制作之前，先让我们回想一下传统的表格式布局的导航制作。如果表格式布局实现如图所示的导航形式，需要设计一个表格table。导航目前共有7个栏目组成，需要设计一个1行7列的表格，并在每一个单元td/td标签中插入导航文字，然后　让每个单元格的文本居中,可以看一下实现代码： table width=100% border=0 cellpadding=0 cellspacing=0??tr????td align=centera href=http://:/index.asp主页/a/td????td align=centera href=http://:/Sort/List_4.htmlDIV+CSS教程/a/td????td align=centera href=http://:/Sort/List_5.html常用代码/a/td????td align=centera href=http://:/Sort/List_6.html水晶图标/a/td????td align=centera href=http://:/Sort/List_7.html幻灯图片/a/td????td align=centera href=http://:/Sort/List_10.html软件下载/a/td????td align=centera href=http://:/css2/CSS2.0实用手册/a/td??/tr/table/body 　　通过代码可以看到，设定了表格的宽高，并把边框边距设为0以便于隐藏表格线，然后让第个单元格的文本对齐方式为居中，就实现了简单导航，这里的要点在于设计了一个与导航形式类似的数据表，将导航装入每一格数据中。再来看一下如何用css来设计同样的导航系统。　　DIV+ HYPERLINK /layout/ \o css布局 \t _blank css布局的核心是实现了表现和内容的分离，先来认识一下内容部分的代码编写方式： ?ul id=nav????lia href=http://:/index.asp主页/a/li????lia href=http://:/Sort/List_4.htmlDIV+CSS教程/a/li????lia href=http://:/Sort/List_5.html常用代码/a/li????lia href=http://:/Sort/List_6.html水晶图标/a/li????lia href=http://:/Sort/List_7.html幻灯图片/a/li????lia href=http://:/Sort/List_10.html软件下载/a/li????lia href=http://:/css2/CSS2.0实用手册/a/li??/ul 　　这段代码使用了一个新的元素ul，在导航之前，先简要了解一下ul元素。ul是css而已中使用得很广泛的一种元素主要用来描述列表型内容，每一个ul/ul表示其中的内容为一个列表块，块中的每一条列表数据用li/li来描述，可以看一下不加任何样式的ul的实现显示效果。 　　如图所示，作为一种列表型内容，ul默认样式就加上了圆点状序号，而且默认为从上至下排