首页 > 代码库 > 玩转Web之html+CSS(一)---论坛首页表格的实现
玩转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=http://www.mamicode.com/"../styles/postBarFirstPage.css">>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。