一個Web IM的UI練習

原創 trace332 2018-08-22 02:55

  一個Demo。只完成了html+css部分，還沒來及添加交互的js以及更多想法是用websocket做個後臺


  html -

		<div class="im_wrap">
			
			<div class="im_header rad2">
				
				<div class="lay1">
					<div class="oper_bar r">
						<a href="#" class="oper_min oper_change_skin"></a>
						<a href="#" class="oper_min oper_mini"></a>
						<a href="#" class="oper_min oper_close"></a>
					</div>
					<span class="nickname">雲起</span>
				</div>
				
				<div class="lay2">
					<div class="oper_bar">
						<a href="#" class="oper oper_a1"></a>
						<a href="#" class="oper oper_a2"></a>
						<a href="#" class="oper oper_a3"></a>
					</div>
					<div class="oper_bar r">
						<a href="#" class="oper oper_a4"></a>
					</div>
				</div>
				
			</div>
			
			
			<div class="im_body">
				
				<div class="im_search">
					<form action="">
						<input typ=="text" class="search_input rad4" placeholder="查找"/>
					</form>
					<span class="search_icon"></span>
				</div>
				
				<div class="im_list_wrap">
					<dl class="open_status">
						<dt><span class="type_name">最近聯繫人</span> <span class="num">(0/3)</span></dt>
						<dd style="display:none;">
							<ul class="im_list">
								<li>
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st online">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
								</li>
								<li class="cur">
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st mobile">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
								</li>
								<li>
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st offline">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
								</li>
							</ul>
						</dd>
					</dl>
					<dl>
						<dt class="cur"><span class="type_name">我的好友</span> <span class="num">(2/5)</span></dt>
						<dd>
							<ul class="im_list">
								<li>
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st online">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
									<div class="personal_info_wrap">
										
										<div class="p_info">
											
											<img src="pic/p1.jpg" class="p_face" alt="" />
											
											<p class="p_name">雲起</p>
											<p>男，上海 浦東</p>
											<p>關注：100 粉絲：100 微博：1000</p>
											<p class="p_sign">又是一個大晴天</p>
										</div>
										
										<div class="p_oper">
											<a class="follow">+ 加關注</a>
											<span class="followed">√ 已關注 | <a href="">取消</a></span>
										</div>
									</div>
								</li>
								<li class="cur">
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st mobile">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
								</li>
								<li>
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st offline">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
								</li>
								<li>
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st offline">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
								</li>
								<li>
									<div class="face">
										<img src="pic/p1.jpg" alt="" />
										<span class="st offline">online</span>
									</div>
									<div class="im_info">
										<div class="u_name">雲起</div>
										<div class="sign">又是一個大晴天</div>
									</div>
								</li>
							</ul>
						</dd>
					</dl>
					<dl>
						<dt><span class="type_name">陌生人</span> <span class="num">(3/8)</span></dt>
						<dd></dd>
					</dl>
					
					<div class="bottom">
						<div class="close_wrap">▲</div>
					</div>
				</div>
			</div>
			
		</div>

css-


/* global */
.h30{height:30px;}
.rad2{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.rad4{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}


.im_wrap{
	position:fixed;left:0;top:150px;
	width:250px;height:80px;
	background:#fff;z-index:3000;
}


/* header */
.im_header{
	width:250px;height:52px;
	background: url(../images/im/header_bg.png) repeat-x 0 0;
	box-shadow:0 0 5px #518CEA;
}


/* -lay1 */
.lay1{height:22px;}

.nickname{padding-left:30px;color:#fff;}

.oper_min{
	float:left;display:inline;margin:1px;
	width:18px;height:18px;overflow:hidden;
	background:url(../images/im/oper_min.png) no-repeat -2px 0;
}
.oper_change_skin{background-position:-2px 0;}
.oper_mini{background-position:-24px 0;}
.oper_close{background-position:-44px 0;}

.oper_change_skin:hover{background-position:-2px -19px;}
.oper_mini:hover{background-position:-24px -19px;}
.oper_close:hover{background-position:-44px -19px;}


/* -lay2 */
.lay2{height:30px;}

.oper{
	float:left;display:inline;margin:1px;
	width:25px;height:25px;overflow:hidden;
	background:url(../images/im/oper.png) no-repeat -36px 0;
}
.oper_a1{background-position:-36px 0;}
.oper_a2{background-position:-65px 0;}
.oper_a3{background-position:-107px 0;}
.oper_a4{background-position:-276px 0;}

.oper_a1:hover{background-position:-36px -27px;}
.oper_a2:hover{background-position:-65px -27px;}
.oper_a3:hover{background-position:-107px -27px;}
.oper_a4:hover{background-position:-276px -27px;}


/* body */

/* -search */
.im_search{
	padding:0 5px;position:relative;
	height:36px;line-height:36px;
	background:#EDEDED url(../images/im/search_bg.png) repeat-x 0 0;
}
.search_input{
	position:absolute;top:6px;left:5px;z-index:1;
	padding-left:25px;
	width:212px;height:22px;line-height:22px;
	border:1px solid #DDDDDD;color:#787878;
}
.search_icon{
	position:absolute;top:7px;left:10px;z-index:2;
	width:21px;height:22px;
	background:url(../images/im/search.png) no-repeat 0 0;
}




/* -im_list_wrap */
.im_list_wrap{margin-top:-2px;padding-top:2px;background:#fff;}
.im_list_wrap dl{}
.im_list_wrap dt{
	margin:2px 0;
	height:20px;line-height:20px;
	font-size:12px;
}
.im_list_wrap dt:hover{
	background:url(../images/im/type_list_bg_hover.png) repeat-x 0 0;
}
.im_list_wrap dt.cur{
	background:url(../images/im/type_list_bg.png) repeat-x 0 0;
}

.im_list_wrap dt span.num{font-size:11px;}
.im_list_wrap dt span.type_name{
	padding-left:20px;
	background:url(../images/im/arr_01.png) no-repeat 10px 3px;
}
.im_list_wrap dl.open_status span.type_name{
	background:url(../images/im/arr_02.png) no-repeat 8px 5px;
}


/* -im_list */
.im_list{}
.im_list li{
	position:relative;
	padding:10px 0 10px 22px;
	height:30px;/* overflow:hidden */;
}
.im_list li:hover{
	background:url(../images/im/li_bg_hover.png) repeat-x 0 0;
}
.im_list li.cur{
	background:url(../images/im/li_bg_cur.png) repeat-x 0 0;
}
.im_list .face{
	float:left;display:inline;position:relative;
}
.im_list .face img{
	width:30px;height:30px;
	-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;
}
.face .st,
.face .online,
.face .offline,
.face .mobile{
	position:absolute;bottom:5px;right:0px;
	width:9px;height:9px;overflow:hidden;text-indent:-2000px;
	background:url(../images/im/st_online.png) no-repeat 0 0;
}
.face .offline{
	background:url(../images/im/st_offline.png) no-repeat 0 0;
}
.face .mobile{
	width:9px;height:12px;bottom:6px;
	background:url(../images/im/st_mobile.jpg) no-repeat 0 0;
}

 
.im_list .im_info{
	float:left;margin-left:9px;display:inline;
	width:170px;height:35px;overflow:hidden;
}
.im_info .u_name{margin-top:-3px;width:180px;height:15px;overflow:hidden;line-height:15px;}
.im_info .sign{color:#999999;}


/* -bottom */
.bottom {
	margin-top:1px;
	height:14px;line-height:14px;
	background:#E8E8E8;text-align:center;
	font-size:12px;color:#9C9C9C;
}
.bottom .close_wrap{
	margin:0 auto;
	width:94px;height:13px;
}
.bottom .close_wrap:hover{background:#838383;color:#E8E8E8;}


/* -personal_info */
.personal_info_wrap{
	position:absolute;left:251px;top:0;padding:3px;/* --!!! */display:block;
	width:260px;height:134px;z-index:2000;
	border:1px solid #A9AFAF;background:#fff url(../images/im/p_info_bg.png) repeat-x 0 0;
}
.p_info{
	padding-top:9px;
	height:102px;
	border-bottom:1px solid #DBDBDB;
}
.p_face{
	float:left;display:inline;margin:0 7px 0 9px;
	width:50px;height:50px;
	-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;
}
.p_info p{float:left;display:inline;width:190px;height:19px;line-height:19px;overflow:hidden;}
.p_name{margin-top:-3px;}
.p_info .p_sign{padding-left:10px;width:245px;height:40px;overflow:hidden;color:#888888;}

.p_oper{
	height:20px;
	border-top:1px solid #F9F9F9;
}

.follow, .followed{padding:3px 5px;background:#70C04C;color:#fff;cursor:pointer;}
.follow:hover, .followed:hover{text-decoration:none;}
.followed{background:#EAEAEA;color:#666;}


.im_list li:hover .personal_info_wrap{display:block;}

如圖：



發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Android平臺調用WebService詳解

推薦碼發放 2019-02-24 19:41:33

某熊的技術之路指北 ☯

王下邀月熊_Chevalier 2019-02-23 16:23:03

Http反響代理

老夫_子 2019-02-23 13:31:39

全新的JoyiStar AJAX WebShop3.0體驗版本功能預覽

中原是戲臺 2019-02-23 13:27:57

寶塔面板 + Rancher + 阿里雲鏡像倉庫 + Docker + Kubernetes，添加集羣、部署 web 應用

燕小范 2019-02-23 13:20:14

JavaWeb應用開發架構淺談

liujie62588 2019-02-23 13:18:45

wordpress函數

hulangbo453 2019-02-23 13:03:55

jQuery 插件開發

liudajiang 2019-02-23 12:53:51

什麼是web

zhenjunwei 2019-02-23 00:39:19

MySQL 事務、函數、觸發器、數據庫備份、權限管理

死瘦宅 2019-02-24 22:35:12

包、異常

死瘦宅 2019-02-24 19:31:11

Spring Cloud Alibaba基礎教程：支持的幾種服務消費方式（RestTemplate、WebClient、Feign）

程序猿dd 2019-02-24 10:41:27

mongo php類

wjp13671142513 2019-02-23 13:37:36

python——list總結

小止1995 2019-02-23 12:58:20

stark組件5_擴展url

jedi911 2019-02-23 00:42:19