导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

一.将ul块级元素转为行内元素

通过display: inline-block设置为行内元素。

没有转换的效果:

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

加上代码 display: inline-block 后的效果

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

二.美化导航栏 用伪类选择器

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

代码参考

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

三.改进增加二级菜单

增加二级菜单

用法就是

ul <li

li里面 在套 ul<li标签

一级标签要转成行内 元素

并切要固定不能让二级标签给顶的错位了

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

参考代码

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

四.竖型的导航

这个也很简单 不转换成行内元素即可实现

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

具体美观问题自己进行调试即可

代码参考

导航栏的多种实现方法加二级菜单竖型块级元素转行内元素

资源下载

上一篇

Python中两个变量进行交换的五种方法