不规则菜单

jsntghf

浏览: 2542457 次
性别:
来自: 苏州

最近访客更多访客>>

samhunglv

loginboot

yongjiucui

diabloaaa

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

html 不规则菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>不规则导航条</title>
        <style type="text/css">
            * {margin:0;padding:0;font:normal 12px/25px "宋体";}
            body {background:#FFF;text-align:center;}
            .Menu{width:806px;height:31px;margin:20px auto;position:relative;margin-top:20px;}
            .Menu .box1{display:block;width:6px;height:31px; position:absolute;top:0;left:0;background:transparent url(images/01.gif) no-repeat;}
            .Menu .box2{display:block;width:6px;height:31px; position:absolute;top:0;right:0;background:transparent url(images/05.gif) no-repeat;}

            .Menu ul {list-style:none;width:804px;height:29px;padding:1px;background:#F2F2F2 url(images/04.gif) repeat-x;overflow:hidden;margin-left:0px;}
            .Menu li {font-size:14px;font-weight:bold;float:left;width:117px;height:29px;text-align:center;margin:0 -10px;display:inline;}
            .Menu a {font-size:14px;font-weight:bold;color:#666; float:left;width:117px;height:29px;top:0;left:0;background:url(images/03.gif) center center no-repeat;}
            .Menu li.c {background:url(images/02.gif) 0 0 no-repeat}
            .Menu a:hover {color:#333;background:url(images/02.gif) no-repeat left bottom;width:117px;position:relative;}
            .Menu a.home{
                background-color:#f2f2f2;
            }
            .Menu a.home:hover{
                position:static;background-color:#FFF
            }
            .Menu a.None{width:21px;background:#f2f2f2;}
            .Menu a.None:hover{width:21px;background:#f2f2f2}
        </style>
    </head>
    <body>
        <div class="Menu">
            <span class="box1"><!--外框处理--></span>
            <span class="box2"><!--外框处理--></span>
            <ul>
                <li><a href="" title="菜单" class="home">首页</a></li>
                <li><a href="" title="菜单">菜单</a></li>
                <li><a href="" title="菜单">菜单</a></li>
                <li><a href="" title="菜单">菜单</a></li>
                <li class="c">菜单</li>
                <li><a href="" title="菜单">菜单</a></li>
                <li><a href="" title="菜单">菜单</a></li>
                <li><a href="" class="None"></a></li>
            </ul>
        </div>
    </body>
</html>

效果图：

demo.rar (3.7 KB)
下载次数: 5

分享到：

Nginx防盗链（三） | 二级树形菜单

2011-09-16 09:31
浏览 1321
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

不规则菜单

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

不规则菜单

评论

发表评论

相关推荐

密码输入延迟屏蔽

日历控件

渐变打分条

滚动新闻

网页配色

圆角文本框的实现

javascript加载xml，在chrome下失败的解决办法

可输入文本的下拉框

二级树形菜单

二级树形菜单

随机显示图片

滚动字幕效果

美化select

无图片圆角

设置滚动条的颜色

CSS细线表格

分页效果

FormTools

表单当前行高亮的实现

使用jQuery实现复选框全选和取消全选

最近访客更多访客>>