目标: 构建一个功能类似于 https://tribute-page.freecodecamp.rocks 的应用程序
<body>
<link rel="stylesheet" href="styles.css">
<main id="main">
<h1 id="title">
Dr. Norman Borlaug
</h1>
<p>
The man who saved a billion lives
</p>
<figure id="img-div">
<img id="image" src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg' alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists">
<figcaption id="img-caption">
Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields -
part of his life-long war on hunger.
</figcaption>
</figure>
<section id="tribute-info">
<h3 id="headline">
Here's a time line of Dr. Borlaug's life:
</h3>
<ul>
<li><span class="str">1914</span> - Born in Cresco, Iowa</li>
<li><span>1933</span> - Born in Cresco, Iowa</li>
<li><span>1935</span> - Born in Cresco, Iowa</li>
<li><span>1937</span> - Born in Cresco, Iowa</li>
<li><span>1941</span> - Born in Cresco, Iowa</li>
<li><span>1942</span> - Born in Cresco, Iowa</li>
<li><span>1944</span> - Born in Cresco, Iowa</li>
<li><span>1945</span> - Born in Cresco, Iowa</li>
<li><span>1953</span> - Born in Cresco, Iowa</li>
<li><span>1962</span> - Born in Cresco, Iowa</li>
<li><span>1970</span> - Born in Cresco, Iowa</li>
<li><span>1983</span> - Born in Cresco, Iowa</li>
<li><span>1984</span> - Born in Cresco, Iowa</li>
<li><span>2005</span> - Born in Cresco, Iowa</li>
<li><span>2009</span> - Born in Cresco, Iowa</li>
</ul>
<blockquote cite="http://news.rediff.com/report/2009/sep/14/pm-pays-tribute-to-father-of-green-revolution-borlaug.htm">
<p>
"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering
intellect, persistence and scientific vision can make to human peace and progress."
</p>
<cite>
-- Indian Prime Minister Manmohan Singh
</cite>
</blockquote>
<h3>
If you have time, you should read more about this incredible human being on his <a
href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank" id="tribute-link">Wikipedia entry</a>.
</h3>
</section>
</main>
</body>
CSS
html {
font-size:10px;
}
body {
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Helvetica Neue', Arial, sans-serif;
font-size:1.6rem;
line-height:1.5;
text-align:center;
color:#333;
margin:0;
}
#main {
margin: 30px 8px;
padding: 15px;
border-radius: 5px;
background: #eee;
}
@madia (max-width:460px) {
#main {
margin:0;
}
}
h1 {
font-size: 4rem;
margin-bottom:0;
}
@madia (max-width:460px) {
h1 {
font-size: 3.5rem;
line-height: 1.2;
}
}
a {
color: #477ca7;
}
a:visited {
color: #74638f;
}
img {
max-width: 100%;
display:block;
height: auto;
margin:0 auto;
}
#img-div {
background-color: white;
padding: 10px;
margin: 0;
}
#img-caption {
margin: 15px 0 5px 0;
}
@madia (max-width: 460px) {
#img-caption {
font-size: 1.4rem;
}
}
#headline {
margin: 50px 0;
text-align: center;
}
ul {
max-width:550px;
margin: 0 auto 50px auto;
text-align:left;
line-height: 1.6;
}
li {
margin: 16px 0;
}
span {
font-weight: bold;
}
blockquote {
font-style: italic;
max-width:545px;
margin: 0 auto 50px auto;
text-align: left;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。