用HTML和CSS简单语法写的一个简历Demo
程序员文章站
2022-03-07 17:18:36
...
学完了学堂在线Web攻城狮课程的前两章节（HTML和CSS基础）。完成了第二章布置的作业——利用学过的知识制作一个简历Demo。
我...拿校长的百科词条做简历了，不知道有没有侵权......现在发布出来了...侵权删。
很无聊的一篇博客，只是记录出来而已。
效果图是这样的：
HTML代码是这样子的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script> <script type="text/javascript"> $youziku.load("body", "e87037d386e3439ead6d06fa7af17a78", "TSSunOld"); /*$youziku.load("#id1,.class1,h1", "e87037d386e3439ead6d06fa7af17a78", "TSSunOld");*/ /*．．．*/ $youziku.draw(); </script>
<link rel="stylesheet" type="text/css" href="Resume.css">
</head>
<body>
<div id="BODY">
<header>人物简历——邓秀新</header>
<nav>
<ul>
<li><a href="#Brief">人物简介</a></li>
<li><a href="#Experience">人物履历</a></li>
<li><a href="#Part-time">学术兼职</a></li>
<li><a href="#Honor">获得荣誉</a></li>
<li><a href="#Contribution">主要贡献</a></li>
<li><a href="#Contact">联系我们</a></li>
</ul>
</nav>
<article>
<section id="P_V">
<img id="Photo" src="Deng.jpg" alt="邓秀新" title="邓秀新图片" width="200px" height="270px">
<video id="Video" src="Deng.mp4" controls height="270px" title="邓秀新在一次会议上的讲话"></video>
</section>
<section id="Brief" class="Word">
<h2>人物简介</h2>
<p>
邓秀新，男，汉族，1961年11月生，湖南宜章人。1988年8月加入民盟，1995年1月加入中国*。1987年12月在华中农业大学获博士学位。教授、博士生导师，中国工程院院士，教育部“长江学者奖励计划”特聘教授。<br>
现任十三届全国人大常委会委员，中国工程院副院长，民盟*副主席，华中农业大学校长，中国科学技术协会副主席（兼）。
</p>
</section>
<section id="Experience">
<h2>人物履历</h2>
<table border="1">
<tr><th id="C1">时期</th><th id="C2">经历</th></tr>
<tr><td>1978.02-1981.12</td><td>湖南农业大学（原湖南农学院）园艺系果树学专业，获学士学位</td></tr>
<tr><td>1982.02-1984.12</td><td>华中农业大学（原华中农学院）园艺系果树学专业，获硕士学位</td></tr>
<tr><td>1985.02-1987.12</td><td>华中农业大学园艺系果树学专业，获博士学位</td></tr>
<tr><td>1996.10-1996.11</td><td>美国佛罗里达大学植物病理系合作研究</td></tr>
<tr><td>2007.06-今</td><td>任华中农业大学校长</td></tr>
<tr><td>2016.06</td><td>中国科学技术协会第九届全国委员会副主席 </td></tr>
<tr><td>2017.02</td><td>中国*同盟第十二届*委员会副主席 </td></tr>
<tr><td>2018年6月</td><td>任中国工程院副院长</td></tr>
</table>
</section>
<section id="Part-time" class="Word">
<h2>学术兼职</h2>
<ul>
<li>现代农业（柑橘）技术体系首席科学家</li>
<li>中国园艺学会副理事长</li>
<li>农业部果树顾问专家组组长</li>
<li>园艺植物生物学教育部重点实验室主任</li>
<li>SCI杂志《Scientia Horticulturae》共同主编（Joint editor）</li>
<li>园艺学报》、《世界农业》、《遗传》、《亚热带植物科学》编辑委员会委员</li>
</ul>
</section>
<section id="Honor" class="Word">
<h2>获得荣誉</h2>
<ul>
<li>国家基础研究计划项目首席科学家</li>
<li>1989年获农业部科技进步一等奖</li>
<li>2007年获全国五一劳动奖章</li>
<li>中国工程院院士</li>
</ul>
</section>
<section id="Contribution" class="Word">
<h2>主要贡献</h2>
<p>一、建立起细胞融合、培养及再生技术体系<br>
在中国率先建立起柑橘原生质体培养技术，建立起柑橘原生质体融合再生和杂种的分子鉴定技术；完善了化学和电诱导融合技术方法，建立起非对称融合的实验技术；成功地将现代的分子标记技术（RAPD、AFLP、SSR、SCAR、MSAP等）应用于融合再生植株的遗传分析中，这些研究在技术上构成了中国果树乃至整个木本植物最为完善的细胞融合技术体系。迄今，已建立起包含世界主要种类和品种70余个基因型的胚性愈伤组织库，获得柑橘属与金柑、九里香、黄皮等属间及属内种间体细胞杂种30余个以及一批胞质杂种，丰富了中国柑橘育种材料，同时为改良中国品种提供了宝贵的亲本。 </p>
<p>
二、柑橘细胞工程技术及育种实践<br>
柑橘细胞工程技术及由此产生的材料直接应用于育种实践
将获得的体细胞杂种与中国一些地方品种杂交，经过胚胎抢救获得了体细胞杂种与沙田柚、本地早橘等8个组合的200余株三倍体后代，有望选育出无籽的三倍体无核柚子类型。在体细胞杂种的有性杂交过程中，发现杂交后的果实胚败育，从而提出“应用体细胞杂种的花粉授予二倍体柚子，当年实现种子败育，生产瘪籽柚，从而提高柚子品质”的新思路，不仅为种子多的柚子品种提高品质找到了一条途径，同时，为植物体细胞杂种的应用开拓了一个新领域。此外，建立起柑橘、苹果等果树成年态及幼年态的材料离体保存（低温和超低温）技术体系，在柑橘成年态的离体培养再生方面取得突破，在保存过程中发现逆境处理可以提高保存材料的再生能力。 </p>
<p>三、分子标记与种质资源评价<br>
利用分子标记技术对中国主要的柑橘种类和品种进行评价，建立起251份资源的RAPD指纹图谱、29份种类的AFLP和SSR指纹图谱，为中国柑橘资源保存、引进和育种提供了参考，受到国际种质资源研究所（IPGRI）高度重视。</p>
<p>四、品种选育与服务产业<br>
利用国际合作和国家“948”项目的支持，经过10年试验，已筛选出适合中国长江流域栽培的“红肉脐橙”、“HB柚”等品种，引进、示范、推广了一批柑橘新品种和配套技术，建立了无病毒良种繁育基地，现正在湖北、湖南、江西等7个省（市）种植推广，示范推广面积达45万亩。这些年来，他扎根农村，足迹遍布三峡库区、江西、湖北、湖南、四川、云南等中国的主要柑橘产区，为柑橘主产区提供脐橙、柑橘、柚子等良种达60余个，无病毒种苗或接芽60余万株（个），培训*3.余万人，农民10万余人。其推广的品种已在湖北、江西、湖南等地产生显著的经济效益。</p>
<p>五、培养研究生15名，博士生15名。</p>
</section>
<section id="Contact" class="Word">
<h2>联系我们</h2>
<form action="mailto://aaa@qq.com">
<p>你想告诉我们的话将发送至我们的邮箱：</p>
<textarea name="Send" id="SentMail"></textarea>
<br><input type="submit" value="提交">
</form>
</section>
<p id="Bottom"><a href="#">返回顶部</a></p>
</article>
<footer>
<p>Copyright©2018 HesseSummer. All rights reserved.</p>
</footer>
</div>
</body>
</html>CSS代码是这样子的：
body {margin: 0px;}
#BODY{
margin: 0 15%;
background: #F0F0F0;
font: 16px "Microsoft YaHei", sans-serif;
}
header {
height: 70px;
margin-bottom: 1em;
background: #8E8CD8;
font: bold 25px sans-serif;/*font-size*/
line-height: 70px;
color: white;
text-indent: 2em;/*text-indent*/
}
nav {
margin: 1em 0;
text-align: center;
}
nav li {
display: inline-block;
margin: 0 0.1em;
padding: 0.3em 1em;
box-sizing: border-box;
background-color: #8E8CD8;
border: #8E8CD8 1px solid;
border-radius: 0 10px;
}
nav li a:link, nav li a:visited {
color: white;
text-decoration: none;
}
nav li a:hover {
font-weight: bold;
}
article {
padding: 0 2em;
}
#P_V {
margin: 0;
text-align: center;
}
#Photo {
margin: 0 2em;/**/
}
#Video {
margin: 0 2em;/**/
}
.Word p{
text-indent: 2em;
}
textarea {
display: block;
/*margin: 0 2em;*/
width: 100%;
height: 100px;
}
footer {
height: 70px;
background: #8E8CD8;
text-align: center;
}
footer p {
color: white;
font: 13px serif;
line-height: 70px;
}
#Contact p br::before{
content:" ";
}
#Bottom {
text-align: center;
}
#Bottom a:link, #Bottom a:visited{
color: #8E8CD8;
}
上一篇： 你知道自己适合做程序员吗？
下一篇： 程序员不会JSP真的可以吗？？？
推荐阅读
-
用Html写一个简单的登陆界面_html/css_WEB-ITnose
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose
-
用C3中的animation和transform写的一个模仿加载的时动画效果_html/css_WEB-ITnose
-
用HTML和jquery写一个简单的扫雷小游戏
-
用CSS和Vue框架+axios写一个简单的天气查询网页
-
小demo | 用HTML和CSS写一个简单的菜单栏块
-
用html和css3写一个简单的支付表单
-
用html和css制作一个简单的页面
-
【Groovy】用IDEA搭建一个Groovy简单的Demo-写一个简单的Groovy输出Demo和JDBCDemo
-
用HTML5和JavaScript写一个简单的表单校验