简单页面导航栏的媒体查询

The hang 土豆

已于 2022-08-16 15:57:28 修改

阅读量232

点赞数 1

文章标签：大数据 c语言 html5

于 2022-07-14 20:30:04 首次发布

本文链接：https://blog.csdn.net/LiHang1234567777/article/details/125792238

版权

简单页面导航栏的媒体查询

媒体查询很简单的！！！
代码如下

@media screen {
            
        }

例子：

先写一个导航栏

html代码如下

 <div class="box">
        <div class="nav">
            <a href="#">Home</a>
            <a href="#">首页</a>
            <a href="#">时间</a>
            <a href="#">尾页</a>
            <a href="#">年限</a>
        </div>
    </div>

css代码如下

 .box {
            width: 100%;
            height: 30px;
            background: red;
        }
        
        .nav {
            margin: 0 auto;
            width: 1200px;
            /* height: 30px; */
            background: green;
            /* overflow: hidden; */
        }
        
        .nav a:first-child {
            font-size: 20px;
            margin-right: 20px;
        }
        
        .nav a {
            color: white;
            display: inline-block;
            width: 150px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
        }
        
        .nav a:not(:first-child):hover {
            color: black;
            background: yellow;
        }

然后你就得到这样图片

重点来了

媒体查询样式

 /* 媒体查询 */
        
        @media screen and (max-width:600px) {
            .nav {
                width: 100%;
            }
            .nav a {
                float: none;
                width: 100%;
                text-align: left;
                padding-left: 20px;
            }
        }

效果如下