web前端之CSS设计指南三：界面组件（菜单）

最新推荐文章于 2024-04-15 04:45:37 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2024-04-15 04:45:37 发布

阅读量591

点赞数 1

分类专栏： web前端 css CSS设计指南文章标签： css web前端

本文链接：https://blog.csdn.net/u014785563/article/details/53542104

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

CSS设计指南

4 篇文章 0 订阅

订阅专栏

web前端之CSS设计指南三：界面组件（菜单）

纵向菜单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>纵向菜单</title>
    <style type="text/css">
    *{
        /* 去掉默认的内边距和外边距 */
        margin: 0;
        padding: 0;
    }
    nav{
        margin: 50px;
        width: 150px;
    }
    .list1 ul{
        border: 1px solid #f00;
        border-radius: 3px;
        padding: 5px 10px 3px;
    }
    .list1 li{
        list-style-type: none;
    } 
    /* "非首字符"选择符 */
    .list1 li + li a{
        border-top: 1px solid #f00;
    }
    .list1 a{
        display: block;
        padding: 3px 10px;
        text-decoration: none;
        text-align: center;
        font: 20px Exo,helvetica,arial,sans-serif;
        font-weight: 400;
        color: #000;
        background: #ffed53;
    }
    .list1 a:hover{
        color: #069;
    }
    </style>
</head>
<body>
    <nav class="list1">
        <ul>
            <li>
                <a href="#">Alter1</a>
            </li>
            <li>
                <a href="#">Alter2</a>
            </li>
            <li>
                <a href="#">Alter3</a>
            </li>
            <li>
                <a href="#">Alter4</a>
            </li>
        </ul>
    </nav>
</body>
</html>

横向菜单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>纵向菜单</title>
    <style type="text/css">
    *{
        /* 去掉默认的内边距和外边距 */
        margin: 0;
        padding: 0;
    }
    .list1 ul{
        /*强制ul包括浮动的li元素*/
        overflow: hidden;
    }
    .list1 li{
        float: left;
        list-style-type:none; 
    } 
    .list1 a{
        display: block;
        padding: 0px 16px;
        text-decoration: none;
        color: #999;

    }
    /* "非首字符"选择符 */
    .list1 li + li a{
        border-left: 1px solid #aaa;
    }
    .list1 a:hover{
        color: #555;
    }
    </style>
</head>
<body>
    <nav class="list1">
        <ul>
            <li>
                <a href="#">Alter1</a>
            </li>
            <li>
                <a href="#">Alter2</a>
            </li>
            <li>
                <a href="#">Alter3</a>
            </li>
            <li>
                <a href="#">Alter4</a>
            </li>
        </ul>
    </nav>
</body>
</html>

下拉菜单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>下拉菜单</title>
    <style type="text/css">
    .multi_drop_menu{
        font: 1em helvetica,arial,sans-serif;
    }
    .multi_drop_menu a{
        display: block;
        color: #555;
        background: #eee;
        padding: .2em 1em;
        border-width: 3px;
        border-color: transparent;
    }
    .multi_drop_menu a:hover{
        color: #fff;
        background: #aaa;
    }
    .multi_drop_menu a:active{
        background: #fff;
        color: #ccc;
    }
    .multi_drop_menu *{
        margin: 0;
        padding: 0;
    }
    .multi_drop_menu ul{
        float: left;
    }
    .multi_drop_menu li{
        float: left;
        list-style-type: none;
        position: relative;
    }
    .multi_drop_menu li a{
        display: block;
        border-right-style: solid;
        /*背景值出现在内边距后面*/
        background-clip:padding-box; 
        text-decoration: none;
    }
    .multi_drop_menu li:last-clid a{
        border-right-style: none;
    }
    /*二级菜单*/

    .multi_drop_menu li li a{
        border-right-style: none;
        border-top-style: solid;
    }
    .multi_drop_menu li ul{

        display: none;
        width: 9em;
        position: absolute;
        left: 0;
        top: 100%;
    }
    .multi_drop_menu li:hover > ul{
        display: block;
    }
    .multi_drop_menu li li{
        float: none;
    }
    .multi_drop_menu li li ul{
        position: absolute;
        left: 100%;
        top: 0;
        display: none;
    }
    </style>
</head>
<body>
    <nav class="multi_drop_menu">
        <!-- 一级开始 -->
        <ul>
            <li><a href="#">Power</a></li>
            <li><a href="#">Money</a></li>
            <li><a href="#">Love</a></li>
            <li><a href="#">Fame</a>
                <!-- 二级开始 -->
                <ul>
                    <li><a href="#">Sports Star</a></li>
                    <li><a href="#">Movie Star</a></li>
                    <li><a href="#">Rock Star</a>
                        <ul>
                            <!-- 三级开始 -->
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                        </ul>
                        <!-- 三级结束 -->
                    </li>
                </ul>
                <!-- 二级结束 -->

            </li>
        </ul>
        <!-- 一级结束-->
    </nav>
</body>
</html>