首页 > 代码库 > CSDN文章列表的CSS实现
CSDN文章列表的CSS实现
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=http://www.mamicode.com/"www.csdn.com">CSDN有需要的可以直接去用，如有疑问联系：
QQ：1004740957
CSDN文章列表的CSS实现
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。