我们先说一下伪类选择器的写法：
写法：选择器名称：伪类状态{}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. 深入理解ajax系列第五篇——进度事件

    前面的话 一般地,使用readystatechange事件探测HTTP请求的完成.XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发 ...

  2. 在Chrome中安装PostMan用来测试SpringBoot程序

    1. 首先下载一个PostMan的插件,Postman_v4.1.3.crx 下载下来为这种类型的文件. 2. 在Chrome中输入chrome://extensions/ 这个,打开Chrome的扩 ...

  3. Android Material Design 系列之 SnackBar详解

    SnackBar是google Material Design提供的一种轻量级反馈组件.支持从布局的底部显示一个简洁的提示信息,支持手动滑动取消操作,同时在同一个时间内只能显示一个SnackBar. ...

  4. Spring-boot中使用@ConditionalOnExpression注解，在特定情况下初始化bean

    想要实现的功能: 我想在配置文件中设置一个开关,enabled,在开关为true的时候才实例化bean,进行相关业务逻辑的操作. 具体实现: 1:要实例化的bean 2. 配置类 代码: 想要实例化的 ...

  5. Java引领新生活

    阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我觉得师生关系应当是亲密无间,课上老师讲解学生配合,课下师生交流启发思考. 你有什么技能(学习,棋类,球类,乐器,艺术,游戏,......)比大多 ...

  6. 树链剖分-SPOJ375(QTREE)

    QTREE - Query on a tree You are given a tree (an acyclic undirected connected graph) with N nodes, a ...

  7. 【G】开源的分布式部署解决方案文档 - 手动安装

    G.系列导航 [G]开源的分布式部署解决方案 - 导航 序言 因各种原因,决定先写使用文档.也证明下项目没有太监.至于安装过程复杂,是因为还没有做一键安装,这个现阶段确实没精力. 项目进度 (点击图片 ...

  8. win10+vs2010+cuda7.5安装及配置

    http://blog.csdn.net/u011821462/article/details/50145221 这篇博客已经写得很详细了.

  9. CSS3的新特性

    CSS3中增加的新特性: (1)选择器的种类 (2)字体 font (3)text-overflow (4)文本渲染 text-decoration (5)多列布局 column-count (6)R ...

  10. Android Weekly Notes Issue #249

    Android Weekly Issue #249 March 19th, 2017 Android Weekly Issue #249 本期内容包括: 一个设计的实现Demo讨论; Kotlin的C ...