自己写的一个导航,CSS+UL

CSS样式

<style type="text/css">

        ul{list-style: none;font-size: 12px;}

        ul li{float: left;line-height: 33px;text-align: center;letter-spacing:1px; margin-left:3px; font-family:@微软雅黑; font-weight:bold; }

        ul li a{color: #fff;display: block;height: 33px; text-decoration: none; padding-left:15px; padding-right:15px;}

        ul li a:hover {color: #fff;display: block; height: 33px;text-decoration: none;background-color: #E06513; padding-left:15px; padding-right:15px;}

         .select{ background-color: #E06513;}

         .test

         {

             background-color: #555555; height:33px; min-width:700px;

             -moz-border-radius-topright: 8px;

    -moz-border-radius-bottomright: 8px;

             -webkit-border-top-left-radius: 8px;

    -webkit-border-top-right-radius: 8px;

             }

         .bom{background-color: #E06513; height:3px;min-width:600px;}

    </style>

说明:

.test里设置了,div的右上角和左上角为圆角,但在IE中不兼容,欢迎高手给意见。

javascript脚本,控制点击之后,样式的改变

<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("li").each(function (index) {

                $(this).click(function () {

                    $("li").removeClass("select");

                    $("li").eq(index).addClass("select");                    

                });

            });

        });

    </script>

HTML

HTML Code
<body>

    <form id="form1" runat="server">

    <div class="test">

    <ul>

        <li class="select"><a href="LoadTree.aspx" target="iframecon">区域(机柜/设备)</a></li>

        <li><a href="SheBeiDuanKou.aspx" target="iframecon">设备端口</a></li>

        <li><a href="TiaoXian.aspx" target="iframecon">跳线维护</a></li>

        <li><a href="XinXiDian.aspx" target="iframecon">信息点</a></li>        

        <li><a href="#">联系我们</a></li>

    </ul>

    </div>

    <div class="bom"></div>



    <iframe name="iframecon" id="iframecon" src="LoadTree.aspx" width="100%" onload="Javascript:SetWinHeight(this)" scrolling="no" frameborder="0"></iframe>

    </form>

    <script type="text/javascript" language="javascript">

        function SetWinHeight(obj) {

            //控制iframe的高度,自动

            var win = obj;

            if (document.getElementById) {

                if (win && !window.opera) {

                    if (win.contentDocument && win.contentDocument.body.offsetHeight)

                        win.height = win.contentDocument.body.offsetHeight;

                    else if (win.Document && win.Document.body.scrollHeight)

                        win.height = win.Document.body.scrollHeight;

                }

            }

        } 

</script> 

</body>

效果截图

你可能感兴趣的:(css)