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

 <!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. Linux下动态链接库 与gcc 选项

    -L 编译时查找动态链接库的路径 -lxxx(小写)  e.g -lcudart   = link libcudart.so  , -I(大写) 头文件的路径 -rpath (-R), 编译时指定链接 ...

  2. Xcode 安装插件手误选择了「Skip Bundle」后需要重新允许「Load Bundle」的解决方法

    在 Mac 终端输入命令: # 这里的7.1代表 Xcode 的版本号 defaults delete com.apple.dt.Xcode DVTPlugInManagerNonApplePlugI ...

  3. make no mistake, we are the last line of defense.

    make no mistake, we are the last line of defense.

  4. Exploring Ionic Lists

    Infinite Lists 由于手机不适合使用多页面显示posts,Infinite Lists成为各种新闻.咨询类app的标配.为了在ionic框架中使用到Infinite Lists,我们首先学 ...

  5. Python Shell 解释器下使用Django Model

    sys.path.append('E:/Projects/DjangoProjects/myFirstSite') os.environ.setdefault('DJANGO_SETTINGS_MOD ...

  6. base.js

    function $_id(id){return document.getElementById(id)};//$只定义为通过ID返回元素的功能 //-----------------------do ...

  7. 快速开发~Rafy框架的初步认识

    当我们开始使用EF的同时,是不是就会更好的认识了其他的ORM框架,最近接触了Rafy的使用,感觉还是蛮有兴趣去学习的,虽然最初的我到现在看的并不深入,但是我个人感觉还是可以简单地做一些总结的啦,或许语 ...

  8. 在做Android开发的，如何去掉滚动view在尽头时的阴影效果

    不经意的在开发中,发现qq的侧滑几乎没有阴影效果,就是拉到边界没有时出现的效果:于是在网上找了下,发现很简单的设置 只要在xml布局文件的滚动或者侧滑控件中加入如下样式: android:overSc ...

  9. jQuery相册预览简单实现（附源码）

    1.CSS样式 <style type="text/css"> html,body,.viewer,.viewer .pic-list,.viewer .pic-lis ...

  10. Android上的事件流操作数据库

    最近在浏览某篇有关事件流的文章时,里面提到了数据的流处理,兴趣来了,就想看看能否在Android端实现一个. 根据文章的介绍,将每次数据的变更事件,像是插入,删除或者更新等,记为一个不可变的事件,让数 ...