水平导航条的制作

原文发表于我自己的服务器www.jjxiaoliu.cn；不过这个服务器我可能不打算续费了，所以搬到cnblogs来。

导航条（导航菜单）基本上就是带链接的列表，所以<ul>列表标签无疑是个自然的选择；然而这并不是必须的——事实上在整个制作过程中几乎没有使用到列表标签的特性。所以我们的例子完全不使用列表标签。

首先，水平导航条总是占据一整行，所以我们用<div>包围之；其次，我们用包围每个菜单项；最后，每个菜单项都是一个<a>。注意这里的其实是可以不用的；我们使用仅仅是为了语法上看起来更自然一点（将作为<a>的容器，类似于用<li>作为<a>的容器）。、

首先是菜单内容：

<div class="menu">
    <span class="item"><a href="#">File</a></span><!-- 
 --><span class="item"><a href="#">Edit</a></span><!-- 
 --><span class="item"><a href="#">View</a></span><!-- 
 --><span class="item"><a href="#">Help</a></span>
</div>

注意这里我们在相邻菜单项之间都使用了HTML注释，以使得浏览器认为所有菜单项文字（标签）之间没有空格和换行，避免浏览器在相邻菜单项之间插入额外空格，造成菜单项的换行。

接着我们设计相关的CSS。首先是整个菜单条：

.menu {
    /* 指定最小宽度，
       避免当缩小浏览器窗口时菜单项之间发生重叠 . */
    min-width: 400px;
    /* 导航栏占据整个浏览器窗口宽度 */
    width: 100%;
    /* 居中显示 */
    margin: 0 auto;
}

如果是用html列表标签制作，我们这里还要指定<li>的display属性为inline，以使得所有列表项显示在同一行，但对于span来说就不必了。接下来设定<a>标签的style。注意这里不是设置span标签的style；因为这里span标签只是个容器，真正响应用户鼠标或键盘事件的是a标签。

.menu .item a {
    font-size:24px;
    /* 我们希望能设定链接的padding等属性，
       以便将菜单项显示为一个“块”，
       因此设置显示方式为inline-block */
    display: inline-block;
    padding:4px 4px 4px 4px;
    /* 后面我们需要设置每个菜单项的显示宽度占比，
       因此设置box-sizing为border-box。 */
    box-sizing: border-box;
    /* 有4个菜单项，因此每个项宽度为25%（包含padding）。 */
    /* 如果我们上面没有设置box-sizing，
       这里加上padding后总宽度就会超过100% */
    width: 25%;
    text-align: center;
    text-decoration: none;
    background-color: #FF0000;
    color: #000000;
}

核心的东西就上面这么多了。剩下的就是修改链接样式的常规工作了。

水平导航条的制作

猜你喜欢