web横向菜单

fp_moon

浏览: 981740 次
性别:
来自: 深圳

最近访客更多访客>>

kof98765

gxpcw

elashu

duwu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Web IE Firefox JavaScript CSS

需要注意的地方见注释：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            html,body {
                margin: -12px 0 0 0;
                padding: 0;
                border: 0;
               width:100%;
               height:100%;
            }
            #wrapper{
            margin:0 auto;
              padding:0;
             width:80%;
            height:100%;
            }
            #top {
            margin: 0 auto;
                width: 100%;
                height: 100px;
                background-color: #ddd;
                filter: alpha(opacity = 70);       /*IE透明*/
              -moz-opacity:0.7;                    /*Mozilla早期版本透明*/
                opacity: 0.7;                        /*firefox透明*/
                text-align: center;
               padding:0px;
               border-bottom:5px solid red;
            }

            #nav {
                background: #dadada;
                width: 100%;
                height: 50px;
                line-height: normal;
                border-bottom: 2px solid #804040;
                font-size: large;
                margin: 0 auto;
                padding: 0px;

                overflow:hidden;
            }

            #nav ul {
                margin: 0px 0px 0px 50px;
                list-style-type: none;
                line-height: 50px;                                   /*设定UL行高*/

                white-space:nowrap;                             /*文本不换行*/
            }

            #nav ul li {
                float: left;
                margin: -1px;
                border: 1px solid #c0c0c0;
                background: #abd3be;
                border-right-width: 3px;
            }

            #nav ul a {
                text-decoration: none;
                padding: 15px 15px;                          /*确定a标标签的大小*/
                color: #408080;
                white-space: nowrap;
              star: expression(onfocus=this.blur); /*缺除链接虚线框，只有IE能识别，所以直接加在a标签上了*/
                border:1px solid #c0c0c0;;
            }

            #nav a:hover {                                       /*设置动态效果*/
                color: #fff;                                         /*设定前景颜色，也可以在此时设定自己想要的背景颜色*/
                border-right-color:#008040;
               border-left-color:#808080;
                border-top: 1px solid #400080;
                border-bottom: 1px solid #400080;
            }
   #sign{
    filter: alpha(opacity = 50);
    -moz-opacity:0.5;
    opacity: 0.5;
    width:88px;
    height:50px;
    background:#abd3be;
    position:absolute;
    left:190px;
    top:81px;
    z-index:6;
    display:none;
   }
        </style>
        <script type="text/javascript">
        </script>
    </head>
    <body>
    <div id="wrapper">
        <div id="top">
            <h1>logo</h1>
        </div>
        <div id="nav">
            <ul>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 1"><span>Link 1</span></a>
                </li>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 2"><span>Link 2</span></a>
                </li>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 3"><span>Link 3</span></a>
                </li>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 4"><span>Long 4</span></a>
                </li>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 5"><span>Link 5</span></a>
                </li>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 6"><span>Link 6</span></a>
                </li>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 7"><span>Link 7</span></a>
                </li>
                <li>
                    <a href="#" onfocus="this.blur()" title="Link 8"><span>Link 8</span></a>
                </li>
            </ul>
        </div>
</div>
<div id="sign"></div>
    </body>
</html>