响应式网页设计项目1

1. 原画

https://codepen.io/freeCodeCamp/full/zNqgVx

2. 实战

https://codepen.io/Neos15/pen/Vwrbayb

3. 代码

3.1 HTML

<main id="main">
<div id="title">
<h1>
  Dr. Norman Borlaug
</h1>
<p>
  The man who saved a billion lives
</p>
</div>
<div id="img-div">
  <img id="image" src='https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg'>
  <p 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.
  </p>
</div>
<div id="tribute-info">
  <h2>
    Here's a time line of Dr. Borlaug's life:
  </h2>
  <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>
  <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>
  <p>
    -- Indian Prime Minister Manmohan Singh
  </p>
  <p><span>
    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">Wikipedia entry</span></a>.
  </p>
  </main>

3.4 css

main {
  background-color: #f2f2f2;
}
#title,h2 {
  text-align: center;
  padding-top: 25px;
}
#img-div {
  background-color: white;
  width:96%;
  margin: auto;
}
#image,#img-caption {
  display: block;
  max-width: 1024px;
  width:96%;
  margin: auto;
  text-align: center;
}
#tribute-info {
  margin: auto;
}
ul {
  width: 40%;
  margin: auto;
  padding:auto;
}
span {
  font-weight: bold;
}