|
本案例中，制作一个带有斜角的水平菜单。依然和上例一样，它也是可以适应窗口宽度的，效果如图1所示。 该实例文件位于网页学习网CSS教程资源中的“第8章\01\cut-naiv.htm”。  图1 自适应的斜角水平菜单效果 一、基本思路 本案例的关键在于，如何制作出菜单项左上角这个斜角。如果有了上一章中制作“带箭头的菜单”的经验，掌握了使用“钩子“的方法，本案例的实现就很容易了。lodidance.com 对于每一个菜单项的a元素，放置一个span元素，设为corner类别，并作为CSS“钩子”，用于实现斜角效果，代码如下所示。 折叠XML/HTML 代码复制内容到剪贴板
二、基本设置 首先设置#menu容器。仅设置文字的样式即可，无需设置其他属性，代码如下。 折叠CSS 代码复制内容到剪贴板
接着，设置每一个菜单项的基本属性，代码如下。 折叠CSS 代码复制内容到剪贴板
这段代码中，将a元素设置为块级元素，并向左浮动。 注意：这里通过positiom属性将每个菜单项的定位方式设置为相对定位，目的不是要移动菜单项本身，而是通过这个设置将自身变为“包含块”，从而才能使挂在它上面的斜角元素以它为基准来定位。 这时基本设置就完成了，下面就要实现斜角的效果了。 三、设置斜角效果 这里先介绍一下斜角的产生方法。假设有如下一个简单的完整网页。 折叠XML/HTML 代码复制内容到剪贴板
这个页面在IE和Firefox中的效果分别如图2所示。  图2 使用边框产生的形状 可以看到这种设置方法,对于Firefox和IE都可以实现一个正方形，并且4个三角形独立控制颜色。接下来在上面的样式中找到如下两行： 折叠CSS 代码复制内容到剪贴板
修改为： 折叠CSS 代码复制内容到剪贴板
这时产生的效果如图3所示，正是本案例所需要的斜角形状。  图3 使用边框产生的斜角 有了这个基础，再继续完成导航条就很容易了。根据上面设置斜角的方法，对“#menu a span”进行设置，代码如下。这里对边框的样式写法稍有不同，本质完全相同。 折叠CSS 代码复制内容到剪贴板
这里与上面试验的斜角的代码相比，只多了如下两行。 折叠CSS 代码复制内容到剪贴板
这两行的作用是进行斜角的定位。由于前面的a元素已经设置为相对定位，而这里的这个span是a的下级元素，又设置为绝对定位，因此这个斜角将以a元素的位置为基准进行定位。 经验：那么可能读者会想到，既然top和left都设置为0，是不是可以省略这两行语句不写呢？ 答案是否定的，如果省略这两个语句。效果将显示错误的斜角效果。这是因为，默认情况下，这个斜角将放置在“内容”的左上角，而我们希望的是放置在以边框为界的左上角。 当把这两行语句加上以后，就可以看到正确的效果了，如图1所示。接下来的任务就是设置鼠标经过效果了。 四、设置鼠标经过效果 下面设置鼠标经过效果。这里希望鼠标指针经过某个菜单项的时候，菜单项的背景颜色由红色改变为橘黄色，文字由白色变为深灰色，代码如下。lodidance.com 折叠CSS 代码复制内容到剪贴板
这时的效果，有点像“折角”的效果，看起来也很不错。如果喜欢这个效果，就可以到这里结束了。 如果希望当鼠标指针经过时，斜角部分也变成橘黄色，可以增加如下代码。 折叠CSS 代码复制内容到剪贴板
这样，当鼠标指针经过菜单项时，包括斜角部分，也会一同变为橘黄色，效果如图1所示。至此本案例就全部完成了。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/723.html |
