核心提示:最近本来想去写一个类似论坛的页面,论坛首页一般都需要一个表格去显示数据,自己简单的写了一下,先上一张图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 |