一款简约大气的移动端的消息列表,点开每个消息时会有一个展开的内容窗口遮罩住原有窗口,并显示预设的消息内容(消息内容可以自由设置的),点击消息左上角的箭头会有收缩消息窗口恢复初始界面,整体效果还是不错的,喜欢的童鞋请收下吧。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791