我正在上一个初学者的Web开发课程,而我正在从事的作业要求我重新创建页面的标记。给我一个.html文件,只允许使用CSS进行更改。分配的目的是使给我的.HTML文件看起来完全像标记。
我的问题是,有2个h1 / h2标签,其中一对位于标头中,一对位于主标签中。我想对标题中的第一对h1 / h2标签进行更改。由于某些原因,这两对都位于header标记内,我不知道如何通过CSS进行更改。
in the provided screenshot the markup is on the left and my progress is on the right.[ https://www.dropbox.com/s/ghdl3p1n311vs4q/Screenshot%202020-05-17%2017.28.40.png?dl=0 ]
有人可以解释为什么即使只有一对标签驻留在标头中,两个标签都受标头影响吗?以及如何改变一对的解释?
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href= "reset.css" rel = "stylesheet" />
<link href= "hw2-problem2.css" rel = "Stylesheet" >
<meta charset="utf-8">
<title>Art Store</title>
<link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
<main>
<h2>Still waiting</h2>
<p id="announcement">Our website will be live in</p>
<p id="timeline">4 years, 3 months, and 2 days<sup>*</sup></p>
<p id="footnote"><sup>*</sup>hopefully</p>
</main>
<footer>
<h2>Recent Acquisitions</h2>
<div>
<img src="images/07020.jpg" alt="Liberty Leading the People">
<img src="images/05030.jpg" alt="The Death of Marat">
<img src="images/106020.jpg" alt="Girl with a Pearl Earring">
</div>
</footer>
</body>
</html>
CSS Code:
body {
background-image: url("images/art-background4.jpg");
background-size: 100% 100%;
padding: 12.55em 6.27em;
margin: 6.27;
}
header{
position:absolute;
top:2em;
left:2em;
padding: 2em;
background-color: hsla(0, 0%, 0%, 0.473);
}
h1{
font-size: 6em;
color: white;
margin-bottom: 2em;
}
h2{
margin: 2em;
}