css带logo的导航栏 |css 下划线

/* CSS代码 */
.header {
background-color: #333;
height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
color: white;
font-size: 24px;
font-weight: bold;
margin-left: 20px;
text-transform: uppercase;
}
.logo img {
width: 40px;
height: 40px;
margin-right: 10px;
}
.nav {
display: flex;
justify-content: flex-end;
margin-right: 20px;
}
.nav a {
color: white;
font-size: 18px;
margin-left: 30px;
text-decoration: none;
text-transform: uppercase;
}

在这个示例中，大家首先创建了一个名为“header”的类来定义整个导航栏的样式。大家使用“flex”属性来使其内容水平居中，并使用“background-color”属性设置其背景颜色。

接下来，大家添加了一个名为“logo”的类来定义logo样式。大家使用“color”属性和“font-size”属性来设置logo的字体颜色和大小，使用“text-transform”属性使其转化为大写字母，并使用“margin-left”设置其左侧的边距。此外，大家还在“logo”类下嵌套了一个img元素，使用“width”和“height”属性来设置其大小，使用“margin-right”属性设置其右侧的空白边距。

最后，大家又添加了一个名为“nav”的类来定义导航栏菜单的样式。大家使用“display”属性使其水平排列，使用“justify-content”属性将菜单内容靠右对齐，并使用“margin-right”属性设置其右侧的边距。在“nav”类下的“a”元素中，大家使用“color”属性和“font-size”属性来设置菜单项文本的颜色和大小，使用“margin-left”属性设置每个菜单项的左侧空白边距，并使用“text-decoration”属性和“text-transform”属性来去除链接下划线，并将其转化为大写字母。

这样，大家就成功创建了一个带有logo的CSS导航栏。通过上述示例，大家可以看到，在网页制作中，合理使用CSS可以轻松地实现各种样式和布局效果。