网站介绍
这是一个基于CSS样式的响应式导航栏网站示例。该网站使用了CSS变量(custom properties)来定义主要的颜色和字体，并通过内联样式和类选择器进行样式设置。网站的主要导航栏使用了一个名为 “.wp-block-button__link” 的 CSS 类来创建。该类的样式包括颜色、背景色、边框半径、阴影、文本装饰、内边距和字体大小。
该网站使用了以下主要的CSS代码：
.icon {
width: 18px;
height: 18px;
vertical-align: -3px;
fill: currentColor;
overflow: hidden;
}
:root {
--Maincolor: #0490A0 !important;
--MaincolorHover: #0490A0 !important;
--fontSelectedColor: #0490A0 !important;
}
#nprogress .bar {
background: var(--Maincolor) !important;
}
这些代码定义了一些基本的CSS属性，如图标的大小、颜色和填充方式等。同时，还使用了一些自定义的CSS变量(var),以便在样式表中进行引用和修改。例如 --Maincolor 变量被用来定义主要的颜色，而 --fontSelectedColor 变量则被用来定义选中文本的颜色。这样可以在不同的页面或样式中方便地引用和修改这些变量，从而实现一致的样式效果。
这个网站示例展示了如何使用CSS变量和基本的CSS属性来创建具有一致性和可维护性的响应式导航栏。它为开发者提供了一个简洁而灵活的方式来设计和管理网站的样式，使得不同元素之间的风格保持一致。
