使用CSS模仿一个京东菜单效果
Sublime编纂器
HTML+CSS方式/步骤
- 1
编写菜单所需要的HTML布局，代码及预览结果如下图所示：
- 2
为菜单设置CSS全局样式，对菜单的整体进行节制，代码及预览结果如下图所示：
- 3
设置菜单的局部样式，别离对容器container、 LOGO、菜单地点的块进行节制，代码和预览结果如下图所示：
- 4
设置每一个菜单项，并对包含在
- 内的子菜单进行节制，默认子菜单不显示，代码和结果如下图所示：
- 5
这是最关头的一步，利用动态伪类中的“:hover”当鼠标悬停到导航链接上时，响应的元素发生转变，代码及结果如下图所示：
- 6
至此，所有的工作就全数完当作了，打开浏览器，将鼠标悬停到左侧的导航上，右则将显示出对应的内容。结果不错吧？脱手尝尝吧！！
- 发表于 2019-08-10 18:07
- 阅读 ( 131 )
- 分类：其他类型
