我们先说一下伪类选择器的写法：
写法：选择器名称：伪类状态{}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. 实现在easyui中的datagrid，点击某一列的列头弹出combobox下拉框

    easyUI  datagrid在列头加下拉框,实现对列内容的筛选. 代码: onLoadSuccess: function (data) {//Fires when data is loaded s ...

  2. git中常见的几个命令

    git中常见的几个命令 本地仓库 三个区域 工作目录 暂存区 本地仓库 文件的四个状态 未跟踪 untracked 已暂存 staged 已提交commited 已修改 modified 基本命令 g ...

  3. 利用Register protocol实现网页调用桌面程序(类似迅雷、QQ等)

    前言 我们经常看到 tencent://.. thunder://     这两种开头的网址,往往觉得很奇怪,很想弄懂其中的原理,是如何实现的,我查找了相关的 资料,终于找到了,跟大家分享下. 原理篇 ...

  4. 【SF】开源的.NET CORE 基础管理系统 -介绍篇

    [SF]开源的.NET CORE 基础管理系统 -系列导航 1.环境: .NET Core SDK (https://www.microsoft.com/net/core) SQL Server or ...

  5. /bin/sh^M: bad interpreter:解决办法

    xcode编译时有时候遇到/bin/sh^M: bad interpreter:没有那个文件或目录这样的错误 可以用以下方式解决 先在控制台cd到报错的目录 vi xxx.sh(报错的那个文件):se ...

  6. letter-spacing+first-letter实现按钮文字隐藏

    本文地址:http://www.zhangxinxu.com/wordpress/?p=3557 一.文不在长,有货则灵 图片式按钮的文字隐藏看来是大家都比较关注的一个问题(分享讨论.微博转发等可见一 ...

  7. Java单例模式再加强——按组多单例

    最近要使用alibaba的rocket mq(我们公司对其进行了封装,使其运行在dotNet平台上,Java还是和原生的差不多,涉及公司的内容本文不会提及),其中 在生产者组这一块,建议是用单例模式的 ...

  8. 多线程CountDownLatch和Join

    如果现在有五个线程A.B.C.D.E,请问如何用E线程用于统计A.B.C.D四个线程的结果? 题意需要用E线程统计A.B.C.D四个线程,也就是说E线程必须要等到前面四个线程运行结束之后才能执行.那么 ...

  9. SPOJ - VISIBLEBOX ［multiset的使用］

    tags:[STL][sort][贪心]题解:做法:先对数组a进行排序,再将数组a从头到尾扫一遍,使用multiset维护最小值,如果,即将放入集合的数字>=最小值的两倍,那我们就删除掉多重集合 ...

  10. 性能测试分享：jmeter性能监控（一）

    性能测试分享:jmeter性能监控(一) poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908 ...