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

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

白沙黎族网站建设公司创新互联建站,白沙黎族网站设计制作，有大型网站制作公司丰富经验。已为白沙黎族近1000家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的白沙黎族做网站的公司定做！

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

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

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

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

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

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

CSS横向导航

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
    4.   
  
  
  
  4. 主页 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. DIV+CSS教程 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. 常用代码 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. 水晶图标 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. 幻灯图片 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. 软件下载 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16. CSS2.0实用手册 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.  
    21.

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

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

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

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  3. 主页
    4.    
  
  
  
  5. DIV+CSS教程
    6.    
  
  
  
  7. 常用代码
    8.    
  
  
  
  9. 水晶图标
    10.    
  
  
  
  11. 幻灯图片
    12.    
  
  
  
  13. 软件下载
    14.    
  
  
  
  15. CSS2.0实用手册
    16.    
  
  
  
  16.  
    17.   
  
  
  
  17.  
    18.

这段代码使用了一个新的元素ul，在导航之前，先简要了解一下ul元素。ul是css而已中使用得很广泛的一种元素主要用来描述列表型内容，每一个

    表示其中的内容为一个列表块，块中的每一条列表数据用
  • 来描述，可以看一下不加任何样式的ul的实现显示效果。

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

    ◆在代码中我们也为ul定义了一个id叫nav，接下来为这个ul及其下面的对象编写代码让它实现需要的导航效果。

    把第一段样式编写给了ul下的li对象，我们希望列表中的每一个一列表项不再遵行其默认的从上至下的排列，因此给#navli指定了float:left;的属性，如同div的float:left;一样，也是通过浮动定位的原理使得自身向左浮动，从而使下一个对象贴紧该对象的右边，最终所有的li都具有了向左浮动的特性，从而形式了横向的排列形式。

    CSS横向导航的关键在于a链接对象的样式控制，在这里使用#navlia{}给li下的每一个a链接对象编写了样式：

    display:block是这里的重点，它使得a链接对象的显示方式由一段文本改为一个块状对象，和div的特性相同，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还有众多使用方式将在以后逐步了解到。

     
 
 
 
        
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    6. 主页
      7.    
  
  
  
    8. DIV+CSS教程
      9.    
  
  
  
    10. 常用代码
      11.    
  
  
  
    12. 水晶图标
      13.    
  
  
  
    14. 幻灯图片
      15.    
  
  
  
    16. 软件下载
      17.    
  
  
  
    18. CSS2.0实用手册
      19.    
  
  
  
    19.  
      20.   
  
  
  
    20.  
      21.

    预览一下效果，已经像个CSS横向导航的模样了，不过鼠标移上去没有任何响应，这样对于用户体验来说是非常不友好的，因此需要通过一些带有交互响应的操作来提示用户对象是可以点击的：

     
 
 
 
        
  
  
  
    1. #navlia:hover{background-color:#bbbbbb;color:#ffffff;}  
      2.   
  
  
  
    2.  
      3.

    这次预览效果，用鼠标移上一个频道，响应出现了，这样我们的导航已经变得友好多了。

     
 
 
 
        
  
  
  
    1.   
  
  
  
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8.  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    11. 主页
      12.    
  
  
  
    13. DIV+CSS教程
      14.    
  
  
  
    15. 常用代码
      16.    
  
  
  
    17. 水晶图标
      18.    
  
  
  
    19. 幻灯图片
      20.    
  
  
  
    21. 软件下载
      22.    
  
  
  
    23. CSS2.0实用手册
      24.    
  
  
  
    24.  
      25.   
  
  
  
    25.  
      26.   
  
  
  
    26.  
      27.   
  
  
  
    27.  
      28.

     注：许多朋友不知道怎么居中，所以特意改成居中的形式，初级导航模块完成，不妨对比一下使用表格式布局和css而已在这方面的优劣，你会发现，css的优势是显而易见的。

    【编辑推荐】

    1. 编码过程中灵活使用CSS注释
    2. CSS布局浮动(float)和定位(position)属性的区别
    3. 设置CSS表格与CSS表单的样式
    4. 深入剖析CSS排版思想及其用法
    5. 鼠标经过时改变DIV背景颜色的三种途径

    文章题目：技术分享 如何实现CSS横向导航
    本文地址：http://www.shufengxianlan.com/qtweb/news24/481874.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    搜索引擎优化知识

    行业网站建设

    成都小程序开发　　 　广汉锦华橡塑　　 　禾巨建站　　 　响应式网站建设公司　　 　软文平台　　 　成都定制网站建设　　 　四川黔盛装饰　　 　成都做网站　　 　云主机　　 　红光高低压开关厂　　 　成都标志设计　　 　晟和广告　　 　模板商城网站　　 　关键词优化　　 　网站维护　　 　网站设计制作　　 　微信服务号订阅号开发　　 　成都网站设计　　 　宜宾网站设计　　 　注册域名