几个导航栏也算对学过知识的回顾，总有新的收获，下面是学习过程中敲的代码：

 <!DOCTYPE HTML>

<html>

<head>

    <title></title>

    <meta charset="utf-8"/>

    <style>

    ul{

        list-style-type: none;

        width: 100px;

    }

    a{

        display: block;     /*设为block修改其样式，而不是修改li标签*/

        text-decoration:none;

        background-color:#ccc;

        height: 30px;

        line-height: 30px;

        width: 100px;

        margin-bottom: 1px;

        text-indent:20px;

    }

    li{

    }

    a:hover{

        background-color:#f60;

        color:#fff;

    }

    </style>

</head>

<body>

  <ul>

    <li><a href='#'>首页</a></li>

    <li><a href='#'>新闻</a></li>

    <li><a href='#'>咨询</a></li>

    <li><a href='#'>服务</a></li>

    <li><a href='#'>关于</a></li>

   </ul>

</body>

</html>

下面css代码使其水平导航：

ul{

        list-style-type: none;

    }

    a{

        display: block;/*设为block修改其样式，而不是修改li标签*/

        text-decoration:none;

        background-color:#ccc;

        height: 30px;

        line-height: 30px;

        width: 100px;

        margin-bottom: 1px;

        text-align:center;

    }

    li{

        float:left;

    }

    a:hover{

        background-color:#f60;

        color:#fff;

    }

下面再次改进为伸缩效果：

ul{

        list-style-type: none;

        height:30px;

        border-bottom:3px solid #f60;

        margin:0 auto;

        width: 800px;

        padding-left: 200px;

    }

    a{

        display: block;/*设为block修改其样式，而不是修改li标签*/

        text-decoration:none;

        background-color:#ccc;

        height: 30px;

        line-height: 30px;

        width: 100px;

        margin-bottom: 1px;

        text-align:center;

        border-radius:10px 10px 0 0; 

    }

    li{

        float:left;

       width: 100px;

        margin: 0 auto;

    }

    a:hover{

        background-color:#f60;

        color:#fff;

        height:40px;

        margin-top:-10px;

        line-height: 40px;

    }

改进后效果如下：

下面用js改进，实现鼠标放上去变宽效果：

 <!DOCTYPE HTML>

<html>

<head>

    <title></title>

    <meta charset="utf-8"/>

    <style>

    ul{

        list-style-type: none;

        height:30px;

        border-bottom:3px solid #f60;

        margin:0 auto;

        width: 800px;

        padding-left: 200px;

    }

    a{

        display: block;/*设为block修改其样式，而不是修改li标签*/

        text-decoration:none;

        background-color:#ccc;

        height: 30px;

        line-height: 30px;

        width: 100px;

        margin-bottom: 1px;

        text-align:center;

        border-radius:10px 10px 0 0; 

    }

    li{

        float:left;

       width: 100px;

        margin: 0 auto;

    }

    a:hover{

        background-color:#f60;

        color:#fff;

        height:40px;

        margin-top:-10px;

        line-height: 40px;

    }

    </style>

    <script>

    window.onload=function(){

        var oa=document.getElementsByTagName('a');

        for(var i=0;i<oa.length;i++)

        {

            oa[i].onmouseover=function(){

                var that=this;

                that.time=setInterval(function(){

                    that.style.width=that.offsetWidth+8+'px';

                    if(that.offsetWidth>=120)

                    {

                        clearInterval(that.time);

                    }

                },30);

            }

            oa[i].onmouseout=function(){

                var that=this;

                that.time=setInterval(function(){

                    that.style.width=that.offsetWidth-8+'px';

                    if(that.offsetWidth<=120)

                    {

                        that.style=width='120px';

                        clearInterval(that.time);

                    }

                },30);

            }

        }

    }

    </script>

</head>

<body>

  <ul>

    <li><a href='#'>首页</a></li>

    <li><a href='#'>新闻</a></li>

    <li><a href='#'>咨询</a></li>

    <li><a href='#'>服务</a></li>

    <li><a href='#'>关于</a></li>

   </ul>

</body>

</html>

效果：

css导航栏的更多相关文章

  1. [HTML/CSS]导航栏的下划线跟随效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS：CSS 导航栏

    ylbtech-CSS:CSS 导航栏 1.返回顶部 1. CSS 导航栏 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单. 导航栏=链接 ...

  3. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  4. CSS 导航栏

    实例: 导航栏 Home News Articles Forum Contact About 导航栏 熟练使用导航栏,对于任何网站都非常重要. 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜 ...

  5. 纯洁CSS实现下拉菜单和下拉容器（纯洁CSS导航栏和导航下拉容器）

    虽然网上课程似即使案件大同小异,但我还是写,记笔记,也为您提供参考 我希望你能指导批评~~ 首先,我们必须列出ul li 开始我们的导航栏菜单也能说生产: 在下面的页面,我们先建XHTML结构体: & ...

  6. 不可思议的纯CSS导航栏下划线跟随效果

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  7. 纯css导航栏下划线

    .nav-underline > *{/* 指定容器,里面可以是li.span等多样化的元素 */ display: inline-block; margin: -3px; padding: 1 ...

  8. PHP全栈开发（八）：CSS Ⅹ 导航栏制作

    学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...

  9. css——导航栏

    导航栏一般用无序列表制作 但出来的导航栏有黑点,还有一些边距 去除黑点我们可以用:list-style-type: none;/*去掉ul前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...

随机推荐

  1. mysql int(1) 与 tinyint(1) 有什么区别？

    From: http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/08/25/2153016.html mysql int(1) tinyint ...

  2. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByName

    按照name属性获取多元素 -- getElementsByName 标准 DOM 1 定义在HTMLDocument Interface 中,原型NodeList getElementsByName ...

  3. Android代码优化工具——Android lint

    作为移动应用开发者,我们总希望发布的apk文件越小越好,不希望资源文件没有用到的图片资源也被打包进apk,不希望应用中使用了高于minSdk的api,也不希望AndroidManifest文件存在异常 ...

  4. Rpath handling on Linux

    The solution in the article below seems promising: http://www.blaenkdenum.com/notes/cmake/#rpath set ...

  5. Unity 3D Intantiate过程中Transform 空物体和本体之间的关系

    想当年刚学Unity的时候,这个问题困扰了我好几天,因此来分享一下当初解决问题的思路. 我们通过Unity构建场景的过程中,经常发现一个现象,就是物体在拖进场景中后,我们会发现物体是反的,通过改变物体 ...

  6. 基于Solr实现HBase的二级索引

    文章来源:http://www.open-open.com/lib/view/open1421501717312.html 实现目的: 由于hbase基于行健有序存储,在查询时使用行健十分高效,然后想 ...

  7. [python]pip常用命令（转载）

    用阿里云服务器,使用pip安装第三方库的时候卡的要死.所以我就想pip能不能安装本地的包. 找到了这篇博客: http://me.iblogc.com/2015/01/01/pip%E5%B8%B8% ...

  8. [数据库]sql之行顺序

    这个文章主要是防止我忘了sql的执行顺序,解释的东西我都没怎么看懂.数据库渣如我- 逻辑查询处理阶段简介 FROM:对FROM子句中的前两个表执行笛卡尔积(Cartesian product)(交叉联 ...

  9. [转]提高 Linux 上 socket 性能，加速网络应用程序的 4 种方法

    原文链接:http://www.ibm.com/developerworks/cn/linux/l-hisock.html 使用 Sockets API,我们可以开发客户机和服务器应用程序,它们可以在 ...

  10. python反转字符串(简单方法)及简单的文件操作示例

    Python反转字符串的最简单方法是用切片: >>> a=' >>> print a[::-1] 654321 切片介绍:切片操作符中的第一个数(冒号之前)表示切片 ...