[DivCss]用图片实现圆角菜单！

网页当中圆角挺好看的，个人也比较喜欢。
于是，在“发粪图强”的几天后~~~ 终于完成了自己还比较满意的圆角代码。

圆角菜单

所用材料：一张图片，一段CSS，一个<a>标签
实现原理：<a>当中一定要有个<span标签，把<a>和<span>都飘浮，再加上背景。

首先，我们准备一张图片，注意：图片的尽量宽一点，以适应不同的宽度。图片如下：



先看看我们的html代码，是不是很简单：

<a class="menu" href=""><span>菜单1</span></a>

 

我们再看看css样式：

a.menu
{
    float:left; background:#ffffff url(menu_bg.gif);    /* 飘浮，背景 */
    height:25px; line-height:25px;      /* 高度 */
    font-size:14px; font-weight:bold;   /* 菜单的字体 */
    padding-left:5px; margin-right:5px; /* 重要：padding-left, margin-right是要把显示出来 */
    cursor:pointer;     /* float后，<a>鼠标放上去，就不是“手”了，定一下 */
}
a.menu span
{
    float:left;
    background:#ffffff url(menu_bg.gif) right;
    padding-right:5px;  /* padding-right是为了美观，右边空一点 */
}

看看最终效果吧：


发挥你的想象力吧！！！！！！！！！！！！！！！！！！！！！



测试通过：IE6/7/8, Chrome, Firefox, Opera, Safair


本文源码下载：https://files.cnblogs.com/Kagilo/divcss.menu.zip


作者：卡吉洛(Kagilo)
转载请声明！