我们先说一下伪类选择器的写法：
写法：选择器名称：伪类状态{}4
常见伪类状态：
未访问：link
鼠标移上去：hover
激活选定：active
已访问：visited
获得焦点的时候触发：focus

现在我们要用的是hover事件，也就是鼠标指上发生的事情。

例：
a:hover{

color:red

}<!--指上去a标签里的文字变红-->

还有要用到的是浮动属性，

例：

<div>

　　float:left;

</div>  <!--使此div块向左浮动-->

 

可以使一个块级元素向左/向右浮动。原本块级元素占一整行，浮动之后可以使空余位置释放出来

以我学校的官网首页导航栏为例，来看一看怎样做一个导航栏：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>烟台大学</title>

        <link rel="icon" href="img/ytu.png"/>

        <style type="text/css">

        *{

            padding: 0px;

            margin: 0px;

            font-family: "微软雅黑";

        }

            .div

        {

            width: 1013px;

            background-color: ;

            height:107px ;

            margin: 0 auto;

        }

        .div1{

            float: left;

            width: 317px;

            height: 107px;

            background-image: url("img/logo.jpg");

        }

        .div2{

            float: right;

            width: 696px;

            height: 107px;

            background-color:#032F54;

        }

        .div3{

            height: 72px;

            width: 701px;

        }

        li{

            list-style: none;

            background-color: #8C1616;

            float: left;

            width: 87px;

            height: 35px;

            font-size: 16px;

            line-height: 35px;

            color: white;

            text-align: center;

        }
 　　　　　.li1{

            background-color:#032F54;

            visibility: hidden;

        }
         li:hover{

            background-color: #032F54;

            cursor: pointer;

        }

        li:hover .li1{

            visibility: visible;

        }

        .c{

            background-color:#032F54;

            font-size: 13px;

            text-align: center;

        }

        .c:hover{

            background-color: #8C1616;

        }

        a{

            text-decoration: none;

            color: white;

        }

        </style>

    </head>

    <body>

        <div class="div">

            <div class="div1">

            </div>

            <div class="div2">

                <div class="div3">

                </div>

                <ul style="color: #8C1616;">

                <li><a href="biaoge.html">烟大新闻</a></li>

                <li>

                    <a href="biaoge.html">学校概况</a>

                    <ul class="li1">

                        <li class="c">学校简介</li>

                        <li class="c">现任领导</li>

                        <li class="c">校园风景</li>

                    </ul>

                </li>

                <li>学院设置</li>

                <li>

                    人才培养

                    <ul class="li1">

                        <li class="c">本科生教育</li>

                        <li class="c">留学生教育</li>

                        <li class="c">研究生教育</li>

                    </ul>

                </li>

                <li>

                    科学研究

                    <ul class="li1">

                        <li class="c">服务地方网</li>

                        <li class="c">烟大学报</li>

                        <li class="c">研究生处</li>

                    </ul>

                </li>

                <li>学生工作</li>

                <li>招生就业</li>

                <li>公共服务</li>

                </ul>

            </div>

        </div>

    </body>

</html>

效果图如下：

OK!做好喽

如何做一个导航栏————浮动跟伪类（hover）事件的应用的更多相关文章

  1. 使用TabLayout快速实现一个导航栏

    在没有Material Design的年代,要实现一个类似微信主页面的效果,我们有以下几种解决方案: 1.Fragment + ViewPager  +  RadioGroup自定义固定导航条 2.F ...

  2. 【javascript/css】关于鼠标事件onmousexxx和css伪类hover

    在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

  3. 关于css伪类:hover的用法

    关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就 ...

  4. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  5. html表单——使用frameset写一个导航栏效果

    主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  6. 用一个例子学习CSS的伪类元素

    CSS伪类元素是一个非常酷的东西!首先我们理解一下它,:before :after 伪类元素,也就是虚假的元素.它可以插入在元素的前面或者后面,而在HTML文档结构中,它却是不存在的,因为Js是无法通 ...

  7. CSS3学习笔记——伪类hover

    最近看到一篇文章:“Transition.Transform和Animation使用简介及应用展示”    ,想看看里面 “不同缓动类效果demo”例子的效果,发现了一个问题如下: .Trans_Bo ...

  8. 使用『jQuery』『原生js』制作一个导航栏动效 —— { }

    效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...

  9. jquery-仿flash的一个导航栏特效

    演示地址:http://itxiaoming.sinaapp.com/demo05/demo.html <html> <head> <meta http-equiv=&q ...

随机推荐

  1. 一文让你从此告别HTTP乱码（一）Request篇

    #circle { background-color: #8fcbec; border: 3px } 概述 开发Web项目的过程中,经常遇到浏览器中显示的内容乱码,或者服务器获取浏览器请求参数时乱码的 ...

  2. SSH相关小应用

    1.隐藏值:<s:hidden name="bbsTopic.id" value="%{bbsTopic.id}"></s:hidden> ...

  3. 兔子生娃问题---函数递归应用--c语言实现

    事情是这样的:在很久很久以前....有一对兔子,从出生后第 3 个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 兔子的规律为数列:1, 1 ...

  4. Linux 下安装 Memcached 和 PHP 开启 Memcached 扩展

    [项目背景]:阿里云ECS服务器,Linux(centos7.2 64位),环境部署使用的是阿里云一键安装包(LAMP)等 [项目需求]:linux安装memcached 和php开启Memcache ...

  5. Windows运行命令大全

    inetmgr   启动IIS控制台winver 检查Windows版本 wmimgmt.msc 打开Windows管理体系结构(wmi) wupdmgr Windows更新程序 wscript Wi ...

  6. POPTEST老李分享session,cookie的安全性以及区别 1

    POPTEST老李分享session,cookie的安全性以及区别   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程 ...

  7. POPTEST 150801 祝大家前途似锦

    POPTEST 150801 祝大家前途似锦   PT20150801学员不断在就业,同学们走好,远兵辛苦了!!!

  8. UE32修改TAB键为空格键

  9. Python入门（一）：PTVS写Python程序，调试模式下input()提示文字乱码问题

    前两天写了Python入门(一),里面提到,使用VS2013+PTVS进行Python开发. 就在准备为第二篇写个demo的时候,发现了一个问题,各种解决无果,有些纠结 Python中输入函数是inp ...

  10. Java在Debug的时候，有些变量能无限展开（循环了）？

    抛异常的时候,Java Debug 时,有些变量能无限展开,怎么做到的? 先来一个报错的例子: Exception in thread "main" java.lang.Stack ...