我正在开发一个 Web 项目，但在定位 H2 标题（“Esportes”和“Economia”）作为各自部分的标题时遇到了问题。我尝试将 h2 放入每个类别（体育和经济）中，但没有得到预期的结果。请问你们能帮我吗？
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu portal de notícias</title>
<!--<link rel="stylesheet" href="./main.css" />-->
<style>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Meu código abaixo*/
header {
display: flex;
justify-content: space-between;
padding: 15px;
}
header h1 {
font-size: 2rem;
font-weight: 500;
color: steelblue;
}
header nav ul {
display: flex;
margin-right: 100px;
}
header nav ul li a {
margin-right: 10px;
text-decoration: none;
font-size: 1.5rem;
padding: 5px;
border: 2.5px solid steelblue;
color: steelblue;
}
header nav ul li a:hover {
background-color: steelblue;
color: white;
}
section {
display: flex;
justify-content: space-evenly;
}
article {
margin-left: 15px;
}
.sport {
display: flex;
margin-bottom: 10px;
position: relative;
}
.economy {
display: flex;
margin-bottom: 10px;
position: relative;
margin-top: 50px;
}
.sport img {
position: relative;
height: 150px;
}
.economy img {
position: relative;
height: 150px;
}
h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
}
h2 {
height: 20px;
margin-right: 10px;
font-size: 2rem;
color: green;
font-weight: 400;
}
.sport-hdr,
.econ-hdr {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<header>
<h1>Meu portal de notícias</h1>
<nav>
<ul>
<li>
<a href="#sports" title="Ir para a seção de esportes">Esportes</a>
</li>
<li>
<a href="#economy" title="Ir para a seção de notícias">Economia</a>
</li>
</ul>
</nav>
</header>
<section>
<div class="sport">
<h2>Esportes</h2>
<article>
<img src="./imagens/futebol.jpg" alt="Bola de futebol no gramado" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Grande clássico na noite de hoje</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/futebol-americano.jpg"
alt="Jogador de futebol americano correndo com a bola na mão" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Noite do Superbowl</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
<section>
<h2>Economia</h2>
<div class="economy">
<article>
<img src="./imagens/dolares.jpg" alt="Muitos dólares" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Dólar em alta de 0.50%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam
labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam
tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
</body>
</html>
标题样式：
创建了一个带有弹性容器的标题，在左侧显示网站标题，在右侧显示导航菜单。 使用适当的间距和悬停效果设置导航菜单项的样式。 部分样式：
使用 Flexbox 为各部分创建布局。 每个部分中的单独文章都带有图像、日期、标题和“阅读更多”链接。 具体部分样式：
使用类 .sport 设计“Esportes”部分。 使用类 .economy 设计“Economia”部分。 在每个部分中放置图像和标题。 H2 标题：
使用“Esportes”和“Economia”的 H2 标题。
如果为这些部分添加弹性流列，您将能够利用列布局，将 h2 放在帖子上方。
我还为您制作的保存帖子的 div 添加了一些格式。以下是我对您的造型所做的三项更改：
section {
flex-flow: column nowrap;
}
.sport {
margin-top: 20px;
}
.economy {
margin-top: 20px;
}
这是查看布局变化的片段：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*Meu código abaixo*/
header {
display: flex;
justify-content: space-between;
padding: 15px;
}
header h1 {
font-size: 2rem;
font-weight: 500;
color: steelblue;
}
header nav ul {
display: flex;
margin-right: 100px;
}
header nav ul li a {
margin-right: 10px;
text-decoration: none;
font-size: 1.5rem;
padding: 5px;
border: 2.5px solid steelblue;
color: steelblue;
}
header nav ul li a:hover {
background-color: steelblue;
color: white;
}
section {
display: flex;
flex-flow: column nowrap;
justify-content: space-evenly;
}
article {
margin-left: 15px;
}
.sport {
display: flex;
margin-bottom: 10px;
position: relative;
margin-top: 20px;
}
.economy {
display: flex;
margin-bottom: 10px;
position: relative;
margin-top: 20px;
}
.sport img {
position: relative;
height: 150px;
}
.economy img {
position: relative;
height: 150px;
}
h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
}
h2 {
margin-right: 10px;
font-size: 2rem;
color: green;
font-weight: 400;
}
.sport-hdr,
.econ-hdr {
display: flex;
justify-content: center;
}<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu portal de notícias</title>
</head>
<body>
<header>
<h1>Meu portal de notícias</h1>
<nav>
<ul>
<li>
<a href="#sports" title="Ir para a seção de esportes">Esportes</a>
</li>
<li>
<a href="#economy" title="Ir para a seção de notícias">Economia</a>
</li>
</ul>
</nav>
</header>
<section>
<h2>Esportes</h2>
<div class="sport">
<article>
<img src="./imagens/futebol.jpg" alt="Bola de futebol no gramado" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Grande clássico na noite de hoje</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/futebol-americano.jpg" alt="Jogador de futebol americano correndo com a bola na mão" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Noite do Superbowl</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/basquete.jpg" title="Vista aérea de uma quadra de basquete" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Notícia sobre a NBA</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
<section>
<h2>Economia</h2>
<div class="economy">
<article>
<img src="./imagens/dolares.jpg" alt="Muitos dólares" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Dólar em alta de 0.50%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/euro.jpg" alt="Várias notas de euro" />
<header>
<time>13/07/2022 às 12:35</time>
</header>
<h3>Euro em queda de 0.40%</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur consequuntur doloremque totam labore architecto. Corporis adipisci optio placeat quibusdam totam iure veritatis quam, ullam tenetur error? Laborum, modi itaque. Sunt.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</div>
</section>
</body>
</html>