我们先说一下伪类选择器的写法：
写法：选择器名称：伪类状态{}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. python rsa 加密解密 （编解码，base64编解码）

    最近有需求,需要研究一下RSA加密解密安全:在网上百度了一下例子文章,很少有文章介绍怎么保存.传输.打印加密后的文本信息,都是千篇一律的.直接在一个脚本,加密后的文本信息赋于变量,然后立马调用解密.仔 ...

  2. 【翻译】CSS水平和垂直居中的12种方法

    英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...

  3. 【G】系列导航

    G.开源的分布式部署解决方案 [G]开源的分布式部署解决方案 - 预告篇 [G]开源的分布式部署解决方案(一) - 开篇 [G]开源的分布式部署解决方案(二) - 好项目是从烂项目基础上重构出来的 [ ...

  4. cstring头文件函数解析

    原创作品,转载请注明来源:http://www.cnblogs.com/shrimp-can/p/5643829.html 在使用由字符数组或指针组成的字符串的时候,要用到一些函数,这些函数通常包含在 ...

  5. Java：从面试题“i++和++i哪个效率高？"开始学习java字节码

    今天看到一道面试题,i++和++i的效率谁高谁低. 面试题的答案是++i要高一点. 我在网上搜了一圈儿,发现很多回答也都是同一个结论. 如果早个几年,我也会认同这个看法,但现在我负责任的说,这个结论是 ...

  6. [SinGuLaRiTy] SplayTree 伸展树

    [SinGuLaRiTy-1010]Copyrights (c) SinGuLaRiTy 2017. All Rights Reserved. Some Method Are Reprinted Fr ...

  7. jmeter 使用jmeter 录制 手机APP脚本

    1.打开jmeter.鼠标右击工作台.添加HTTP代理服务器 2.设置配置jmeter.手机无线网络.(目标控制器也可以选择加到线程组中) 3.添加查看结果树 4.启动完成后.操作手机.jmeter就 ...

  8. Twitter数据非API采集方法

    说明:这里分三个系列介绍Twitter数据的非API抓取方法. 在一个老外的博看上看到的,想详细了解的可以自己去看原文. 这种方法可以采集基于关键字在twitter上搜索的结果推文,已经实现自动翻页功 ...

  9. Twitter数据抓取的方法(一)

    Scraping Tweets Directly from Twitters Search Page – Part 1 Published January 8, 2015 EDIT – Since I ...

  10. Spring MVC执行原理

    spring的MVC执行原理 1.spring mvc将所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求 进行真正的处理工作. 2.DispatcherSer ...