头部导航条布局

html代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>头部导航条制作</title>

     <link rel="stylesheet" type="text/css" href="css/master8.css">

 </head>

 <body>

 <div class="navbox">

     <ul class="clearfix">

         <li><a href="#">首页</a></li>

         <li><a href="#">资讯</a></li>

         <li><a href="#">web前端</a></li>

         <li><a href="#">前端新闻</a></li>

         <li><a href="#">联系我们</a></li>

         <li><a href="#">关于我们</a></li>

     </ul>

 </div>

 </body>

 </html>

用无序列表制作头部导航条：

  • 无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列

  • 左右排列的方式我们所用的是float:left;浮动的方法让li左右布局

    CSS样式：

  •  .navbox{
    
    width: 960px;
    
    height: 40px;
    
    margin: 20px auto;
    
    background: #08c;
    
 }
    
 .navbox >ul>li{
    
    float: left;
    
    width: 160px;
    
    height: 40px;
    
    line-height: 40px;
    
    text-align: center;
    
    font-size: 16px;
    
 }

    鼠标移入时实现颜色的变换

    HTML代码：

  •  <div class="navbox">
    
     <ul class="clearfix">
    
         <li><a href="#">首页</a></li>
    
         <li><a href="#">资讯</a></li>
    
         <li><a href="#">web前端</a></li>
    
         <li><a href="#">前端新闻</a></li>
    
         <li><a href="#">联系我们</a></li>
    
         <li><a href="#">关于我们</a></li>
    
     </ul>
    
 </div>

    思路： 
    鼠标移入时每个<li>显示为另一种颜色background: #00bfff; 
    css代码：

  •  .navbox ul li a{
    
     display: block;
    
     color: #fff;
    
     background: #08c;
    
 }
    
 .navbox ul li a:hover{
    
     text-decoration: none;
    
     background: #00bfff;
    
 }

    下拉菜单实现

    html：

  •  <div class="navbox">
    
     <ul class="clearfix">
    
         <li><a href="#">首页</a></li>
    
         <li><a href="#">资讯</a></li>
    
         <li><a href="#">web前端</a>
    
             <ul class="subnav">
    
                 <li><a href="#">HTML</a></li>
    
                 <li><a href="#">CSS</a></li>
    
                 <li><a href="#">JavaScript</a></li>
    
             </ul>
    
         </li>
    
         <li><a href="#">前端新闻</a></li>
    
         <li><a href="#">联系我们</a></li>
    
         <li><a href="#">关于我们</a></li>
    
     </ul>
    
 </div>

    思路： 
    在一级菜单web前端下实现二级菜单<ul class="subnav">

      1. html

      2. css

      3. JavaScript 
        当鼠标移入菜单时web前端时显示二级菜单，移出时隐藏； 
        CSS代码实现：

  •  .subnav{
    
     display: none;
    
 }
    
 /*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/
    
 .navbox ul li:hover .subnav{
    
     display: block;
    
 }
    
 /*当鼠标移入“web前端”选项栏时显示二级菜单*/

    三级菜单实现

  •  <div class="navbox">
    
     <ul class="clearfix">
    
         <li><a href="#">首页</a></li>
    
         <li><a href="#">资讯</a></li>
    
         <li><a href="#">web前端</a>
    
             <ul class="subnav">
    
                 <li><a href="#">HTML</a></li>
    
                 <li><a href="#">CSS</a>
    
                     <ul class="threenav">
    
                         <li><a href="#">css1</a></li>
    
                         <li><a href="#">css2</a></li>
    
                         <li><a href="#">css3</a></li>
    
                     </ul>
    
                 </li>
    
                 <li><a href="#">JavaScript</a></li>
    
             </ul>
    
         </li>
    
         <li><a href="#">前端新闻</a></li>
    
         <li><a href="#">联系我们</a></li>
    
         <li><a href="#">关于我们</a></li>
    
     </ul>
    
 </div>

    思路： 
    前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。

    我们看看css的绝对定位与相对定位这篇文章

    CSS代码：

  •  .subnav>li{
    
     position: relative;
    
 }
    
 .threenav{
    
     position: absolute;
    
     top: 0;
    
     left: 160px;
    
     width: 160px;
    
 }
    
 .subnav, .threenav{
    
     display: none;
    
 }
    
 .subnav li:hover .threenav{
    
     display: block;
    
 }
  • 最后实现的效果如下图：

CSS实现三级菜单[转]的更多相关文章

  1. 纯css制作三级菜单

    <!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...

  2. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  3. 用css实现三级导航菜单

    主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...

  4. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  5. JS+CSS打造三级折叠菜单，自动收缩其它级 js

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. HTML+CSS实现简单三级菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. css 实现三级联动菜单

    昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...

  8. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  9. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

随机推荐

  1. c++11 默认函数的控制

    1. 类与默认函数: C++中声明自定义的类,编译器会默认生成未定义的成员函数: 构造函数 拷贝构造函数 拷贝赋值函数(operator=) 移动构造函数 移动拷贝函数 析构函数 编译器还会提供全局默 ...

  2. spfa求次短路

    思路:先算出每个点到1的最短路d1[i],记录下路径,然后枚举最短路上的边 删掉之后再求一遍最短路,那么这时的最短路就可能是答案. 但是这个做法是错误的,可以被卡掉. 比如根据下面的例题生成的一个数据 ...

  3. Python网络爬虫-爬取微博热搜

    微博热搜的爬取较为简单,我只是用了lxml和requests两个库 url=https://s.weibo.com/top/summary?Refer=top_hot&topnav=1& ...

  4. 接口自动化之cookies登录

    现在有很多网站有验证码,跳过验证码实现登录可以使用cookies登录 目录 1.requests的添加cookies的方法 2.举个栗子 1.requests的添加cookies的方法 request ...

  5. 用notepad++ 打造轻量级Java编译器

    http://blog.163.com/jackie_howe/blog/static/19949134720125591752396/ 用notepad++ 打造轻量级Java编译器 2012-06 ...

  6. 第 4 章 前端基础之jquery

    一.jQuery是什么? 1. jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. 2. jQuery是继prototype之后又一 ...

  7. log4j配置及异常、解决办法

    配置: ### set log levels ### D只有一个E也只有一个 log4j.rootLogger = debug,stdout,D,E ### 输出到控制台 ### log4j.appe ...

  8. 关于VMware中的几个网络模式

    直接参考别人的: 写的已经很细致了: http://blog.csdn.net/yaoyaowugui/article/details/7422388 关键是看别人的几张图

  9. 如何免费注册codepen

    点击注册以后,发现是要美刀的.靠,没钱.可是要用怎么办...... 如果不注意可以没有看到free.....看着free是个文本.其实是个链接啊啊啊啊啊 重点来了: 进入到注册页面,显示recaptc ...

  10. python之字符串的切片

    切片操作(slice)可以从一个字符串中获取子字符串(字符串的一部分).我们使用一对方括号.起始偏移量start.终止偏移量end 以及可选的步长step 来定义一个分片. 格式: [start:en ...