致敬页：通过HTML+CSS制作致敬页，致敬袁老先生

最新推荐文章于 2022-12-11 10:20:20 发布

Warolitbos

最新推荐文章于 2022-12-11 10:20:20 发布

阅读量705

点赞数 2

分类专栏： HTML+CSS基础知识文章标签： html css 前端

本文链接：https://blog.csdn.net/VirusScanLog/article/details/120045017

版权

HTML+CSS基础知识专栏收录该内容

6 篇文章 1 订阅

订阅专栏

致敬页

通过 HTML+CSS 制作致敬页，致敬袁老先生！且此代码适配移动端，可根据移动端大小自动进行调节，不影响页面效果！

效果图：

HTML代码：

<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Warolitbos
 * @Date: 2021-06-16 14:16:53
 * @LastEditors: Warolitbos
 * @LastEditTime: 2021-09-01 17:24:03
 * @FilePath: \TSWorld\html\1.html
 * Copyright (C) 2021 Warolitbos. All rights reserved.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="1.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <header id="header" class="header"></header>
  <main id="main" class="main">
    <h1 id="title" class="title">
      袁隆平先生 - Dr. LongPing Yuan
    </h1>
    <div class="title-text">
      <p style="color:red">中国消除贫困奖终身成就奖获得者</p>
    </div>
    <figure id="image" class="image">
      <img src="./YLP/YLP1.jpeg" alt="国士无双-袁隆平先生">
      <p class="image-text">我一直有两个梦：<span>禾下乘凉</span> &ensp;和&nbsp; <span>杂交水稻覆盖全球</span></p>
    </figure>
    <section id="tribute-info">
      <h3 id="headline">他的英雄事迹：</h3>
      <ul>
        <li>
          <strong>1960年7月</strong>
          - 袁隆平在农校试验田中意外发现一株特殊性状的水稻，他推论该为天然杂交水稻，随后开始进行试验。
        </li>
        <li>
          <strong>1961年</strong>
          - 袁隆平证明了1960年发现的那个“鹤立鸡群”的植株，是“天然杂交稻”，并立志用农业科学技术击败饥饿威胁，从事水稻雄性不育试验。
        </li>
        <li>
          <strong>1964年7月</strong>
          - 袁隆平发现“天然雄性不育株”。
        </li>
        <li>
          <strong>1965年7月</strong>
          - 袁隆平推论水稻亦有杂交优势。通过培育雄性不育系、雄性不育保持系和雄性不育恢复系的三系法途径来培育杂交水稻，可以大幅度提高水稻产量。
        </li>
        <li>
          <strong>1966年2月</strong>
          - 袁隆平发表第一篇论文《水稻的雄性不孕性》。
        </li>
        <li>
          <strong>1973年</strong>
          - 袁隆平协作组通过测交找到了恢复系，攻克了“三系”配套难关。
        </li>
        <li>
          <strong>1973年10月</strong>
          - 袁隆平发表《利用“野稗”选育三系的进展》的论文。
        </li>
        <li>
          <strong>1976年</strong>
          - 杂交水稻成功推广。
        </li>
        <li>
          <strong>1977年</strong>
          - 袁隆平发表了《杂交水稻培育的实践和理论》与《杂交水稻制种与高产的关键技术》两篇重要论文。
        </li>
        <li>
          <strong>1980年10月</strong>
          - 我国第一个研究杂交水稻的育种家、湖南省农业科学院研究员袁隆平，经过10多年刻苦的研究实验，在有关科研单位的协作下，攻克了制种关，使杂交水稻的研究获得全面成功，为水稻增产开辟了新的途径。
        </li>
        <li>
          <strong>2010年3月</strong>
          - 袁隆平院士团队和张启发院士团队合作，共同研究转基因水稻。
        </li>
        <li>
          <strong>2017年</strong>
          - 袁隆平及其团队培育的超级杂交稻品种“湘两优900（超优千号）”又创亩产新纪录，亩产1149.02公斤。
        </li>
        <li>
          <strong>2020年3月</strong>
          - 袁隆平及其团队启动建设一期项目，大吉沙岛水稻公园水稻种植工作。
        </li>
        <li>
          <strong>2020年6月</strong>
          - 袁隆平团队在青海柴达木盆地盐碱地里试种的高寒耐盐碱水稻（又称海水稻），并成功长出了水稻。
        </li>
      </ul>
    </section>
  </main>

  <footer id="footer" class="footer"></footer>
</body>

</html>

CSS代码

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

/* #main {
    background-color: #eee;
    text-align: center;
    border-radius: 5px;
    margin-top: auto;
    padding: 10px;
} */

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

.image {
    background-color: #fff;
    padding: 2%;
    margin: 0;
}

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

.image-text {
    margin-bottom: auto;
}

#headline {
    margin: 50px 0;
    text-align: center;
}

p {
    font-size: large;
    color: rgb(85, 85, 85);
    font-size: medium;
}

h3 {
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

ul {
    max-width: 550px;
    margin: 0 auto 50px auto;
    text-align: left;
    line-height: 1.6;
}

li {
    margin: 16px 0;
    font-size: medium;
    color: rgb(85, 85, 85);
}

strong {
    font-weight: bold;
    color: #333;
}

::marker li {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
    font-size: small;
}

span {
    font-style:oblique
}