在对选择栏进行的学习后,下面我们深入的对水平菜单进行一下了解。我们来看看效果图。 接下来,我们最这样的效果进行一下思路分析,这与选择栏有些相似的地方:都利用了鼠标进入事件,内容隐藏。在这些基础上,再利用浮动与定位和css的布局就可以完成了。首先,我们注意对三个列表标题进行左 ...
在对选择栏进行的学习后,下面我们深入的对水平菜单进行一下了解。
我们来看看效果图。
接下来,我们最这样的效果进行一下思路分析,
这与选择栏有些相似的地方:
都利用了鼠标进入事件,内容隐藏。
在这些基础上,再利用浮动与定位和css的布局就可以完成了。
首先,我们注意对三个列表标题进行左浮动,就可以让它们在同一水平上;
利用margin属性的设定和css的背景样式,对三个标题进行布局和背景增加。
在每个列表的标签中添加<div>,用来增加下面的显示内容和背景。
标题与内容之间的空白部分可以利用空标签来完成,不能利用margin。
下面把代码分享给大家:
<!DOCTYPE html> } } </style> } } } } } } </script></body>注意事项
1 脱标,留在原地,position:absolute,不写top值,可以写left来调整。
原标题:简单水平菜单的制作
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。