前端：聊天室界面 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css魔法</title>
<style type="text/css">
*{ margin:0; padding:0; border:0; outline:0; font-family:"Microsoft YaHei";}
body{ font-size:12px;}
#box{ width:200px; height:200px; background:orange; position:absolute; left:0; top:0;} 

.f-cb{ zoom:1;}
.f-cb:after,.f-cb:before{ clear:both; content:""; display:table; height:0; }


ul{ list-style:none;}

.m{ width:700px; padding:20px; border:1px solid  #ccc; margin:50px auto; overflow:hidden;}
.m1 { position:relative; }
.m1:after,.m1:before { clear:both; content:""; display:table; height:0; margin-bottom:20px;}
.m1 dt a{ width:60px; height:60px; background:#CCC; display:inline-block; text-align:center; line-height:60px; }
.m1 dd{ max-width:274px; border:1px solid #ccc; border-radius:3px; padding:10px ;  background:#ccc; box-sizing:border-box; position:relative;}
.m1 dd:before{ position:absolute; bottom:5px;  content:""; border-width:10px; border-style:solid; }
.m1.he dd:before,.m1.vhe dd:before{ left:-20px; border-color:transparent #ccc  transparent transparent;   }
.m1.me dd:before,.m1.vme dd:before{ right:-20px; border-color:transparent  transparent transparent  #ccc; }
.m1.he dt { float:left; }
.m1.he dd{ margin-left:20px; margin-top:20px ;float:left; }
.m1.me dt { float:right; margin-left:20px;}
.m1.me dd { float:right; margin-top:20px;}

.m1.he dt a{ float:left; }
.m1.he dt span{ display:block; float:left;  margin-right:-200px; color:#666; margin-left:20px;}

.m1.me dt a{ float:right; }
.m1.me dt span{ display:block; float:right;  margin-left:-200px; color:#666; margin-right:20px;}


.m1.vhe dt a{ position:absolute; bottom:0; }
.m1.vhe dt span{ padding-left:80px; }
.m1.vhe dd{ margin-left:80px; margin-top:5px;}
 
.m1.vme dt a{ position:absolute; bottom:0; right:0;}
.m1.vme dt span{ padding-right:80px; text-align:right; display:block; }
.m1.vme dd{ margin-right:80px; margin-top:5px; float:right;}



a:link,a:visited {
    color: black;
    text-decoration: none;
}
a:hover,a:active {
    text-decoration: underline;
}



.m02{ width:318px; border:1px solid #999; margin-left:20px;  }
.m2 li{ clear:both; display:table; padding-left:20px;}
.m2{ width:168px;  }
.m2 li a{float:left; max-width:168px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.m2 li span{ float:left; padding-left:10px; margin-right:-100px;}
</style>

<script src="js/jquery-1.11.1.js" type="text/javascript"></script>

</head>


<body>
<div class="m">
    <dl class="vhe m1">
        <dt><a>哥哥</a><span>2015-09-11</span></dt>
        <dd>我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试</dd>
    </dl>
    <dl class="me m1">
        <dt><a>丫头</a><span>2015-09-11</span></dt>
        <dd>我是测试我是测试我是测测试我是测试试</dd>
    </dl>
    <dl class="he m1">
        <dt><a>哥哥</a><span>2015-09-11</span></dt>
        <dd>我是测试我是测试我</dd>
    </dl>
    <dl class="vme m1">
        <dt><a>丫头</a><span>2015-09-11</span></dt>
        <dd>我是测试我是测试我是测测试我是我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试我是测试测试试</dd>
    </dl>
</div>
<!--<div id="box"></div>-->

</body>
</html>

转自:http://www.qdfuns.com/notes/17573/05dacfea83026b5fc414a0705ee1c060.html

posted @ 2017-09-05 17:21  桃源仙居  阅读(244)  评论(0)    收藏  举报