ZOL首页产品报价论坛软件下载问答堂>>中关村在线手机版更多

今日导读
热点推荐
ZOL首页 > 商业软件 > 微软产品专区 > 开发软件 > 实践开发：最完美HTML导航条！

实践开发：最完美HTML导航条！


【转载】 CBSi中国·ZOL 10年08月27日 [评论]



　　导航条承载着网站的导航和分流作用，它是每个网站不可缺少的元素，导航条设计得优美能给浏览者留下深刻的印象，很多Web设计人员应该都研究过不少导航条设计方法，但很难找到一种完美的设计方法。我们首先从一个典型的HTML结构说起，下图展示了一个常见的导航条。


常见导航条示意图
图 1 常见导航条示意图

　　要实现上图所示的导航条，其HTML代码其实十分简单，除了一个<div>层，以及它包含的无序列表元素（ul和li）外就没有其它东西了。此外，你可能已经知道，HTML 5引入了一个新的元素 - <nav>标签，它表示一个导航条，使用<nav>可以代替更复杂的<div>标签，但从下面的代码你就知道，其实HTML 5并没有改变导航条的基础结构。

　　图1所示导航条对应的HTML 4代码示例：

  1. <div id="nav"> 
  2. <ul> 
  3. <li><a href="/index">Home</a></li> 
  4. <li><a href="/link1">Link 1</a></li> 
  5. <li><a href="/link2">Link 2</a></li> 
  6. <ul> 
  7. </div> 

　　图1所示导航条对应的HTML 5代码示例：

  1. <nav> 
  2. <ul> 
  3. <li><a href="/index">Home</a></li> 
  4. <li><a href="/link1">Link 1</a></li> 
  5. <li><a href="/link2">Link 2</a></li> 
  6. <ul> 
  7. </nav> 

　　无论是使用HTML 4还是使用HTML 5，使用无序列表元素组织导航条总是一个很好的方法，特别是当你在主菜单和子菜单之间实现了比较复杂的交互时更是如此。此外，这种方法允许你通过CSS对导航条的不同元素实现更多控制，从而简化自定义操作。

带有子菜单的导航条
图 2 带有子菜单的导航条

　　下面是带有子菜单导航条的HTML代码结构示例：

  1. <div id="nav"> <!-- nav container --> 
  2. <ul> 
  3. <li><a href="/link1">Link 1</a> <!-- main item --> 
  4. <ul> <!-- item submenu --> 
  5. <li><a href="/s-link1">Sub Link 1</a></li> 
  6. <li><a href="/s-link2">Sub Link 2</a></li> 
  7. </ul> <!-- close submenu --> 
  8. </li> 
  9. <ul> 
  10. </div> 

123下一页>
提示：试试键盘 “← →” 可以实现快速翻页
本文导航
分享到：
新浪微博 白社会 开心网
软件论坛热门帖子
软件资讯
视觉焦点
1分钟打印60页 解读史上最快的打印机
1分钟打印60页 解读史上最快的打印机
离婚女人 鼓浪屿奇幻之旅
离婚女人 鼓浪屿奇幻之旅
100万凭啥买它？解密工程投影天价之谜
100万凭啥买它？解密工程投影天价之谜
AV女优苍井空现身国内车展
AV女优苍井空现身国内车展
热词：iPhone5  联想Z470  iphone4 白色  三星i9000  iPod  联想终结者B  魅族m9  XOOM  oppo手机  驱动精灵  
下载周排行
更多


软件频道

软件教程
技巧应用
软件论坛