一个Web IM的UI练习

  一个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;}

如图：