今天来做一个导航条！

首先写一个坯子：

 <!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>

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

【CSS】 一个简单的导航条的更多相关文章

  1. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  2. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  3. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Html+css 一个简单的网页模板

    一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&q ...

  5. jq+css+html简单实现导航下拉菜单

    相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...

  6. Python——一个简单的进度条的实现

    import math def process_bar(total_work,work_index,length): times = total_work / length # 长度倍数,用来缩放或扩 ...

  7. Linux中实现一个简单的进度条【转】

    转自:http://blog.csdn.net/yuehailin/article/details/53999288 说起进度条,其实大家常常见到,比如说你在下载视频或文件的时候,提示你当前下载进度的 ...

  8. css实现京东顶部导航条

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  9. css制作简单的导航栏

    //css代码 #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: ...

随机推荐

  1. 【微服务架构】SpringCloud之Hystrix断路器(六)

    一:什么是Hystrix 在分布式环境中,许多服务依赖项中的一些将不可避免地失败.Hystrix是一个库,通过添加延迟容差和容错逻辑来帮助您控制这些分布式服务之间的交互.Hystrix通过隔离服务之间 ...

  2. 洛谷 4051 [JSOI2007]字符加密（后缀数组）

    题目描述 喜欢钻研问题的JS 同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法:把需要加密的信息排成一圈,显然,它们有很多种不同的读法. 例如‘JSOI07’,可以读作 ...

  3. delphi 中封装的VCl窗体Tab键响应问题

    在DLL中的子窗体不会响应Tab按键的,这个时候就需要手动去指定Tab键的操作,但是前提是主窗体要向这个窗体发送一个消息,一个Tab键按下的消息.基本顺序是这样的: 1. 主窗体用Hook技术捕获Ta ...

  4. Android-bindService远程服务启动其他应用的Activity

    Service2应用,在AndroidManifest.xml文件中对外暴露MyService2服务: <!-- 代表在应用程序里,当需要该service时,会自动创建新的进程. android ...

  5. ajax 解析

    1.通过适当的Ajax应用达到更好的用户体验; 2.把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的. 二 ...

  6. [Erlang14]怎样模拟节点互连后的各种失败情况？

    情景: 当节点群互连时,会通过心跳包检查所连接节点是不是连接正常,这个心跳时间默认为60s,可以通过 net_kernel:set_net_ticktime(600). 来重设这个时间值,怎么测试? ...

  7. DATATable转为json

    public static string DataTableToJson(DataTable dt) { StringBuilder jsonBuilder = new StringBuilder() ...

  8. C# Winform Label内容根据其宽度自动调整字体大小

    C# Winform Label内容根据其宽度自动调整字体大小 项目,有个要求,Label中显示的内容,能够根据其宽度自动调整字体的大小进行显示,刚刚开始的时候,总是想着通过不同的方法来直接测量内容的 ...

  9. selenium alert JS弹窗问题处理

    弹窗一般分为三种类型: 1.警告消息框(alert) 警告消息框提供了一个"确定"按钮让用户关闭该消息框,并且该消息框是模式对话框,也就是说用户必须先关闭该消息框然后才能继续进行操 ...

  10. OCP换题库了，052新加的考题及答案整理-第16题

    16.Your database Is configured In archivelog mode. The USERS01 tablespace Is currently online. You a ...