横向导航学习

最新推荐文章于 2024-04-10 09:09:26 发布

forgetrebecca

最新推荐文章于 2024-04-10 09:09:26 发布

阅读量230

点赞数

分类专栏： HTML和CSS 文章标签： CSS HTML XHTML Blog 数据结构

HTML和CSS 专栏收录该内容

15 篇文章

订阅专栏

（一）今天学习了一下横向导航设计，利用 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>

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