当前位置:Gxlcms > html代码 > 下拉菜单效果_html/css_WEB-ITnose

下拉菜单效果_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:27人阅读

  之前为大家介绍过有关HTML中的一些比较炫的效果,本篇为大家介绍一些,大家在网站中经常可以见到的一种下拉菜单效果,这种菜单效果一般分为两层,当我们的鼠标经过一级菜单时,隐藏的二级菜单就会显示出来,这样即保证了页面的美观,同时又不会使页面的模块减少,甚至可以增加模块数目。

  一、废话不多说,下面我们来通过HTML+CSS为大家实现一下上面的效果,首先请大家先欣赏一下效果图:

  

 1、界面布局代码:

     
  • 首页
  • 软件工程
    • JAVA
    • NET
  • 通信工程
  • 计算机管理
    • JAVA
    • NET
  • 物联网系

 2、css代码:

  对于CSS代码都是最基本的,我想大家都能的看懂吧,可能有一些看上去有些吃力,下面我就带大家一起分析一下,这段代码:list-style:none;表示去掉样式,也就是去除每个li前的小黑点;对于a下的text-decoration: none;表示去除超链接下的下划线;a:hover表示鼠标经过超链接是的效果;display: block;表示把ul转化为块级元素。其他的都是一些常规属性,就不再赘述,只要理解了盒子模型的理念,这都不是事。

  二、html+css+javascript实现上述效果: 

 3、界面代码:

    
  • 首页
  • 软件工程
    • JAVA
    • NET
  • 物联网工程
  • 信息管理
    • JAVA
    • NET
  • 网络安全
  • 计算机科学与技术

 4、css代码:

 5、JavaScript实现上述效果:

    

  三、变化菜单的实现,界面欣赏:

  

 6、界面代码:

    
  • 首页index
  • 课程大厅home
  • 学习中心study
  • 关于我们me
  • 论坛say

 7、css代码:

  

  讲到这里关于本篇的菜单栏设计,我相信大家都已经学会了,有没有感觉到CSS的强大,反正我算是服了,作为一个网站开发工程师,如果你说你不懂SCC估计有可能会被笑掉大牙。以上内容,如有异议,请留言。

人气教程排行