该简历由两大部分组成：
- 左侧的个人信息、个人技能等
- 右侧的工作经验、取得的成就等
每一部分又分为一个个小的栅格，其中包含了大量的面板。在进度条那儿需要注意的是一定要加上进度条的宽度（style="width:93%"）。
在指挥生涯和工作经验这两个面板中，分别运用了无序列表和斑马表格的方法来呈现内容。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>个人简历</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="./css.css" />
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<!--左边栏-->
<div class="col-md-3">
<!--左边栏“个人信息”-->
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">个人信息</div>
</div>
<div class="panel-body">
<div class="text-center">
<img src="./images/1.jpg" class="img-thumbnail img-circle">
<p class="caption">西本智实</p>
</div>
<div id="info-text">
<span class="glyphicon glyphicon-home"></span> 日本大阪市
<br>
<span class="glyphicon glyphicon-file"></span> 邮政编码：530-0000
<br>
<span class="glyphicon glyphicon-phone"></span> 联系电话：88888888
<br>
<span class="glyphicon glyphicon-envelope"></span> <a href="">mail11@mail.com</a>
</div>
</div>
</div>
</div>
<!--左边栏“个人技能”-->
<div class="row">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">个人技能</div>
</div>
<div class="panel-body">
<!--左边栏“个人技能”钢琴-->
<div class="row">
<div class="col-md-3 text-center">钢琴</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width:82%"></div>
</div>
</div>
</div>
<!--左边栏“个人技能”指挥-->
<div class="row">
<div class="col-md-3 text-center">指挥</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="93" aria-valuemin="0" aria-valuemax="100" style="width:93%"></div>
</div>
</div>
</div>
<!--左边栏“个人技能”芭蕾-->
<div class="row">
<div class="col-md-3 text-center">芭蕾</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100" style="width:87%"></div> </div>
</div>
</div>
</div>
</div>
</div>
<!--左边栏“联系我”-->
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">联系我</div>
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-4 control-label">电子邮箱</label>
<div class="col-md-8">
<input type="e-mail" class="form-control" placeholder="e-mail">
</div>
</div>
<div class="form-group">
<label class="col-md-4 cotrol-label text-center">姓名</label>
<div class="col-md-8">
<input class="col-md-9 form-control" type="text" placeholder="name">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-4 col-md-8">
<button type="submit" class="btn btn-default">发送</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--右边栏-->
<div class="col-md-9">
<!--右边栏巨幕-->
<div class="jumbotron">
<div class="text-primary text-center">
<p>《日本新闻周刊》“世界上100位最受尊敬的日本人”之一</p>
<p>2007年获选为瑞士达沃斯世界经济论坛<span class="text-danger">全球青年领袖人物</span></p>
<p>2002年起担任<span class="text-danger">Bolshoi</span>交响乐团首席指挥</p>
<p>1999年获颁斯<span class="text-danger">坦尼斯拉夫勋章</span></p>
</div>
</div>
<!--教育背景-->
<div class="row">
<div class="panel panel-primary education">
<div class="panel-heading">
<div class="panel-title">教育背景</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6 thumbnail text-center">
<img src="./images/大阪音大.png">
<p>1982年10月本科</p>
<p>大阪音乐大学——作曲系</p>
</div>
<div class="col-md-6 thumbnail text-center">
<img src="./images/圣彼得堡音乐学院.jpg">
<p>1986年研究生</p>
<p>圣彼得堡音乐学院</p>
</div>
</div>
</div>
</div>
</div>
<!--指挥生涯-->
<div class="row">
<div class="panel panel-info education">
<div class="panel-heading">
<div class="panel-title">指挥生涯</div>
</div>
<div class="panel-body">
<ul class="list-group">
<!--指挥生涯第一行-->
<li class="list-group-item">
<div class="row">
<div class="col-md-3">
<p>2002年至今</p>
</div>
<div class="col-md-6">
<p>莫斯科大剧院交响乐团“千禧”</p>
</div>
<div class="col-md-3">
<p>首席指挥</p>
</div>
</div>
</li>
<!--指挥生涯第二行-->
<li class="list-group-item">
<div class="row">
<div class="col-md-3">
<p>2004至2007年</p>
</div>
<div class="col-md-6">
<p>俄罗斯交响乐团</p>
</div>
<div class="col-md-3">
<p>首席指挥和艺术总监</p>
</div>
</div>
</li>
<!--指挥生涯第三行-->
<li class="list-group-item">
<div class="row">
<div class="col-md-3">
<p>2004至2006年</p>
</div>
<div class="col-md-6">
<p>圣彼得堡穆索尔斯基国家学术歌剧院和芭蕾舞剧院</p>
</div>
<div class="col-md-3">
<p>首席客座指挥</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--右边栏工作经验-->
<div class="row">
<div class="panel panel-danger education">
<div class="panel-heading">
<div class="panel-title">工作经验</div>
</div>
<div class="panel-body">
<table class="table text-center table-striped">
<tr>
<td>2004年</td>
<td>莫斯科新年音乐会</td>
<td>列兹金卡舞曲</td>
</tr>
<tr>
<td>2016年</td>
<td>梵蒂冈国际音乐节</td>
<td>贝多芬第九交响曲</td>
</tr>
<tr>
<td>2018年</td>
<td>中日和平友好条约缔结40周年交响合唱音乐会</td>
<td>关峡第一交响序曲</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
CSS
/*个人信息栏内的图标及文字样式*/
#info-text{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
line-height: 1.5;
}
.glyphicon{
margin-right: 10px;
}
/*巨幕字体*/
.text-danger{
padding:5px;
background-color: rgb(248, 247, 247);
}
/*教育背景栏*/
.thumbnail{
width: 400px;
margin:5px 10px;
}
.thumbnail p{
margin-top: 10px;
font-size: 20px;
}
.education{
width: 847.5px;
margin-left: 16px;
}
最后成果如下图：
西本智实.png
网友评论