|
第7章中，介绍了5个竖直方向菜单的制作方法，相信读者可以体会到CSS的功能非常强大。在本章中，我们将制作6个水平排列的菜单。它们也同样各具特色，而且应用了一些CSS设计中非常重要的技术，例如“滑动门”技术。它不仅仅应用在这里，奉书后面的很多案例中，都会看到“滑动门”技术的应用。 这一节要实现一个简单的水平菜单。这个菜单可以随着浏览器窗口宽度的变化而改变排列方式。当测览器窗口宽度不足以容纳所有的菜单项的时候，会自动折行，如图8.1图所示。 该实例文件位于网页学习网CSS教程资源的“第8章\01\horizonral-navi.htm”。  图1 自适应的水甲菜单效果 它的HTML代码依然是第7章多次使用过的最基本的HTML结构，如下所示。 折叠XML/HTML 代码复制内容到剪贴板
接下来设置#menu容器。这里只需要设置文字的样式就可以了。由于宽度会自动水平适应，因此不需要做额外的设置。代码如下：lodidance.com 折叠CSS 代码复制内容到剪贴板
下面对菜单项进行设置。代码如下： 折叠CSS 代码复制内容到剪贴板
在这段代码中，进行了如下设置。 (1) 把a元素设置为块级元素，并设置为向左浮动，这是使菜单项水平排列，并能够自动适应浏览器窗口的关键。 (2) 设置了文字的颜色和样式。 (3) 设置了内外边距。 (4) 设置了上下边框的样式，图中看到的灰色横线就是这里设置的效果。 最后，设置菜单项的鼠标经过效果，将文字的颜色从黑色变为红色，同时将上下两条粗边框变为黑色，以示和其他菜单项的区别，代码如下。 折叠CSS 代码复制内容到剪贴板
此时在浏览器中的效果已经正确地显示了鼠标经过效果。 分析：仔细观察图1中的间隔部分，可以看出，菜单项的水平间隔与竖直间隔相同，这个间距是由相邻的菜单项的margin构成的，根据代码可以知道，莱单项的margin是4像素。在前面的例子中曾经描述过，水平的相邻margin会相加在一起形成间隔，因此这里的水平间隔应该是8个像素；而竖直方向相邻的margin会取二者中较大者为间隔距离，这个现象称为“塌陷’。但是从这里可以看到，当盒子设为“浮动”后，即使在竖直方向上的margin相邻。也不会发生“塌陷”，否则这里的竖直间距应该是水平间距的一半，而不是现在看到的效果。这个结论请读者务必记清。 最后，请读者慢慢地把窗口由宽变窄，在某一个位置将会出现图1中所示的效果，也就是在菜单项内部发生了折行，这并不是期望的效果。解决办法是在“#menu a, #menu a:visited”的样式中增加如下CSS规则： 折叠CSS 代码复制内容到剪贴板
这条规则的含义是确保在单词之间的空白处不换行。这时效果如图1所示，图中这两个窗口宽度相同，没有增加这条规则时在菜单项内部折行的效果，图1增加该规则以后的效果。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/722.html |
