【CSS】 一个简单的导航条

今天来做一个导航条！

---

---

首先写一个坯子：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <script type="text/javascript" src="js/index.js"></script>
         <title>导航条</title>
     </head>

     <body>
         <div id="topBox">
             <ul>
                 <li><a href="#"><font>首页</font><span>Home</span></a></li>
                 <li><a href="#"><font>社区</font><span>SNS</span></a></li>
                 <li><a href="#"><font>知识</font><span>Knowledge</span></a></li>
                 <li><a href="#"><font>关于</font><span>About</span></a></li>
             </ul>
         </div>
     </body>
 </html>

效果：

接下来，我们给几个链接加上边框，除去前面的点和下划线。

 <style>
     #topBox ul li {
         list-style-type: none;　　//除去前面的点
     }
     #topBox ul li a {
         display: block;
         width: 120px;
         height: 60px;
         border: 1px solid;　　　　　//加上边框
         color: black;
         text-decoration: none;    //除去下划线
     }
 </style>

效果：

ps：注意a标签的display:block配置项，由于a标签为行内元素，行内元素只能容纳文本或者其他行内元素，所以如果不将其设置为块级元素，则设置的宽高将不起作用。

---

随后，我们把文字居中，设定文字的尺寸、边框的样式,我们还可以添加一个阴影，就像一个凸出的按钮。

 <style>
     #topBox ul li {
         list-style-type: none;
     }
     #topBox ul li a {
         display: block;
         width: 120px;
         height: 60px;
         border: 1px solid;
         color: black;
         text-decoration: none;
         text-align: center;
         border-radius:15px;
         -moz-border-radius:15px; /* Old Firefox */
         box-shadow: 6px 6px 3px #888888;
     }
     #topBox ul li a font {
         font-size: 20px;
         padding-top: 7px;
         display: block;
     }
     #topBox ul li a span {
         font-size: 15px;
         display: block;
     }
 </style>

效果：

我们看到这样还是竖排的，我们将其向左浮动：

 #topBox ul li {
     list-style-type: none;
     float: left;
 }

效果：

---

这里，我们先看看这个导航条在整个界面的方位：

其中的红线为界面中线。

我们发现，导航条靠左，而我们要求的是居中。

这里我们需要用到前面说过的绝对定位和相对定位的知识。

我们分两步走：

第一步：首先把ul块设置为绝对定位，将以窗口左线为基准，向右偏移50%的距离。

 #topBox ul {
     float: left;
     position: absolute;
     left: 50%;
 }

ps：在这里，我们先把整个ul块向左浮动，再设置绝对定位并向右偏移50%，此时他会以窗口为基准，相对偏移了窗口50%的宽度。

　　其实这里也可以设置为相对定位，因为上面没有设置id="topBox"的宽度，所以他默认为窗口宽度，这样就和窗口就没区别了，不过如果设置了div的宽度，相对定位就会以其父元素即div设置的宽度计算，这样就达不到效果了。

效果：

第二步：我们将以ul块为父元素，即包含快元素，将其下的li块为偏移块元素，设置为相对定位，并将li向左偏移相对于ul块元素50%宽度的距离。

 #topBox ul li {
     position: relative;
     right: 50%;
     float: left;
     list-style-type: none;
 }

效果：

按理说应该没问题了，不过怎么还有点偏呢？

多方找原因后才发现，这是浏览器默认给元素添加了一定宽度的内边距和外边距的缘故，只要我们人为的设置去除各元素的内外边距，应该就没问题了。

 * {
     padding:0;
     margin:0;
 }

*是通配符，这代码表示将所有元素的内外边距均设置为0;

效果：

这样看起来就没问题了！

---

我们回到导航条本体上来。

基于以上配置，基本上一个导航条就没有问题了，接下来就是如何做得更美观。添加背景，调整间距，一步一步慢慢实现。

 <style>
     * {
         margin: 0px;
         padding: 0px;
     }
     #topBox {
         padding-top: 30px;
         height: 70px;
     }
     #topBox ul{
         padding-top: 10px;
         float: left;
         position: relative;
         left: 50%;
     }
     #topBox ul li{
         position: relative;
         right: 50%;
         float: left;
         list-style-type: none;
     }
     #topBox ul li a {
         display: block;
         width: 120px;
         height: 60px;
         border: 1px solid;
         margin: 0 10px 0 10px;
         color: black;
         text-decoration: none;
         text-align: center;
     　　border-radius:15px;
     　　-moz-border-radius:15px; /* Old Firefox */
     　　box-shadow: 6px 6px 3px #888888;
     }
     #topBox ul li a font {
     　　font-size: 20px;
     　　padding-top: 7px;
     　　display: block;
     }
     #topBox ul li a span {
     　　font-size: 18px;
           margin-top: 2px;
     　　display: block;
     }
 </style>

效果：

我们还可以给他添加一个鼠标悬停的效果：

 #topBox ul li a:hover {
     color: red;
     border: none;
 }

效果：

附上完整代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <script type="text/javascript" src="js/index.js"></script>
         <title>导航条</title>
         <style>
             * {
                 margin: 0px;
                 padding: 0px;
             }
             #topBox {
                 padding-top: 30px;
                 height: 70px;
             }
             #topBox ul{
                 padding-top: 10px;
                 float: left;
                 position: relative;
                 left: 50%;
             }
             #topBox ul li{
                 position: relative;
                 right: 50%;
                 float: left;
                 list-style-type: none;
             }
             #topBox ul li a {
                 display: block;
                 width: 120px;
                 height: 60px;
                 border: 1px solid;
                 margin: 0 10px 0 10px;
                 color: black;
                 text-decoration: none;
                 text-align: center;
                 border-radius:15px;
                 -moz-border-radius:15px; /* Old Firefox */
                 box-shadow: 6px 6px 3px #888888;
             }
             #topBox ul li a font {
                 font-size: 20px;
                 padding-top: 12px;
                 display: block;
             }
             #topBox ul li a span {
                 font-size: 18px;
                 margin-top: 2px;
                 display: block;
             }
             #topBox ul li a:hover {
                 color: red;
                 border: none;
             }
         </style>
     </head>

     <body>
         <div id="topBox">
             <ul>
                 <li><a href="#"><font>首页</font><span>Home</span></a></li>
                 <li><a href="#"><font>社区</font><span>SNS</span></a></li>
                 <li><a href="#"><font>知识</font><span>Knowledge</span></a></li>
                 <li><a href="#"><font>关于</font><span>About</span></a></li>
             </ul>
         </div>
     </body>
 </html>

---

---

我们还可以给各个元素添加背景、字体样式、大小、特效等等，最后结果如何，就看个人的审美了。