你的位置:首页 > 软件开发 > Java > 简单水平菜单的制作

简单水平菜单的制作

发布时间:2016-04-08 22:00:06
在对选择栏进行的学习后,下面我们深入的对水平菜单进行一下了解。我们来看看效果图。 接下来,我们最这样的效果进行一下思路分析,这与选择栏有些相似的地方:都利用了鼠标进入事件,内容隐藏。在这些基础上,再利用浮动与定位和css的布局就可以完成了。首先,我们注意对三个列表标题进行左 ...

简单水平菜单的制作

在对选择栏进行的学习后,下面我们深入的对水平菜单进行一下了解。

我们来看看效果图。

简单水平菜单的制作简单水平菜单的制作简单水平菜单的制作

  接下来,我们最这样的效果进行一下思路分析,

这与选择栏有些相似的地方:

都利用了鼠标进入事件,内容隐藏。

在这些基础上,再利用浮动与定位和css的布局就可以完成了。

首先,我们注意对三个列表标题进行左浮动,就可以让它们在同一水平上;

利用margin属性的设定和css的背景样式,对三个标题进行布局和背景增加。

在每个列表的标签中添加<div>,用来增加下面的显示内容和背景。

标题与内容之间的空白部分可以利用空标签来完成,不能利用margin。

下面把代码分享给大家:

<!DOCTYPE html>     }    }  </style>  }  }  }  }  }  }  </script></body>注意事项

1 脱标,留在原地,position:absolute,不写top值,可以写left来调整。

原标题:简单水平菜单的制作

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录