转载请说明出处，小编博客地址：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>

版权声明：本文为博主原创文章，未经博主允许不得转载。

玩转Web之html+CSS(一)---论坛首页表格的实现的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. 分分钟带你玩转 Web Services【2】CXF

    在实践中一直在使用 JAX-WS 构建 WebService 服务,服务还是非常稳定.高效的. 但还是比较好奇其他的 WebService 开源框架,比如:CXF/Axis2/Spring WS等. ...

  3. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  4. “教你如何玩转Web响应式布局” 的更多相关文章

    “教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml

  5. web中的CSS、Xpath等路径定位方法学习

    今天不到八点就到公司了,来的比较早,趁着有点时间,总结下web中的CSS.Xpath等路径定位定位的方式吧! 简单的介绍下xpath和css的定位 理论知识就不罗列了 还是利用博客园的首页.直接附上代 ...

  6. web中用纯CSS实现筛选菜单

    web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...

  7. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  8. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  9. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

随机推荐

  1. Mahout SlopOne

    关于推荐引擎 如今的互联网中,无论是电子商务还是社交网络,对数据挖掘的需求都越来越大了,而推荐引擎正是数据挖掘完美体现:通过分析用户历史行为,将他可能喜欢内容推送给他,能产生相当好的用户体验,这就是推 ...

  2. LeetCode(38)-Valid Sudoku

    题目: Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could ...

  3. obj-c编程15[Cocoa实例03]:MVC以及归档化示例

    前面的博文里介绍了归档和解档,这里我们把它实际应用到一个简单的代码中去,将它作为一个多文档应用程序的打开和保存的背后支持.另外这里介绍一下MVC思想,这个在任何语言里都会有,它是一种设计思想,主要可以 ...

  4. python 网络框架twisted基础学习及详细讲解

    twisted网络框架的三个基础模块:Protocol, ProtocolFactory, Transport.这三个模块是构成twisted服务器端与客户端程序的基本.Protocol:Protoc ...

  5. 高并发教程-基础篇-之nginx负载均衡的搭建

    温馨提示:请不要盲目的进行横向扩展,优先考虑对单台服务器的性能优化,只有单台服务器的性能达到最优化之后,集群才会被最大的发挥作用. 一.架构图: 服务器准备:3台,ubuntu16.04系统maste ...

  6. div学习之div中dl-dt-dd的详解

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  7. MVC3 项目总结

    验证 Validation 多样化验证规则 http://www.cnblogs.com/xling/archive/2012/07/11/2587002.html 最常见的验证方式是:在实体的属性上 ...

  8. sublime使用package control安装插件

    sublime本身可以集成Package Control来进行插件安装,非常方便. 1. 安装package control(插件包管理) 1.1 进入https://packagecontrol.i ...

  9. Django升级1.9.6出现的中文本地化bug

    Error日志: Error opening file for reading: Permission denied ERROR Internal Server Error: / Traceback  ...

  10. 走进netty

    三月份开始看公司RPC框架的源码,发现如果要折腾明白,网络通讯这块知识必不可少.于是从如下几点开始逐步研究. 一.基础知识篇 1.Unix下5种I/O模型 Linux的内核将所有外部设备都看作一个文件 ...