标签：Cresco Iowa width auto Born Build Tribute margin Page

响应式网页设计项目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;
}

标签：Cresco,Iowa,width,auto,Born,Build,Tribute,margin,Page
来源： https://www.cnblogs.com/shixiu/p/15879275.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。