一个Web IM的UI练习

<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>

/* 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;}