简约大气的移动端的消息列表

来源:https://www.sucaihuo.com/js/2656.html 2017-08-06 23:11浏览(1013) 收藏

一款简约大气的移动端的消息列表,点开每个消息时会有一个展开的内容窗口遮罩住原有窗口,并显示预设的消息内容(消息内容可以自由设置的),点击消息左上角的箭头会有收缩消息窗口恢复初始界面,整体效果还是不错的,喜欢的童鞋请收下吧。
简约大气的移动端的消息列表
分类:导航菜单 > 展开收缩 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2