FCC TributePage

最新推荐文章于 2023-02-07 18:04:06 发布

EIERICA

最新推荐文章于 2023-02-07 18:04:06 发布

阅读量404

点赞数 1

本文链接：https://blog.csdn.net/EIERICA/article/details/102249695

版权

FCC Tribute Page

要求：

1.我的致敬页面应包含一个带有的元素id="main"，其中包含所有其他元素。
2.我应该看到一个带有的元素id="title"，其中包含一个描述致敬页面主题的字符串（即文本）。
3.我应该看到一个div带有的元素id="img-div"。
4.在img-div元素中，我应该看到一个img带有的元素id="image"。
5.在img-div元素内，我应该看到一个元素，id="img-caption"其中包含一个对应的元素，该元素包含描述所示图像的文本内容img-div。
6.我应该看到一个带有的元素id="tribute-info"，其中包含描述贡品页面主题的文本内容。
7.我应该看到一个带有a标签的元素，该元素id="tribute-link"链接到一个外部站点，该站点包含有关致敬页面主题的其他信息。提示：您必须将元素的属性target设置为，然后将其设置为_blank，才能在新标签页（即target="_blank"）中打开链接。
8.该img元件应响应地调整，相对于它的父元素的宽度，而不会超过它的原始尺寸。
9.该img元件应其父元素内居中。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Tribute Page</title>
    <style type="text/css">
        #main {
            background-color: rgba(188, 240, 140, 0.664);
            font-family: 微软雅黑;
            position: relative;
            padding: 40px 0 0 0;
        }

        #title,
        h4 {
            text-align: center;
        }

        #title {
            letter-spacing: 12px;
        }

        h4 {
            letter-spacing: 11px;
        }

        #img-div {
            background-color: aliceblue;
            text-align: center;
            width: 80%;
            padding: 50px 0;
            margin: auto;
            box-shadow: 0 0 5px black;
        }

        #image {
            height: auto;
            margin: auto;
            max-width: 100%;
            display: block;
        }

        #tribute-info {
            padding: 50px 200px;
        }

        #sub-title {
            text-align: center;
            letter-spacing: 1px;
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 40px;
        }

        li {
            font-weight: 600;

        }

        a {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="main">
        <h1 id="title">袁隆平</h1>
        <h4>“杂交水稻之父”</h4>
        <br />
        <div id="img-div">
            <image id="image" src="YuanLongping.jpg" alt="YuanLongping's picture"></image>
            <p id="img-caption">袁隆平说：“我的梦想很简单”</p>
        </div>
        <div id="tribute-info">
            <p id="sub-title">杂交水稻传奇</p>
            <ul>
                <li>杂交水稻</li>
                <p>1966年，三系杂交水稻的发现以《水稻的雄性不孕性》发表在中国科学院的《科学通报》上，是袁隆平的第一篇重要论文。1971年11月23日，
                    其助手李必湖、冯克珊在海南试验田发现一株难得的野生稻雄性不育株。 此后湖南省农业科学院成立杂交稻研究协作组，由袁隆平挂帅。1972年，杂交
                    稻被列为中国重点科研项目，全国性的协作攻关开始：三十余科研单位参与、上千个品种与该株野生水稻进行了上万次测交和回交转育试验。在此基础上，
                    袁隆平选育不育系二九南1号成功，此为中国第一个应用于生产的不育系水稻。</p>
                <li>二系杂交水稻</li>
                <p>袁隆平并不满足这个成绩。1987年，他提出“杂交水稻的发展战略”，即三系法为主的器种间杂种优势利用；两系法为主的籼粳亚种杂种优势利用；一系法
                    为主的远缘杂种优势利用。1987年7月16日，袁隆平学生李必湖、邓华风，在安江农校籼稻三系育种材料中，找到一株光敏不育水稻。历经两年三代异地
                    繁殖和观察，该材料农艺性状整齐一致，不育株率和不育度都达到了100%，并且育性转换明显和同步。这一新成果，为杂交水稻从“三系法”过渡到“两系
                    法”开拓了新局面。1995年，两系法杂交水稻研究成功，普遍比同熟期的三系杂交稻每亩增产5%-10%。</p>
                <li>超级杂交水稻</li>
                <p>1997年，袁隆平再次发起研究超级杂交稻。2000年，超级杂交稻实现百亩示范片亩产700公斤的第一期目标。2004年，超级杂交稻实现百亩示范片亩产800
                    公斤的第二期目标。
                    就在2003年，中国大陆一半以上的水稻都为袁隆平的杂交品种；在世界范围，20%的水稻采用袁隆平的杂交技术。2007年，中国大陆的水稻产量为5亿吨。
                    其杂交水稻技术已经在中亚、东南亚、北美、南美试验试种，杂交稻已引起世界范围的运用，继续为解决世界粮食安全及短缺做出卓绝贡献。</p>
                <li>杂交水稻绝收事件</li>
                <p>安徽省种子管理总站的调查结果显示，2014年10月，安徽蚌埠、安庆、合肥、滁州、马鞍山、淮南等六市种植的“两优0293”发生大面积减产、绝收，受灾
                    面积超过万亩。此后半年内，安徽省农业委员会下属的种子管理总站多次向国家农业部上书，要求重新审定超级稻“两优0293”的种植区域，希望“不再包
                    含我省”。这是一家省级农业监管单位在向超级稻明星品种下“逐客令”。但也有人指出，“两优0293”本身是一个高感稻瘟病的品系，稻农在选用了“两
                    优0293”这一稻瘟病易感品种后，因为种植区域是稻瘟病低发地区，为了节省成本等原因未采取充分的防病措施，而农技站和种子的经销商又并未做好对稻
                    农的技术指导和售后服务工作，于是在遭遇了偶发的大规模病害时出现减产甚至绝收。</p>
                <li>沙漠种植杂交水稻</li>
                <p>2018年，中国工程院院士袁隆平带领的青岛海水稻研发中心团队对在迪拜热带沙漠实验种植的杂交水稻进行测产，最高亩产超过500公斤。</p>
            </ul>
        </div>
        <a id="tribute-link" target="_blank" href="https://zh.wikipedia.org/wiki/%E8%A2%81%E9%9A%86%E5%B9%B3">了解更多</a>
    </div>
</body>

</html>

实现图：

在这里插入图片描述
CodePen测试结果

EIERICA

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
FCC TributePage

FCC Tribute Page要求：1.我的致敬页面应包含一个带有的元素id="main"，其中包含所有其他元素。2.我应该看到一个带有的元素id="title"，其中包含一个描述致敬页面主题的字符串（即文本）。3.我应该看到一个div带有的元素id="img-div"。4.在img-div元素中，我应该看到一个img带有的元素id="image"。5.在img-div元素内，我应该...
复制链接

扫一扫