横引导航学习

2012-11-25

横向导航学习（一）今天学习了一下横向导航设计，利用 CSS 布局实现导航与 table 布局有很大区别 ^^ （二）传统

横向导航学习

（一）今天学习了一下横向导航设计，利用 CSS 布局实现导航与 table 布局有很大区别 ^^

（二）传统的表格式导航制作如下代码，利用 table

简单实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head><title>table方式实现tab</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></head><body><table width=”800”  height=”24” border=”0 ”  cellpadding=”0”  cellspacing=”0”  bgcolor=”#FFFFFF”> <tr  align=”center”>     <td  bgcolor=“#ececec”><a href=“#”>首 页</a></td>     <td  bgcolor=“#ececec”><a href=“#”>新 闻</a></td>     <td  bgcolor=“#ececec”><a href=“#”>参 考</a></td>     <td  bgcolor=“#ececec”><a href=“#”>Blog </a></td>     <td  bgcolor=“#ececec”><a href=“#”>论 坛</a></td>     <td  bgcolor=“#ececec”><a href=“#”>其 它</a></td></tr></table></body></html>

?效果图如下：
横引导航学习 ?

注意：把边框和边距都设为 0 ，隐藏表格线；设定每个单元格中的文本居中对齐。这样就实现了一个简单的横向导航。（ table 方法的要点是：先设计导航数据表，再将导航内容装入每个单元格中。）

（三）利用 CSS 来设计它。 CSS 就是为了实现表现与内容的分离。

在 html 文件中编写如下代码（上下省略）：

<div id=”nav”><ul ><li><a href=”#” id="current">首 页</a></li><li><a href=”#”>新 闻</a></li><li><a href=”#”>参 考</a></li><li><a href=”#”>Blog</a></li><li><a href=”#”>论 坛</a></li><li><a href=”#”>其 它</a></li></ul>  </nav>

在 CSS 文件中代码如下（为了方便测验， CSS 代码放到 html 的 head 中即可，详情如下）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><html><head><title>CSS方式实现tab</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style type="text/css"><!--#nav li {   float:left;   display:inline;   }#nav li a{   color:#000000;   text-decoration:none;   paddding-top:4px;   display:block;//使a 变为块状对象，下面就可以对它设定高宽等   width:97px;   height:22px;   text-align:center;   background-color:#ececec;   margin-left:2px;}#nav li a:hover{   background-color:#bbbbbb;//鼠标移到频道上出现响应   color:#ffffff;}#nav li a #current{   background-color:#2788da;   color:#ffffff;}#nav{      height:26px;   border-bottom:2px solid  #2788da;}--></style></head><body><div id="nav"><ul><li><a href=”#” id="current">首 页</a></li><li><a href=”#”>新 闻</a></li><li><a href=”#”>参 考</a></li><li><a href=”#”>Blog</a></li><li><a href=”#”>论 坛</a></li><li><a href=”#”>其 它</a></li></ul></div></body></html>

?效果图如下，当鼠标放到导航上时，背景色会变色发生响应。

横引导航学习

( 四 ) 相比较 table 和 css 的实现， CSS 优势十分明显，代码简洁灵魂，可重用，利于维护。

( 五 ) 调整 CSS 代码结合 PS 做背景图片，最终设计的横向导航如下：

横引导航学习

（六）导航还有很多设计类型，常见的纵向导航，还有像javaeye网站的二层复合式导航结构，还有下拉菜单式/弹出式导航，如果有机会，都要亲自一一实现去学习。

加油

热点排行

Web前端

横引导航学习