水平导航菜单

最新推荐文章于 2024-03-16 09:54:40 发布

天使小宝

最新推荐文章于 2024-03-16 09:54:40 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML

本文链接：https://blog.youkuaiyun.com/myjlvzlp/article/details/8257882

HTML 专栏收录该内容

14 篇文章

订阅专栏

本文展示了如何创建一个具有多种颜色的水平导航菜单，并详细介绍了如何在IE6浏览器上实现兼容性，确保用户体验不受影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单的水平导航菜单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>简单的水平导航菜单</title>
        <style>
            #menu{
                margin: 0;
                padding: 0;
                width: 610px;
                list-style-type: none;
                font: 14px Arial;
            }
            #menu li{
                float: left;
                width: 150px;
                padding: 0;
                margin: 0 1px 0 0;
            }
            #menu li dl{
                margin: 0;
                padding: 0 0 10px 0;
                background: #cb6 url(images/bottom.gif) no-repeat bottom left;
            }
            #menu li dt{
                margin: 0;
                padding: 5px;
                text-align: center;
                border-bottom: 1px solid #b00;
                background: #ed8 url(images/top.gif) no-repeat top left;
            }
            #menu li dt a{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dt a:visted{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dd{
                margin: 0;
                padding: 0;
                color: #fff;
                background: #47a;
            }
            #menu li dd.last{
                border-bottom: 1px solid #b00;
            }
            #menu li dd a{
                display: block;
                color: #fff;
                text-decoration: none;
                padding: 4px 5px 4px 20px;
                background: #47a url(images/arrow.gif) no-repeat 10px 10px;
            }
            #menu li dd{
                display: none;
            }
            #menu li:hover dd{
                display:block;
            }
            #menu li dd a:hover{
                background: #147;
                color: #9cf;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>
                <dl>
                    <dt><a href="#">Artech Studio</a></dt>
                    <dd><a href="#">Web Dev</a></dd>
                    <dd><a href="#">Web Design</a></dd>
                    <dd><a href="#">Books</a></dd>
                    <dd class="last"><a href="#">Contact Us</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt><a href="#">Artech Store</a></dt>
                    <dd><a href="#">Books</a></dd>
                    <dd><a href="#">DVDs</a></dd>
                    <dd><a href="#">Movies</a></dd>
                    <dd class="last"><a href="#">Service</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt><a href="#">Artech Achi</a></dt>
                    <dd><a href="#">Landscape</a></dd>
                    <dd><a href="#">Plan</a></dd>
                    <dd><a href="#">Design</a></dd>
                    <dd class="last"><a href="#">Maps</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt><a href="#">Artech Science</a></dt>
                    <dd><a href="#">Physics</a></dd>
                    <dd><a href="#">Maths</a></dd>
                    <dd><a href="#">Chemistry</a></dd>
                    <dd class="last"><a href="#">Courses</a></dd>
                </dl>	
            </li>
        </ul>
    </body>
</html>

多彩的水平导航菜单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>多彩的水平导航菜单</title>
        <style>
            #menu{
                margin: 0;
                padding: 0;
                width: 610px;
                list-style-type: none;
                font: 14px Arial;
            }
            #menu li{
                float: left;
                width: 150px;
                padding: 0;
                margin: 0 1px 0 0;
            }
            #menu li dl{
                margin: 0;
                padding: 0 0 10px 0;
                background: #cb6 url(images/bottom.gif) no-repeat bottom left;
            }
            #menu li dt{
                margin: 0;
                padding: 5px;
                text-align: center;
                border-bottom: 1px solid #b00;
            }
            #menu li dt a{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dt a:visted{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dd{
                margin: 0;
                padding: 0;
                color: #fff;
                background: #47a;
            }
            #menu li dd.last{
                border-bottom: 1px solid #b00;
            }
            #menu li dd a{
                display: block;
                color: #fff;
                text-decoration: none;
                padding: 4px 5px 4px 20px;
                background: #47a url(images/arrow.gif) no-repeat 10px 10px;
            }
            #menu li dd{
                display: none;
            }
            #menu li:hover dd{
                display:block;
            }
            #menu li dd a:hover{
                background: #147;
                color: #9cf;
            }
            #menu li dt.orange{
                background: #fa5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.yellow{
                background: #ee5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.green{
                background: #5e5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.blue{
                background: #5cf url(images/top.gif) no-repeat top left;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>
                <dl>
                    <dt class="orange"><a href="#">Artech Studio</a></dt>
                    <dd><a href="#">Web Dev</a></dd>
                    <dd><a href="#">Web Design</a></dd>
                    <dd><a href="#">Books</a></dd>
                    <dd class="last"><a href="#">Contact Us</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt class="yellow"><a href="#">Artech Store</a></dt>
                    <dd><a href="#">Books</a></dd>
                    <dd><a href="#">DVDs</a></dd>
                    <dd><a href="#">Movies</a></dd>
                    <dd class="last"><a href="#">Service</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt class="green"><a href="#">Artech Achi</a></dt>
                    <dd><a href="#">Landscape</a></dd>
                    <dd><a href="#">Plan</a></dd>
                    <dd><a href="#">Design</a></dd>
                    <dd class="last"><a href="#">Maps</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt class="blue"><a href="#">Artech Science</a></dt>
                    <dd><a href="#">Physics</a></dd>
                    <dd><a href="#">Maths</a></dd>
                    <dd><a href="#">Chemistry</a></dd>
                    <dd class="last"><a href="#">Courses</a></dd>
                </dl>	
            </li>
        </ul>
    </body>
</html>

兼容IE6的多彩的水平导航菜单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>兼容IE6的多彩的水平导航菜单</title>
        <style>
            #menu{
                margin: 0;
                padding: 0;
                width: 610px;
                list-style-type: none;
                font: 14px Arial;
            }
            #menu li{
                float: left;
                width: 150px;
                padding: 0;
                margin: 0 1px 0 0;
            }
            #menu li dl{
                width: 150px;
                margin: 0;
                padding: 0 0 10px 0;
                background: #cb6 url(images/bottom.gif) no-repeat bottom left;
            }
            #menu li dt{
                margin: 0;
                padding: 5px;
                text-align: center;
                border-bottom: 1px solid #b00;
            }
            #menu li dt a{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dt a:visted{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dd{
                margin: 0;
                padding: 0;
                color: #fff;
                background: #47a;
            }
            #menu li dd.last{
                border-bottom: 1px solid #b00;
            }
            #menu li dd a{
                height: 1em;
                display: block;
                color: #fff;
                text-decoration: none;
                padding: 4px 5px 4px 20px;
                background: #47a url(images/arrow.gif) no-repeat 10px 10px;
            }
            #menu li dd{
                display: none;
            }
            #menu li:hover dd{
                display:block;
            }
            #menu li a:hover dd{
                display:block;
            }
            #menu li:hover{
                border: 0;
            }
            #menu li a:hover{
                border: 0;
            }
            #menu li dd a:hover{
                background: #147;
                color: #9cf;
            }
            #menu li dt.orange{
                background: #fa5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.yellow{
                background: #ee5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.green{
                background: #5e5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.blue{
                background: #5cf url(images/top.gif) no-repeat top left;
            }
            #menu table{
                border-collapse: collapse;
                padding: 0;
                margin: -1px;
                font-size: 1em;
            }
            #menu li a[href='#nogo']{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="orange"><a href="#">Artech Studio</a></dt>
                    <dd><a href="#">Web Dev</a></dd>
                    <dd><a href="#">Web Design</a></dd>
                    <dd><a href="#">Books</a></dd>
                    <dd class="last"><a href="#">Contact Us</a></dd>
                </dl>	
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="yellow"><a href="#">Artech Store</a></dt>
                    <dd><a href="#">Books</a></dd>
                    <dd><a href="#">DVDs</a></dd>
                    <dd><a href="#">Movies</a></dd>
                    <dd class="last"><a href="#">Service</a></dd>
                </dl>	
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="green"><a href="#">Artech Achi</a></dt>
                    <dd><a href="#">Landscape</a></dd>
                    <dd><a href="#">Plan</a></dd>
                    <dd><a href="#">Design</a></dd>
                    <dd class="last"><a href="#">Maps</a></dd>
                </dl>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="blue"><a href="#">Artech Science</a></dt>
                    <dd><a href="#">Physics</a></dd>
                    <dd><a href="#">Maths</a></dd>
                    <dd><a href="#">Chemistry</a></dd>
                    <dd class="last"><a href="#">Courses</a></dd>
                </dl>	
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
    </body>
</html>

图片在对应相册中。