CSDN文章列表的CSS实现
浏览数：36 /
时间：2015年06月09日
CSDN文章的列表视图如下：
看起来，还是挺好看的，本文用CSS实现该效果，实现后得效果如下：
直接贴代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>
<style>
html,body,table{
font-size: 12px;
font-family: "宋体";
text-align: center;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
.top{
background: #48525e;
height: 30px;
color: #fff;
padding-right: 20px;
padding-top: 13px;
font-family: Arial Unicode MS, Arial, sans-serif;
}
.top_links{
text-align: right;
font-size: 12px;
width: 800px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
}
a{
color: #fff;
text-decoration: none;
}
a:hover{
cursor: pointer;
font-weight: bold;
}
.top_logo{
float: left;
font-weight: bold;
font-size: 15px;
margin-left: 10px;
}
.box{
margin:10px auto 10px auto;
border: 1px solid #bfbfbf;
width: 800px;
text-align: center;
font-size: 100pt;
color:#3B5998 ;
padding: 30px 0px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
}
table{
width: 800px;
border-collapse: collapse;
border: none;
color: #3B5998;
text-align: center;
}
tr{
border: none;
border-top: 1px solid #bfbfbf;
}
tr:hover{
background: #FFFFCC;
}
.trTitle{
font-weight: bold;
color:#000;
border: none;
border-bottom: 2px solid #bfbfbf;
}
.trTitle:hover{
background: #fff;
}
.altitem{
background: #eee;
}
.tdleft{
text-align: left;
}
.tdleft:hover{
cursor: pointer;
text-decoration: underline;
}
span{
color: #000;
}
.page_nav{
padding-top: 8px;
width: 800px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
text-align: center;
}
.page_num{
border: 1px solid #dbe5ee;
padding: 3px 8px;
border-radius:3px;
}
.page_num:hover{
cursor: pointer;
text-decoration: underline;
}
.page_num_active{
background: #07519a;
color: #fff;
}
</style>
</head>
<body>
<div>
<div class="top">
<div class="top_links">
<div class="top_logo"><a href="www.csdn.com">CSDN</a></div>
<a>首页</a> | <a>我的博客</a> | <a>联系我们</a>
</div>
</div>
<div class="box">
CSDN
</div>
<table cellpadding="9">
<tbody>
<tr class="trTitle">
<td class="tdleft">标题</td>
<td>状态</td>
<td>浏览</td>
<td>评价</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr class="altitem">
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
<tr>
<td class="tdleft">Arcgis for Js之鼠标经过显示对象名的实现（2014-12-12 09:00）</td>
<td> </td>
<td>12</td>
<td>23</td>
</tr>
</tbody>
</table>
<div class="page_nav">
<span>76条数据 共4页</span>
<span>
<span class="page_num">首页</span>
<span class="page_num">上一页</span>
<span class="page_num">1</span>
<span class="page_num page_num_active">2</span>
<span class="page_num">3</span>
<span class="page_num">下一页</span>
<span class="page_num">尾页</span>
</span>
</div>
</div>
</body>
</html>有需要的可以直接去用，如有疑问联系：
QQ：1004740957
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
