HTML+CSS导航栏自适应方案

最新推荐文章于 2021-08-04 00:08:22 发布

captainslow667

最新推荐文章于 2021-08-04 00:08:22 发布

阅读量3.5k

点赞数 1

分类专栏： css 文章标签： html css

本文链接：https://blog.csdn.net/q549753590/article/details/105481666

版权

该博客探讨了如何使用HTML和CSS创建一个自适应的导航栏，详细介绍了在不同屏幕尺寸下保持导航栏功能性和视觉效果的方法，包括媒体查询的运用和布局调整。

摘要由CSDN通过智能技术生成

css文件


#header {
   
    background-color: #333;
    padding: 10px 10%;
}

/* 导航栏按钮 */
.btn {
   
    display: none;
    float:right;
    margin-top: 5px;
    border: 0;
    border-radius: 5px;
    width: 40px;
    height: 40px;
}
/* 文字Logo */
#header a.logo {
   
    float:left;
    font-weight: bold;
    font-size: 39px;
    line-height: 50px;
}

#header div.nav {
   
    height: 50px;
}

#header ul.nav-bar {
   
    list-style: none;
    float: right;
    line-height: 50px;
}
#header ul.nav-bar li {
   
    float:left;
    padding: 0 10px;
}

@media screen and (max-width: 768px){
   
    #header {
   
        padding: 10px 5%;
        height: 50px;
        overflow: hidden;
    }
    #header a.logo {
   
        line-heigh