实现代码和效果
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">
<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]
。2017年二度登上央视春晚演唱歌曲《在此刻》，获得共青团中央“全国向上向善好青年”崇义友善好青年称号，2018年凭借《猎场》二度提名上海电视节白玉兰奖“最佳男主角奖” [21-24] 。
2019年，主演的刁亦男执导电影《南方车站的聚会》入围戛纳国际电影节主竞赛单元。 [25] 2020年12月，2020中国品牌人物500强排名53。
</p>
</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>
<td>
2009年
</td>
<td>
在由百万民众参与、近百名娱乐记者联合票选的“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>
2017年
</td>
<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>
CSS外部样式代码
#container {
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;
}
.huge {
height: 280px;
width: 600px;
}
#userinfo p {
text-indent: 30px;
}
textarea {
width: 100%;
height: 100px;
}
#copyright {
background: cornflowerblue;
text-align: center;
color: white;
height: 70px;
line-height: 70px;/*行间距*/
font-size: 12px;
}
实现效果
| 不要因为你的努力没能得到预期的回报，就认为努力没有意义，不要因为世界的随机性就一切听任命运，世界是随机的，看起来好像是你所有的经营都可能是一场空，但反过来，改变你人生的机会也可能随时会降临到你身上，你前期所有的努力都是在努力规避风险，以及抓住哪些转瞬即逝的机会 |
|---|
更多推荐
HTML与CSS案例——人物简介
发布评论