<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文件消息展示样式demo</title>
<style>
.info{
300px;
height: 90px;
border-radius: 5px;
background: #F9F9FB;
border: 1px solid #ccc;
margin-bottom: 15px;
}
.info dl,dt,h3,dd,p{
margin: 0;
padding: 0;
list-style: none;
font: 12px arial;
}
.info dl{
height: 60px;
border-bottom: 1px solid #CCC;
}
.info dt{
80px;
float: left;
height: 60px;
background: pink;
}
.info dt img{
height: 60px;
60px;
margin-left: 10px;
}
.info dd{
float: left;
}
.info h3{
color: #666;
font: 16px/40px arial;
max- 190px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info dd p{
color: #ccc;
}
.info .b{
height: 30px;
padding: 0 10px;
font: 12px/30px 微软雅黑;
}
.info .b span{
color: blue;
float: right;
}
</style>
</head>
<body>
<div class = "info">
<dl>
<dt><img src="" alt=""></dt>
<dd>
<h3>b11111lossssssssssssssssssssssssssssssssssssssgs.zip</h3>
<p>8.8KB</p>
</dd>
</dl>
<p class="b">文件<span><a href = "" target="_blank">下载</a></span></p>
</div>
</body>
</html>