滑动门水平导航条和三层滑动门导航条

最新推荐文章于 2021-06-03 01:49:50 发布

天使小宝

最新推荐文章于 2021-06-03 01:49:50 发布

阅读量1.5k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/myjlvzlp/article/details/8253775

版权

HTML 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

滑动门水平导航条

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>滑动门水平导航条</title>
        <style>
            #menu {
                font-family:Arial;
                font-size:14px;
                margin:0 auto 0 0;
            }
            #menu ul{
                padding: 0 0 0 8px;
                margin: 0;
                list-style: none;
                height: 35px;
                background:url(images/under.gif);
            }
            #menu ul li{
                float: left;
            }
            #menu ul li a{
                display: block;
                line-height: 35px;
                color: #ddd;
                text-decoration: none;
                padding: 0 0 0 14px;
            }
            #menu ul li a:hover{
                 background:url(images/hover.gif);
            }
            #menu ul li a b{
                display: block;
                padding: 0 14px 0 0;
            }
            #menu ul li a:hover b{
                background:url(images/hover.gif) no-repeat right top;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li><a href="#"><b> Home </b></a> </li>
                <li><a href="#"><b> Contact Us </b></a></li>
                <li><a href="#"><b> Web Dev </b></a></li>
                <li><a href="#"><b> Map </b></a></li>
            </ul>
        </div>
    </body>
</html>

三层滑动门导航条

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>三层滑动门技术</title>
        <style>
            #menu ul{
                font-family: Arial;
                font-size: 14px;
                padding: 0 0 0 8px;
                margin: 0 auto;
                list-style: none;
                height: 35px;
                white-space: nowrap;
            }
            #menu ul li{
                float: left;
                margin: 0 2px;
            }
            #menu ul li a{
                display: block;
                float: left;
                line-height: 35px;
                color: #666;
                text-decoration: none;
                padding: 0 0 0 14px;
                background: url("images/background.gif");
            }
            #menu ul li a b{
                display: block;
                padding: 0 14px 0 0;
                background: url("images/background.gif") no-repeat right top;
            }
            #menu ul li a:hover{
                color : #fff;
                background: url("images/background.gif") no-repeat left center;
            }
            #menu ul li a:hover b{
                background: url("images/background.gif") no-repeat right center;
            }
            #menu ul li.current a{
                color : #fff;
                background: url("images/background.gif") no-repeat left bottom;
            }
            #menu ul li.current a b{
                background: url("images/background.gif") no-repeat right bottom;
            }
            #menu ul li.current a{
                background: url("images/background.gif") no-repeat left bottom;
                cursor: default;
            }
             #menu ul li.current a b{
                background: url("images/background.gif") no-repeat right bottom;
            }
        </style>
    </head>
    <body>
        <div id="menu">
            <ul>
                <li class="current"><a href="#"><b> Home </b></a> </li>
                <li><a href="#"><b> Contact Us </b></a></li>
                <li><a href="#"><b> Web Dev </b></a></li>
                <li><a href="#"><b> Map </b></a></li>
            </ul>
        </div>
    </body>
</html>