css 导航栏随页面缩小 |css好看网站模板

.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4CAF50;
color: white;
}

以上就是一个基本的CSS导航栏代码。接下来，大家需要对它进行简单的修改，使其能够随着页面缩小而自适应。

@media screen and (max-width: 600px) {
.navbar a {
float: none;
display: block;
}
}

以上代码将会使导航栏在页面宽度小于600像素时，将超出部分收起来，并且将导航栏中的链接设置为块级元素，以便于在竖直方向上排列。

现在，您已经学会了如何让CSS导航栏随着页面缩小而自适应。希望这篇文章能够对您有所帮助。