之前为大家介绍过有关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估计有可能会被笑掉大牙。以上内容,如有异议,请留言。