css实现手机及时聊天通讯工具ui效果代码-html代码-BFW代码库

css实现手机及时聊天通讯工具ui效果代码

代码语言：html

代码描述：css实现手机及时聊天通讯工具ui效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.min.css">
<style>
    

body, html { font-size: 100%; 	padding: 0; margin: 0;}


/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}
* { margin: 0px; padding: 0px; }
body {
	background: #f0f1f2;
	font:12px "Open Sans", sans-serif; 
}
#view-code{
  color:#89a2b5;    
  opacity:0.7;
  font-size:14px;
  text-transform:uppercase;
  font-weight:700;
  text-decoration:none;
  position:absolute;top:660px;
  left:50%;margin-left:-50px;
  z-index:200;
}
#view-code:hover{opacity:1;}
#chatbox{
	width:290px;
	background:#fff;
	border-radius:6px;
	overflow:hidden;
	height:484px;
	position:absolute;
	top:120px;
	left:50%;
	margin-left:-155px;
}

#friendslist{
	position:absolute;
	top:0;
	left:0;
	width:290px;
	height:484px;
}
#topmenu{
	height:69px;
	width:290px;
	border-bottom:1px solid #d8dfe3;	
}
#topmenu span{
	float:left;	
	width: 96px;
    height: 70px;
    background: url("//repo.bfw.wiki/bfwrepo/image/60920b25f1d58.png") -3px -118px no-repeat;
}
#topmenu span.friends{margin-bottom:-1px;}
#topmenu span.chats{background-position:-95px 25px; cursor:pointer;}
#topmenu span.chats:hover{background-position:-95px -46px; cursor:pointer;}
#topmenu span.history{background-position:-190px 24px; cursor:pointer;}
#topmenu span.history.........完整代码请登录后点击上方下载按钮下载查看