页面的head部分，需引入一个CSS样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，主要用了多个li标签存放消息列表，整个放入一个div容器里，代码如下：

<div class="view">
	<div class="card__full">
		<div class="card__full-top">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
					<path d="M16.59 8.59l-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z"/>
					<path d="M0 0h24v24h-24z" fill="none"/>
			</svg>
			<span class="card__full-num"></span>
		</div>
		<div class="card__full-bottom">
			<p class="card__full-handle"></p>
			<p class="card__full-info"></p>
		</div>
	</div>
	<ul class="card__list">
		<li class="card__item card__item--blue">
			<div class="card__info">
				<div class="info-player">
					<p class="info-player__num">9</p>
					<p class="info-player__name"><small>汤姆</small><br>克鲁斯</p>
				</div>
				<div class="info-place">1<sup>st</sup></div>
			</div>
		</li>
		<li class="card__item card__item--purple">
			<div class="card__info">
				<div class="info-player">
					<p class="info-player__num">18</p>
					<p class="info-player__name"><small>汤姆</small><br>汉克斯</p>
				</div>
				<div class="info-place">2<sup>nd</sup></div>
			</div>
		</li>
		<li class="card__item card__item--green">
			<div class="card__info">
				<div class="info-player">
					<p class="info-player__num">12</p>
					<p class="info-player__name"><small>尼古拉斯</small><br>凯奇</p>
				</div>
				<div class="info-place">3<sup>rd</sup></div>
			</div>
		</li>
		<li class="card__item card__item--yellow">
			<div class="card__info">
				<div class="info-player">
					<p class="info-player__num">7</p>
					<p class="info-player__name"><small>小罗伯特</small><br>唐尼</p>
				</div>
				<div class="info-place">4<sup>th</sup></div>
			</div>
		</li>
		<li class="card__item card__item--tan">
			<div class="card__info">
				<div class="info-player">
					<p class="info-player__num">9</p>
					<p class="info-player__name"><small>斯嘉丽</small><br>约翰逊</p>
				</div>
				<div class="info-place">5<sup>th</sup></div>
			</div>
		</li>
		<li class="card__item card__item--orange">
			<div class="card__info">
				<div class="info-player">
					<p class="info-player__num">18</p>
					<p class="info-player__name"><small>克里斯</small><br>埃文斯</p>
				</div>
				<div class="info-place">6<sup>th</sup></div>
			</div>
		</li>
	</ul>
</div>

页面的底部，需远程调用jQuery库，并引入本地的JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>