简单晒单效果的实现
效果展示
代码实现
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta charset="utf-8" />
<style>
body{
font:12px Arial,"microsoft yahei";
color:#666;
}
#discuss,div.lie,#discuss_content,#discuss_datas{
width:1000px;
}
div.lie{
height:30px;
border:1px solid #ddd;
border-top:2px solid #999;
background:#f7f7f7;
}
div.lie a{
color:#005aa0;
text-decoration:none;
float: left;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
}
a{
color:#005aa0;
text-decoration:none;
}
#discuss .lie a.current{
border:1px solid #ddd;
border-bottom:none;
border-top:2px solid #e4393c;
background:#fff;
margin-top:-6px;
height:35px;
line-height:35px;
color:#e4393c;
}
#discuss_content{
border-bottom:1px solid #ddd;
}
#discuss_datas{
border-spacing:2px;
}
#discuss_datas td{
text-align:center;
padding:6px 0px;
border-bottom:1px dotted #dedede;
}
#discuss_datas tr.header td{
font-weight:bold;
border-bottom:1px solid #dedede;
}
#discuss_datas td.col1{
width:620px;
text-align:left;
}
#discuss_datas td.col2{width:70px;}
#discuss_datas td.col3{width:80px;}
b.topic{
padding-left:20px;
padding-bottom:5px;
background:url(bg.png) no-repeat;
margin-right:5px;
}
b.shai{
background-position:-110px -220px;
}
b.lun{
background-position:-152px -220px;
}
</style>
</head>
<body>
<div id="discuss">
<div class="lie">
<a href="#">网友讨论圈</a>
<a href="#" class="current">晒单贴</a>
<a href="#">谈论贴</a>
<a href="#">问答帖</a>
<a href="#">圈子帖</a>
</div>
<div id="discuss_content">
<table id="discuss_datas">
<tr class="header">
<td class="col1">主题</td>
<td class="col2">回复/浏览</td>
<td class="col3">作者</td>
<td class="col4">时间</td>
</tr>
<tbody>
<tr>
<td class="col1">
<b class="topic shai"></b>
<a href="#">东西不错,非常合适</a>
</td>
<td>24/100</td>
<td>
<a href="#">越少</a>
</td>
<td>2015-12-22 10:24:37</td>
</tr>
<tr>
<td class="col1">
<b class="topic lun"></b>
<a href="#">颜色不是太好</a>
</td>
<td>35/111</td>
<td>
<a href="#">撒上的飞</a>
</td>
<td>2015-12-15 20:01:05</td>
</tr>
<tr>
<td class="col1">
<b class="topic shai"></b>
<a href="#">穿在我身上刚刚好</a>
</td>
<td>12/44</td>
<td>
<a href="#">冬天不眠</a>
</td>
<td>2015-12-10 12:24:11</td>
</tr>
<tr>
<td class="col1">
<b class="topic lun"></b>
<a href="#">这就是卖家秀与买家秀的区别</a>
</td>
<td>112/1000</td>
<td>
<a href="#">阿卜杜</a>
</td>
<td>2015-12-07 14:12:56</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>