响应式菜单

最新推荐文章于 2024-05-10 09:51:23 发布

花花最美腻

最新推荐文章于 2024-05-10 09:51:23 发布

阅读量1.1k

点赞数 1

分类专栏：响应式文章标签：响应式菜单导航

本文链接：https://blog.csdn.net/qq_38912819/article/details/80543085

版权

响应式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>响应式</title>
    <style type="text/css">
        body
        {
            margin: 0 auto;
        }
        ul
        {
            padding:0;
            margin:0;
            }
        a
        {
            text-decoration: none;
            color: white;
            font-size: 14pt;
            padding: 0 3px;
            display: block;
        }
        .menu
        {
            background: red;
        }
        
        .menu li
        {
            display: block;
            float: left;
            margin: 3px;
            background: grey;
            width: 140px;
            text-align: center;
            color: white;
            font-size: 9pt;
        }
        #logo
        {
            background: white;
            width: 230px;
        }
        #logo a
        {
            color: Gray;
            font-size: 35pt;
            background: white;
        }
        #toplogo
        {
            display: none;/*平时隐藏*/
            margin: 0 auto;
            text-align: center;
        }
        #toplogo a
        {
            color: Black;
            font-size: 35pt;
        }
        @media only screen and (min-width: 585px) and (max-width: 823px)
        {
            #logo
            {
                display: none;
            }
            #toplogo
            {
                display: block;
                width: 100%;
            }
            .menu
            {
                width: 585px;/*在中间显示 text-align: center;*/
                background: red;
            }
        }
        @media only screen and (max-width: 585px)
        {
            #logo
            {
                display: none;
            }
            #toplogo
            {
                display: block;
                width: 100%;
            }
            .menu
            {
                width: 100%;
            }
            .menu li
            {
                width: 100%;
            }
        
        }
    </style>
</head>
<body>
    <ul class="menu">
        <div id="toplogo">
            <a href="#">导航</a></div>
        <li><a href="#">课程大厅</a><br />
            IT课程都在这里啦</li>
        <li><a href="#">学习中心</a><br />
            好好学习，天天向上</li>
        <li id="logo"><a href="#">导航</a></li>
        <li><a href="#">个人中心</a><br />
            个人信息 修改密码</li>
        <li><a href="#">关于我们</a><br />
            单位地址 应聘信息</li>
    </ul>
</body>
</html>

花花最美腻

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式菜单

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt; &lt
复制链接

扫一扫

专栏目录