freeCodeCamp | Tribute Page

最新推荐文章于 2023-02-28 19:17:37 发布

Meter孙

最新推荐文章于 2023-02-28 19:17:37 发布

阅读量134

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/Metersun1/article/details/128923397

版权

展示图

在这里插入图片描述

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/Tribute_Page.css">
    <title>Tribute Page</title>
</head>
<body>
<main id="main">
    <h1 id="title">Dr. Norman Borlaug</h1>
    <p id="title-caption">The man who saved a billion lives</p>
    <figure id="img-div">
        <img id="image" src="../resource/norman-borlaug-wheat.jpg" alt="norman"/>
        <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 timeline of Dr. Borlaug's life:</h3>
        <ul>
            <li><strong>1914</strong> - Born in Cresco, Iowa</li>
            <li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a
                Depression era
                program known as the "National Youth Administration"
            </li>
            <li><strong>1935</strong> - Has to stop school and save up more money. Works in the Civilian Conservation
                Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars
                on me."
            </li>
            <li><strong>1937</strong> - Finishes university and takes a job in the US Forestry Service</li>
            <li><strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts.
                Inspired
                by
                Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding
                pest-resistant plants.
            </li>
            <li><strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected.
                Instead,
                the military asked his lab to work on waterproof glue, DDT to control malaria, disinfectants, and
                other applied science.
            </li>
            <li><strong>1942</strong> - Receives a Ph.D. in Genetics and Plant Pathology</li>
            <li><strong>1944</strong> - Rejects a 100% salary increase from Dupont, leaves behind his pregnant wife, and
                flies to
                Mexico to head a new plant pathology program. Over the next 16 years, his team breeds 6,000
                different strains of disease resistant wheat - including different varieties for each major climate
                on Earth.
            </li>
            <li><strong>1945</strong> - Discovers a way to grown wheat twice each season, doubling wheat yields</li>
            <li><strong>1953</strong> - crosses a short, sturdy dwarf breed of wheat with a high-yeidling American
                breed,
                creating
                a strain that responds well to fertilizer. It goes on to provide 95% of Mexico's wheat.
            </li>
            <li><strong>1962</strong> - Visits Delhi and brings his high-yielding strains of wheat to the Indian
                subcontinent in
                time to help mitigate mass starvation due to a rapidly expanding population
            </li>
            <li><strong>1970</strong> - receives the Nobel Peace Prize</li>
            <li><strong>1983</strong> - helps seven African countries dramatically increase their maize and sorghum
                yields
            </li>
            <li><strong>1984</strong> - becomes a distinguished professor at Texas A&M University</li>
            <li><strong>2005</strong> - states "we will have to double the world food supply by 2050." Argues that
                genetically
                modified crops are the only way we can meet the demand, as we run out of arable land. Says that GM
                crops are not inherently dangerous because "we've been genetically modifying plants and animals for
                a long time. Long before we called it science, people were selecting the best breeds."
            </li>
            <li><strong>2009</strong> - dies at the age of 95.</li>
        </ul>
        <blockquote class="cite-info">
            <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 id="tribute-link" target="_blank"
               href="https://baike.baidu.com/item/%E8%AF%BA%E5%B0%94%E6%9B%BC%C2%B7%E5%B8%83%E5%8A%B3%E5%85%8B/7673888">
                Wikipedia entry</a>.</h3>
    </section>
</main>
</body>
</html>

CSS代码

html {
    font-family: Arial, sans-serif;
    font-size: 10px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    display: block;
    line-height: 1.5;
    text-align: center;
    font-size: 1.6rem;
    color: #333;
    margin: 0;
}

#main {
    margin: 30px 8px;
    padding: 15px;
    border-radius: 5px;
    background-color: #eee;
}

h1 {
    font-size: 4rem;
    margin-bottom: 0;
}

#img-div {
    background-color: white;
    padding: 10px;
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

#img-caption {
    margin: 15px 0 5px 0;
}

#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
}

blockquote {
    font-style: italic;
    max-width: 545px;
    margin: 0 auto 50px auto;
    text-align: left;
}

a {
    color: #477ca7;
}