玩转Web之html+CSS(一)---论坛首页表格的实现

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

转载请说明出处，小编博客地址：http://blog.csdn.net/u012116457

最近本来想去写一个类似论坛的页面，论坛首页一般都需要一个表格去显示数据，自己简单的写了一下，先上一张图

css代码：

/*基本信息*/
body{
margin:0px; /*外边距*/
text-align:left; /*文字居中对齐*/
font-family: 'trebuchet MS', 'Lucida sans', Arial;
font-size: 14px;
background:#E1D0BB; /*背景色*/
}
/*页面层容器*/
#container{
width:70%;
height:100%;
margin-left:15%;
margin-right:15%;
background:#ABE0F1;
}
/*头部*/
#header{
width:100%;
height:30%;
margin:0px;
background:#ffffff;
}
/*页面主体*/
#pageBody{
width:100%;
height:70%;
margin:0px;
background:#ffFFFF;
}
/* 总表格 */
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0; /* 列之间不显示分割线 */
width: 100%;
}.zebra td, .zebra th {
padding: 8px; /* 控制表格每行高度 */
border-bottom: 1px solid #FFFFFF; /*每行边界的宽度，颜色*/
}.zebra tbody tr:nth-child(even) {
background: #f0f0f0; /* 偶数行的颜色，即设置相邻两行颜色不同 */
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; /*设置阴影*/
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
/* 表头样式设置 */
.zebra th {
text-align: left; /* 文本左对齐 */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
border-bottom: 1px solid #ccc;
background-color: #eee; }.zebra tr td a:link,.zebra tr td a:visited{
font-size:15px;
text-decoration:none;
color:blue; /* 平时的颜色 */
}
.zebra tr td a:hover{
font-width:800;
text-decoration:underline;
color:red; /*鼠标悬空的颜色*/
}
/*表格底部*/
.zebra tfoot td {
border-bottom: 0;
border-top: 1px solid #fff;
background-color: #f1f1f1;
}/* 用于显示页数的一个小表格 */
.pageTable{
width
border=0;
}
/* 页脚 */
#footer{
width:100%;
height:10%;
margin:0px;
background:#FFFF00;
}

html代码：

<!DOCTYPE html>
<html>
<head>
<title>贴吧首页</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../styles/postBarFirstPage.css">
</head> <body>

<div id="container">

<div id="header"> </div> 
<div id="pageBody">

<table class="zebra">
<thead>
<tr>
<th>标题</th>
<th>作者</th>
<th>回复/查看</th>
<th>最后更新时间</th>
</tr>
</thead>

<tfoot>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot> <tr>
<td><SPAN title="谁是下一个六道？"
class=smallfont><STRONG><a href="#">谁是下一个六道？</a></STRONG></SPAN></td>
<td>岸本齐史</td>
<td>11/123</td>
<td>2014/7/12</td>
</tr> <tr>
<td><SPAN title="宇智波鼬"
class=smallfont><STRONG><a href="#">宇智波鼬？</a></STRONG></SPAN></td>
<td>岸本齐史</td>
<td>23/132</td>
<td>2014/7/12</td>
</tr> <tr>
<td><SPAN title="路飞实力大分析"
class=smallfont><STRONG><a href="#">路飞实力大分析</a></STRONG></SPAN></td>
<td>尾田荣一郎</td>
<td>21/132</td>
<td>2014/7/12</td>
</tr>
</table> </div>

<div id="footer"> </div>
</div>
</body>
</html>