Home思洋影视事业部网站建设知识库
0 Comments

技术分享 如何实现CSS横向导航(1)

发布于：2013-07-13  |   作者：广州网站建设  |   已聚集：人围观

本文向大家介绍一下CSS横向导航的实现方法，首先让我们来看一下网站导航的概念，网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等三种形式。

CSS设计网站导航——CSS横向导航

网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等三种形式。

◆横向导航　作为门户网站的设计而言，主导航一般采用横向导航。由于门户网站下方文字较多，且每个频道均有一同的样式区分，因此在顶部固定一个区域设计统一风格且不占用过多空间的导航是最理想的选择，国内大部分门户均采用这种形式。

◆纵向导航　目前在门户网站的设计中已经不再流行，纵向导航更倾向于表达产品分类。

◆下拉导航　主要用于功能复杂的网站。在有些网站上也常见的。

总的来说导航的核心目标是设计一个简便快捷的操作入口，帮助用户快速到达网站中的相应内容，设计上应当根据网站类型及内容的需求设计合理的导航形式。这里我们将使用css对常用的三种导航形式进行设计，看看css是如何实现这些样式的。

CSS横向导航

使用css布局的形式制作导航与table布局有很大的区别，网站除了页面布局之外，最重要的就是导航部分，在这一步应该先制作出一个简单明快的导航系统，然后一步一步的完成具有设计效果的最终导航。在这里我们先构想出了顶部的初级设计样式，导航为一种横向导航形式。在开始css的导航制作之前，先让我们回想一下传统的表格式布局的导航制作。如果表格式布局实现如图所示的导航形式，需要设计一个表格table。导航目前共有7个栏目组成，需要设计一个1行7列的表格，并在每一个单元<td></td>标签中插入导航文字，然后　让每个单元格的文本居中,可以看一下实现代码：



    
	
  1. 
		<tablewidthtablewidth="100%"border="0"cellpadding="0"cellspacing="0"> 
    2. 
	
  2. 
		<tr> 
    3. 
	
  3. 
		<tdaligntdalign="center">
    4. 
	
  4. 
		<ahrefahref="http://:www.aa25.cn/index.asp">主页</a></td> 
    5. 
	
  5. 
		<tdaligntdalign="center"> 
    6. 
	
  6. 
		<ahrefahref="http://:www.aa25.cn/Sort/List_4.html">DIV+CSS教程</a></td> 
    7. 
	
  7. 
		<tdaligntdalign="center"> 
    8. 
	
  8. 
		<ahrefahref="http://:www.aa25.cn/Sort/List_5.html">常用代码</a></td> 
    9. 
	
  9. 
		<tdaligntdalign="center"> 
    10. 
	
  10. 
		<ahrefahref="http://:www.aa25.cn/Sort/List_6.html">水晶图标</a></td> 
    11. 
	
  11. 
		<tdaligntdalign="center"> 
    12. 
	
  12. 
		<ahrefahref="http://:www.aa25.cn/Sort/List_7.html">幻灯图片</a></td> 
    13. 
	
  13. 
		<tdaligntdalign="center"> 
    14. 
	
  14. 
		<ahrefahref="http://:www.aa25.cn/Sort/List_10.html">软件下载</a></td> 
    15. 
	
  15. 
		<tdaligntdalign="center"> 
    16. 
	
  16. 
		<ahrefahref="http://:www.aa25.cn/css2/">CSS2.0实用手册</a></td> 
    17. 
	
  17. 
		</tr> 
    18. 
	
  18. 
		</table> 
    19. 
	
  19. 
		</body> 
    20. 
	
  20. 
		 
    21. 




	通过代码可以看到，设定了表格的宽高，并把边框边距设为0以便于隐藏表格线，然后让第个单元格的文本对齐方式为居中，就实现了简单导航，这里的要点在于设计了一个与导航形式类似的数据表，将导航装入每一格数据中。



	◆再来看一下如何设计CSS横向导航系统。



	DIV+CSS布局的核心是实现了表现和内容的分离，先来认识一下内容部分的代码编写方式：




    
	
  1. 
		<ulidulid="nav"> 
    2. 
	
  2. 
		<li><ahrefahref="http://:www.aa25.cn/">主页</a></li> 
    3. 
	
  3. 
		<li><ahrefahref="http://:www.aa25.cn/">DIV+CSS教程</a></li> 
    4. 
	
  4. 
		<li><ahrefahref="http://:www.aa25.cn">常用代码</a></li> 
    5. 
	
  5. 
		<li><ahrefahref="http://:www.aa25.cn/">水晶图标</a></li> 
    6. 
	
  6. 
		<li><ahrefahref="http://:www.aa25.cn/">幻灯图片</a></li> 
    7. 
	
  7. 
		<li><ahrefahref="http://:www.aa25.cn/">软件下载</a></li> 
    8. 
	
  8. 
		<li><ahrefahref="http://:www.aa25.cn/css2/">CSS2.0实用手册</a></li> 
    9. 
	
  9. 
		</ul> 
    10. 
	
  10. 
		 
    11. 




	这段代码使用了一个新的元素ul，在导航之前，先简要了解一下ul元素。ul是css而已中使用得很广泛的一种元素主要用来描述列表型内容，每一个<ul></ul>表示其中的内容为一个列表块，块中的每一条列表数据用<li></li>来描述，可以看一下不加任何样式的ul的实现显示效果。

	广州网站建设,网站建设,广州网页设计,广州网站设计



	不加任何样式的ul效果



	如图所示，作为一种列表型内容，ul默认样式就加上了圆点状序号，而且默认为从上至下排列。为什么我们的导航系统要使用ul元素？实际上导航也是种列表，可以理解为导航列表，每一个列表数据就是导航中的一个导航频道，同样也可以使用二层嵌套的div来实现一个导航的代码结构，但相对于ul列表来说，div显得过于复杂，ul的使用还是应当重点放在块状型区域，而对于简单的只有文字的导航来说，ul就更为轻巧灵活。


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机