CSS实现常用菜单(二)

2、变幻菜单

下面我们来实现如下图所示的菜单,我们将她称之为变幻菜单,把鼠标移入到当前菜单上,菜单的字体内容,颜色,背景颜色都发生改变。其他菜单不发生任何改变。

这里我们是通过html+css来实现这种变幻的菜单效果

html代码

最外层是一个div,在div的里面包含的ul的li就是用来显示菜单,每个li里包含a标签,首页,课程大厅,学习中心,关于我们。每个a标签里面包含一个span标签,span标签包含的就是当鼠标移入到菜单后,显示的新的菜单。

css代码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,729评论 32 459
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,514评论 0 30
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,529评论 0 40
  • 周末晚上带老婆,儿子一块去超市逛逛, 我跟儿子说看看今天都想买点啥咱们先列一下清单,儿子说要买奶粉,面包,衣服,日...
    A潘冬阅读 1,684评论 0 0
  • 数组遍历数组遍历方法:forEach,every,some,map,filter方法。 forEach:为数组中的...
    Alee文润阅读 3,008评论 0 0

友情链接更多精彩内容