8.5 不使用图像的圆角菜单

在本案例中，要实现如图1所示的圆角菜单效果。如果通过背景图片来使用前面介绍的滑动门技术，也是可以实现的。但在本案例中，我们采用另外一种方法来制作，其特点是不使用任何图像文件，仅通过CSS本身来实现这样的效果。

该实例文件位于网页学习网CSS教程资源的“第8章\05\rounded-navi.htm”。

图1 不使用图像的圆角菜单
 

如果读者不看下面的讲解，自己是否可以想出解决方法呢？其实这个方法前面的案例已经使用过了，它类似于制作带箭头的菜单，只不过这次要多挂几个“钩子”。

一、实现圆角效果

在制作整体圆角菜单之前，先来实现如图2所示的一个圆角菜单项。这圆角的文件位于网页学习网CSS教程资源的“第8章\05\prepare.htm”。

图2 圆角的构成

在前面我们曾经制作过不使用图像文件的斜角菜单，是使用CSS的边框来实现的，那么这里怎么做呢？

① 首先观察如下的HTML代码。

这正是上面效果所使用的HTML结构，可以看到每一行标记是如何与最终效果中的像素对应的。

② 那么CSS又如何设置呢？对.item容器进行设置，代码如下，这里都是一些常规的设置。

③ 对p段落的样式进行设置，代码如下。

注意这里对边框的设置。首先设置4条边为1个像素宽，然后把上边框设置为0，这时的效果可以看到左边，右边和下边有边框，上边则没有边框。

④ 下面就要对构成圆角的4个div进行设置了。先对它们的公共属性进行设置，代码如下。

⑤ 设置最上面一行的row1的样式，它需要覆盖共性的背景色。因为它是作为水平的上边框出现的，所以把它的背景色设置为边框颜色即可。同时通过设置左右margin，使它左右各短5个像素，代码如下。

⑥ 设置第2行row2的样式。这一行覆盖了border属性，使它变为两个像素，从而更接近一个圆角。

此时在浏览器中的效果如可以看到已经出现圆角的雏形了。

⑦ 使用和上面相同的方法设置接下来的两行，代码如下。

这样就获得了圆角菜单项的效果了，如果读者对这些数据的计算还有不清楚的地方，可以参考前面的结构部分和图1的对比。

请读者务必先把圆角的制作方法分析清楚，然后再往下学习。

二、用列表进行改造

上面只是做出了一个菜单项。为了能够实现完整的菜单，还需要改造为利用列表来实现的HTML结构，也就是使用ul代替div，便于以后增加菜单项时能更方便地组织内容。同时增加a标记，使菜单项可以响应鼠标的操作。

① 首先改造HTML代码。找到代码中的如下部分。

改造为：

这样显示的效果和原来是相同的。

② 增加其余几个菜单项，只需要复制后修改p段落中的文字就可以了，这里不再抄录代码。

③ 对CSS样式进行改造。

● 增加对ul的CSS设置，代码如下。

● 对item类增加向左浮动设置，以及对margin设置修改，代码如下。

其余代码都不用修改，此时在浏览器中的外观效果如图1所示。

三、设置鼠标响应效果

接下来的任务就是设置鼠标的响应效果了。

① 首先增加链接文字在普通状态时的颜色设置，并取消下划线，代码如下。

② 对鼠标指针经过时的p标记进行设置。这样做的目的是使鼠标指针经过时．文字颜色和背景色发生变化，代码如下。

③ 下面就很简单了。对矩形上面的4个构成圆角的div在鼠标指针经过时的效果进行设置，只要设置背景色就可以了，代码如下。

这时在浏览器中的效果如图1所示。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表