如何在CSS和HTML上排列文本的顺序
我想知道如何在我的网站上安排文本的顺序。在下面附上的图片中，我想让文本以不同的顺序显示，并更改文本之间的间距 我想把它改为“关于工作的简历”而不是“关于工作的简历” 另外，我稍后会添加到简历的适当链接 谢谢大家!如何在CSS和HTML上排列文本的顺序,html,css,Html,Css,我想知道如何在我的网站上安排文本的顺序。在下面附上的图片中，我想让文本以不同的顺序显示，并更改文本之间的间距 我想把它改为“关于工作的简历”而不是“关于工作的简历” 另外，我稍后会添加到简历的适当链接 谢谢大家! HTML <body> <div class="page-wrapper"> <div class="home-page-wrapper"> <div id="navbar"> <a href="ind
HTML
<body>
<div class="page-wrapper">
<div class="home-page-wrapper">
<div id="navbar">
<a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
<a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 1000px">Work</a>
<a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
<a href="link" target="_blank" class="link, navbar-item" id="resume-navbar-item" style="margin-right": 800px">Resume</a>
</div>
CSS
#navbar {
width: 100%;
height: 100%;
font-family: 'Mukta', sans-serif;
}
.navbar-item {
display: inline-block;
margin-top: 40px;
margin-left: 45px;
text-decoration: none;
padding-bottom: 3px;
transition: .2s linear;
color: #3f3f3f;
font-size: 18px;
}
.navbar-item: hover {
border-bottom: 1.5px solid currentColor;
cursor: pointer;
transition: .2s linear;
}
#current-navbar-item {
color: #3f3f3f;
border-bottom: 2px solid currentColor;
line-height: 15px;
}
#work-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 40px;
z-index: 5;
line-height: 15px;
}
#about-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 0.1em;
z-index: 5;
}
#resume-navbar-item {
color: #3f3f3f;
line-height: 15px;
float:right;
margin-right: 0.1em;
z-index: 5;
}
HTML
CSS
#导航栏{
宽度：100%；
身高：100%；
字体系列：“Mukta”，无衬线；
}
.导航栏项目{
显示：内联块；
边缘顶端：40px；
左边距：45像素；
文字装饰：无；
垫底：3件；
过渡：.2s线性；
颜色：#3f3f；
字号：18px；
}
.navbar项：悬停{
边框底部：1.5px纯色；
光标：指针；
过渡：.2s线性；
}
#当前导航栏项{
颜色：#3f3f；
边框底部：2倍纯色；
线高：15px；
}
#工作导航栏项{
颜色：#3f3f；
线高：15px；
浮动：对；
右边距：40px；
z指数：5；
线高：15px；
}
#关于导航栏项目{
颜色：#3f3f；
线高：15px；
浮动：对；
右边距：0.1米；
z指数：5；
}
#恢复导航栏项{
颜色：#3f3f；
线高：15px；
浮动：对；
右边距：0.1米；
z指数：5；
}
显示：flex顺序#导航栏{
宽度：100%；
身高：100%；
字体系列：“Mukta”，无衬线；
显示器：flex；
证明内容：之间的空间；
}
.对{
证明内容：柔性端；
显示器：flex；
右边距：40px；
}
.导航栏项目{
显示：内联块；
边缘顶端：40px；
左边距：45像素；
文字装饰：无；
垫底：3件；
过渡：.2s线性；
颜色：#3f3f；
字号：18px；
}
.navbar项：悬停{
边框底部：1.5px纯色；
光标：指针；
过渡：.2s线性；
}
#当前导航栏项{
颜色：#3f3f；
边框底部：2倍纯色；
线高：15px；
}
#工作导航栏项{
颜色：#3f3f；
线高：15px；
z指数：5；
线高：15px；
顺序：1；/*这是第一个*/
}
#关于导航栏项目{
颜色：#3f3f；
线高：15px；
z指数：5；
顺序：2；/*这是第二个*/
}
#恢复导航栏项{
颜色：#3f3f；
线高：15px；
浮动：对；
z指数：5；
顺序：3；/*这是第三个*/
}可以使用
显示：flex顺序#导航栏{
宽度：100%；
身高：100%；
字体系列：“Mukta”，无衬线；
显示器：flex；
证明内容：之间的空间；
}
.对{
证明内容：柔性端；
显示器：flex；
右边距：40px；
}
.导航栏项目{
显示：内联块；
边缘顶端：40px；
左边距：45像素；
文字装饰：无；
垫底：3件；
过渡：.2s线性；
颜色：#3f3f；
字号：18px；
}
.navbar项：悬停{
边框底部：1.5px纯色；
光标：指针；
过渡：.2s线性；
}
#当前导航栏项{
颜色：#3f3f；
边框底部：2倍纯色；
线高：15px；
}
#工作导航栏项{
颜色：#3f3f；
线高：15px；
z指数：5；
线高：15px；
顺序：1；/*这是第一个*/
}
#关于导航栏项目{
颜色：#3f3f；
线高：15px；
z指数：5；
顺序：2；/*这是第二个*/
}
#恢复导航栏项{
颜色：#3f3f；
线高：15px；
浮动：对；
z指数：5；
顺序：3；/*这是第三个*/
}