致敬页
通过 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>  和 <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
}
注:CSS 文件位置和图片位置可按需替换