我们先说一下伪类选择器的写法：
写法：选择器名称：伪类状态{}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. c# 将匿名类或者集合转Json格式数据一些方法

    要说写这个功能呢也是因为工作需要,白天呢上班写个Web页面需要ajax请求后台并将数据以Json格式传会前端,由于公司特殊性吧,不能连外网(很苦比).所以只有等到晚上回家上网边查边写! public ...

  2. centos7 docker安装详解

    查看内核和操作系统版本[root@prod3 ~]# uname -r3.10.0-327.el7.x86_64[root@prod3 ~]# cat /etc/redhat-release Cent ...

  3. Java 中的锁——Lock接口

    Java SE5之后,并发包中新增了Lock接口(以及相关实现类)用来实现锁功能.虽然它少了(通过synchronized块或者方法所提供的)隐式获取释放锁的便捷性,但是却拥有了锁获取与释放的操作性. ...

  4. JS中的普通函数和箭头函数

    最近被问到了一个问题: >javaScript 中的箭头函数 (=>) 和普通函数 (function) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...

  5. canvas基础—图形变换

    1.canvas转换方法 1.1canvas转换方法 二.canvas实现图形的中心点旋转 step1:获取canva元素并指定canvas的绘图环境 var canvas=document.getE ...

  6. 获取 metadata 的完整例子 - 每天5分钟玩转 OpenStack（166）

    我们将通过实验详细分析 instance 从 nova-api-metadata 获取信息的完整过程. 环境介绍 1. 一个 all-in-one 环境(多节点类似). 2. 已创建 neutron ...

  7. (转)Nginx启动出错 error while loading shared libraries

    [root@localhost conf]# /usr/local/nginx/sbin/nginx/usr/local/nginx/sbin/nginx: error while loading s ...

  8. 请一定记得升级java虚拟机

    对于吃货出身又需要保持体重的我,出门一定要带男票,因为这样就可以把见到的好吃的都买给他吃,就当是自己吃了[汗].偶尔做梦还是会梦到自己一个角落里偷吃东西,听到有脚步声,抬起头,大哭起来:“我饿了.”  ...

  9. jPaginate 一个非常好用的分页插件

    之前报馆项目用的前端框架easyui,还是用不太习惯,因此换了一个框架,最近为此找分页插件,偶然间看见一个非常好用的分页插件JPaginate Paginate是基于jquery的分页插件,非常轻量, ...

  10. web service 组件

    web service 组件 基本的 web service 平台是 XML + HTTP.所有标准的 web service 使用以下组件: SOAP(简单对象访问协议) UDDI(通用描述.发现与 ...