Html 导航栏中的用户界面

我是HTML/CSS的初学者，因此在尝试在导航栏上集成用户界面时遇到了如下问题：。 我不知道如何设计它，我应该使用哪些标签，以及如何放置用户的图标

/*为顶部导航添加背景色*/
托普纳夫先生{
背景色：#e61a26；
溢出：隐藏；
位置：相对位置；
排名：0；
宽度：100%；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*向活动/当前链接添加颜色*/
.topnav a.active{
背景色：#f1f3f2；
颜色：#000；
}
/*将灰色右边框添加到除最后一项（最后一个子项）之外的所有a项*/
a{
右边框：1px实心#fff；
}
a:最后一个孩子{
边界权：无；
}

欢迎用户名>

我试图用flexbox解决这个问题：

还有一些特殊情况，如最后一个边界，它是不可见的。为此，请使用

：last child

选择器将其从最后一项中删除。要使链接的样式看起来像普通文本，请使用

text-decoration:none

对于用户图像，您可以使用

img

标记。设置自定义

宽度
和
高度
后，使用和
边框半径：50%使其自动成为一个圆

只要研究一下flexbox指南，你就会发现它并不难。希望这有帮助


正文{
保证金：0；
}
navbar先生{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
对齐项目：居中；
背景色：红色；
}
.navbar_uu左，
.navbar_uu对{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
}
.导航栏项目{
填充：20px；
颜色：白色；
右边框：1px纯白；
文字装饰：无；
}
.navbar_uu项：最后一个子项{
边界权：无；
}
.navbar_uu项--活动{
背景色：白色；
颜色：黑色；
}
.navbar\uuu用户映像{
宽度：45px；
高度：45px；
边界半径：50%；
}
.navbar__用户图像，
.navbar\uuu用户注销{
右边距：15px；
}

用户注销
因此，经过几次尝试后，我成功了，这非常简单，下面是我的代码：


/*为顶部导航添加背景色*/
托普纳夫先生{
背景色：#e61a26；
溢出：隐藏；
位置：相对位置；
排名：0；
宽度：100%；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
/*更改悬停时链接的颜色*/
.topnav a:悬停{
背景色：#ddd；
颜色：黑色；
}
/*向活动/当前链接添加颜色*/
.topnav a.active{
背景色：#f1f3f2；
颜色：#000；
}
/*将灰色右边框添加到除最后一项（最后一个子项）之外的所有a项*/
a{
右边框：1px实心#fff；
}
.工作订单链接{
边界权：无；
}
a:最后一个孩子{
边界权：无；
}

欢迎使用用户名
请向我们提供您的CSSI也没有成功，我不知道如何在我尝试过的导航栏上放置一个框和标签。但我不希望它是一个链接，所以我只要求标签，可以插入导航栏上的框。感谢you@MrBuggy给你@保利：嘿：）我成功了！检查我最后的答案