HTML与CSS案例——⼈物简介
实现代码和效果
HTML实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>⼈物简历-胡歌</title>
<link rel="stylesheet"type="text/css"href="css/resume.css"/>
</head>
<body>
<div id="container">
<h1>⼈物简历——胡歌</h1>
<div id="nav">
<ul>
<li>
<a href="#info">基本信息</a>
</li>
<li>
<a href="#early">早年经历</a>
</li>
<li>
<a href="#career">演艺经历</a>
</li>
<li>
<a href="#prize">获奖记录</a>
</li>
<li>
<a href="#contribution">社会活动</a>
</li>
<li>
<a href="#contact">联系信息</a>
</li>
</ul>
</div>
<div class="center">
html和css书籍推荐
<img class="margin"src="img/huge.jpg "width="200px"height="280px"title="胡歌"/>
<video class="huge"src="video/Huge.mp4"height="200px"controls title="项⽬讲解视频">
您的浏览器不⽀持video标签
</video>
</div>
<div class="margin"id="userinfo">
<div id="info">
<h2>基本信息</h2>
<p>胡歌，1982年9⽉20⽇出⽣于上海市徐汇区，中国内地影视男演员、流⾏乐歌⼿，民盟盟员 [1] ，毕业于上海戏剧学院表演系。
1996年，14岁的胡歌便成为上海教育电视台的⼩主持⼈。2005年在仙侠剧《仙剑奇侠传》中塑造了“李逍遥”⼀⾓，并演唱该剧插曲《六⽉的⾬》《逍遥叹》 [2-3]
。2006年8⽉遭受严重车祸，2007年6⽉复出 [4] 。2009年主演仙侠剧《仙剑奇侠传三》 [5] ，并演唱⽚尾曲《忘记时间》 [6] 。2010年主演的穿越剧《神话》在央视⼋套播出
[7] 。2011年参演历史题材电影《⾟亥⾰命》提名⼤众电影百花奖“最佳新⼈奖” [8-9] 。2012年主演⽞幻剧《轩辕剑之天之痕》 [10]
。2013年主演两部话剧，凭借《如梦之梦》获得北京丹尼国际舞台表演艺术奖“最佳男演员奖” [11] ；2014年参演战争剧《四⼗九⽇·祭》提名上海电视节⽩⽟兰奖“最佳男配⾓奖” [12-13]
；2015年主演的谍战剧《伪装者》、古装剧《琅琊榜》、都市剧《⼤好时光》相继播出，获中国电视剧飞天奖“优秀男演员提名奖”、上海电视节⽩⽟兰奖“最佳男主⾓奖”、中国电视⾦鹰奖“观众喜爱的男演员奖”、中国⾦鹰电视艺术节“最具⼈⽓男演员奖”等奖项
[14-18] 。2016年登上央视春晚演唱歌曲《相亲相爱》 [19-20]
</div>
<div id="early">
<h2>早年经历</h2>
<p>
胡歌在上幼⼉园的时候，他被上海⼴播电视台⼩荧星艺术团选中，那年上海有3万多⼉童去考，最后录取了60名，胡歌是其中之⼀。
</p>
<p>
胡歌⼩学就读于上海市向阳⼩学，初中就读于上海市第⼆中学初中部95级1班，⾼中就读于上海市第⼆中学⾼中部98级3班、⾼中部01届7班。胡歌在⼩学阶段曾经是戴三道杠的⼤队委员，在中学阶段还担任校升旗仪式主持⼈、校⼴播台台长、校戏剧社社长、校合唱团团长、班级团⽀书、班级物理课代表、徐汇区学⽣话剧团负责⼈，还参与了中央电视台《正⼤综艺》节⽬主题歌《爱的奉献》MV的拍摄
[28-29] 。
</p>
<p>
1996年，上海教育电视台⾯向上海滩招聘中学⽣主持⼈，胡歌成功突围⽽出，当选该台《阳光少年》栏⽬主持⼈，并且在这个⼩主持⼈的⾏业上做了⼏年。同时，他曾在上海东⽅⼴播电台⾝兼多个栏⽬的主持⼈和记者，做过杂志的学⽣编辑，在徐汇区少年宫话剧社演出的话剧《红⼿绢的故事》获得了上海市第⼆届学⽣艺术节话剧专场⼀等奖，还在电影《国歌》中露脸，并参与了动画电影《宝莲灯》的配⾳
[30-33] 。
</p>
<p>
2001年，胡歌考上中央戏剧学院的导演系，专业成绩是第⼆名（第⼀名为保送⽣），后来⼜去上海戏剧学院表演系⾯试，考了第三名，因上戏⽼师的劝说和家庭原因⽽选择留在上海 [34-35] 。
</p>
</div>
<div id="career">
<h2>演绎经历</h2>
<table border="1"align="center"cellspacing="0">
<tr>
<th width="100px">时期</th>
<th>经历</th>
</tr>
<tr>
<td>
2005年
</td>
<td>主演的古装仙侠剧《仙剑奇侠传》播出</td>
</tr>
<tr>
<td>
2006年
</td>
<td>
主演的古装神话剧《天外飞仙》⾸播
</td>
</tr>
<tr>
<td>
2007年
</td>
<td>
胡歌在受伤期间创作的书籍《幸福的拾荒者》发布
</td>
</tr>
<tr>
<td>
2008年
</td>
<td>
主演的电视剧《仙剑奇侠传》于⾸播三年后⾸次上星播出
</td>
</tr>
<tr>
在由百万民众参与、近百名娱乐记者联合票选的“80后新⽣代娱乐⼤明星”评选中获封“四⼤⼩⽣”之⼀
</td>
</tr>
<tr>
<td>
2010年
</td>
<td>
主演的穿越历史剧《神话》在央视⼋套⾸播，胡歌饰演现代青年易⼩川、秦朝将军蒙毅，并与⽩冰演唱⽚尾曲《美丽的神话》</td>
</tr>
<tr>
<td>
2011年
</td>
<td>
主演的民族历史剧《⾹格⾥拉》在央视⼀套⾸播，胡歌饰演康巴汉⼦扎西平措，该⽚获得全国⼗佳电视制⽚表彰⼤会“优秀电视剧奖”
</td>
</tr>
<tr>
<td>
2012年
</td>
<td>
动画电影《⼤闹天宫3D》上映，胡歌为武曲星及天兵甲⼄丙配⾳
</td>
</tr>
<tr>
<td>
2013年
</td>
<td>
出演的赖声川执导的话剧《如梦之梦》在北京保利剧院⾸演，胡歌饰演五号病⼈
</td>
</tr>
<tr>
<td>
2014年
</td>
<td>
主演的都市⽣活剧《⽣活启⽰录》⾸播，胡歌饰演都市暖男鲍家明
</td>
</tr>
<tr>
<td>
2015年
</td>
<td>
主演的民国谍战剧《伪装者》在湖南卫视⾸播，胡歌饰演军统特⼯明台
</td>
</tr>
<tr>
<td>
2016年
</td>
<td>
在上海市各界⼈⼠春节团拜会上演唱意⼤利⽂歌曲《我的太阳》
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
2018年
</td>
<td>
凭借《猎场》提名第24届上海电视节⽩⽟兰奖“最佳男主⾓奖
</td>
</tr>
<tr>
<td>
2019年
</td>
<td>
与吴京、章⼦怡、张译、成龙、井柏然合作出演珠峰题材电影《攀登者》 [133] 。4⽉，主演的刁亦男执导犯罪题材电影《南⽅车站的聚会》⼊围第72届戛纳国际电影节主竞赛单元
[25] ；11⽉，为影⽚《南⽅车站的聚会》献唱歌曲《美丽的梭罗河》
</td>
</tr>
<tr>
<td>
2020年
</td>
<td>
凭借微电影⼴告《品川猴》获得⾦狮国际⼴告影⽚奖最佳男主⾓ [136] ；8⽉2⽇，剧版《繁花》曝光全新海报，官宣男主将由胡歌饰演
</td>
</tr>
</table>
</div>
<div id="prize">
<h2>获奖记录</h2>
<p>阿巴阿巴</p>
</div>
<div id="contribution">
<h2>社会活动</h2>
<p>社会活动经历</p>
</div>
<div id="contact">
<h2>联系⽅式</h2>
<p>请你将想要说的话发送⾄我的邮箱：</p>
<form action="mailto://1179103245@qq">
<textarea>
</textarea><br>
<button type="submit">提交</button>
</form>
</div>
<div class="center">
<a href="#">返回顶部</a>
</div>
<div id="copyright">
<p> @2018 Baidu 使⽤百度前必读 | 百科协议 | 隐私政策 | 百度百科合作平台 | 京ICP证030173号</p>
</div>
</div>
</div>
</body>
</html>
background-color: #f0f0f0;
/*背景颜⾊*/
/*
外边距
上下边距为 0px
左右边距为⽗元素的15%，为了让所有浏览器显⽰⼀样的效果 */
margin: 0 15%;
}
h1{
height: 70px;
color: white;
/*字体颜⾊*/
background-color: cornflowerblue;
line-height: 70px;
/*⾏间距*/
text-indent: 70px;
/*⽂本缩进*/
}
/*导航信息居中*/
#nav{
text-align: center;
}
/*后代选择器*/
#nav li{
display: inline-block;
/*元素设置为⾏内块级元素*/
width: 100px;
height: 30px;
background-color: cornflowerblue;
line-height: 30px;
/*⾏间距与⾼度⼀直，则显⽰在中间*/
color: white;
border: 1px solid cornflowerblue;
border-radius: 0 10px;
/*边框左下⾓和右上⾓弧度⾓变为10%*/
}
#nav li a{
text-decoration: none;
/*除去⽂本修饰，去除下划线*/
color: white;
}
#nav li a:hover{
font-weight: bold;
}
.center{
text-align: center;
}
.margin{
margin: 0 60px;
}