效果图:
css部分
<style type="text/css">
*{
margin:0;padding:0;}
body{
font-size:12px;font-family:"微软雅黑";background:url("images/bg.jpg") no-repeat;background-size:cover;color:#666;}
img{
border:0;}
ul li{
list-style:none;}
a{
text-decoration:none;}
.qq{
width:600px;height:200px;background:#fffcf4;border:1px solid #ebe3bc;margin:200px auto;position:relative;}
.qq .q_title{
font-size:14px;padding:10px 0 0 20px;}
.qq .q_msg{
width:538px;height:48px;border:1px solid #ebe3bc;margin:15px auto;background:#fff;font-size:14px;padding:10px;color:red;}
/*文本框里的表情有2px的间隔*/
.qq .q_msg img{
padding:2px;}
.qq .q_face{
float:left;margin-left:20px;}
/*按钮*/
.qq .btn{
width:80px;height:30px;border:0;background:orange;color:#fff;font-size:14px;font-family:"微软雅黑";border-radius:3px;margin-left:455px;