网站建设中纯 CSS响应式导航
在网站建设中响应式导航栏应该易于在任何设备上使用，并且无论在什么尺寸的屏幕上查看它都应该看起来很棒。在本文中，我们将向您展示如何仅使用 CSS 创建响应式导航栏。导航栏是任何网站上最重要的设计元素之一。它可以帮助用户浏览您的网站，也可以用来传达重要信息。
您需要做的第一件事是创建一个导航元素。这将是您的导航栏的容器。接下来，您需要创建一个 li 元素列表。这些将是导航栏中的单独链接。每个 li 元素都应该显示 inline-block 。这将确保链接水平显示，并且它们在屏幕上占据相同的空间。您还可以为 li 元素添加边距和填充。这将有助于控制链接之间的间距。默认情况下，链接的背景颜色为 #ccc 。但是，您可以通过添加 :hover 选择器来更改此设置。当鼠标悬停在链接上时，这将应用不同的背景颜色。您还可以使用 :active 选择器在单击链接时更改背景颜色。最后，您可以使用@media 屏幕和 (max-width: 767px) 规则在屏幕小于 767 像素时更改导航栏的布局。这将确保导航栏显示为单行链接，而不是多列布局。
演示中显示的响应式导航栏的代码如下：
nav { margin: 0; padding: 0; list-style: none; } nav > li { display: inline-block; margin: 0 10px; } nav > li:hover { background-color: #ddd; } nav > li.active { background-color: #fff; color: #000; } @media screen and (max-width: 767px) { nav > li { margin: 0; } nav > li:hover { background-color: #fff; } nav > li.active { background-color: #000; color: #fff; } }
CSS 导航栏示例
相关资讯
阿里云、腾讯云、华为云严选优质服务商
