核心提示:最近本来想去写一个类似论坛的页面,论坛首页一般都需要一个表格去显示数据,自己简单的写了一下,先上一张图css代码:/*基本信息*/body{margin:0px; /*外边距*/text-align:...
最近本来想去写一个类似论坛的页面,论坛首页一般都需要一个表格去显示数据,自己简单的写了一下,先上一张图

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代码:
| 标题 | 作者 | 回复/查看 | 最后更新时间 |
|---|---|---|---|
| 谁是下一个六道? | 岸本齐史 | 11/123 | 2014/7/12 |
| 宇智波鼬? | 岸本齐史 | 23/132 | 2014/7/12 |
| 路飞实力大分析 | 尾田荣一郎 | 21/132 | 2014/7/12 |


