转载请说明出处，小编博客地址：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. SQL Queries and Multi-Org Architecture in Release 12

    In this Document   Abstract   History   Details   Previous Releases   Release 12   Multi-Org Session ...

  2. SharePoint WebPart 简单的读取列表内容的web部件

    最近,自己也在学习写一些SharePoint的部件,也就是使用对象模型,下面,介绍一下自己刚刚写的小测试程序,不足之处,还请指正. 1.  新建项目 Vs2008 – 新建 – 项目 – 类库 – 输 ...

  3. javascript、ruby和C性能一瞥(2)

    好吧,最后让我们用C来实现,看看再能榨取多少性能.注意我没有改变算法,C的算法和之前的3种都是基本相同的: #include <stdio.h> #include <stdlib.h ...

  4. ELF 文件 动态链接 - 地址无关代码（GOT）

    Linux 系统中,ELF动态链接文件被称为 动态共享对象(DSO,Dynamic Shared Object),简称共享对象 文件拓展名为".so" 动态链接下 一个程序可以被分 ...

  5. 从小故事来谈nginx负载均衡

    负载均衡 负载均衡是任何一个有一定规模的互联网企业都会考虑的问题,负载方式很多,有依靠硬件实现的,也有依靠软件实现负载的. 今天来聊聊使用软件来负载的方式 你可能听过各自负载的方式,比如常见的ngin ...

  6. MQ队列管理器搭建（三）

    MQ集群及网关队列管理器的搭建 描述:     如上图所示,为MQ的集群搭建部署图.CLUSTERA.CLUSTERB分别是两个集群,其中Qm1-Qm3.GateWayA为CLUSTERA集群中的队列 ...

  7. Swap Nodes in Pairs(交换节点)

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  8. JavaScript设计模式之一Interface接口

    如何用面向对象的思想来写JavaScript,对于初学者应该是比较难的,我们经常用的JQuery其实也是用面向对象的思想去封装的,今天我们来看看如何在Javascript中用Interface,在C# ...

  9. JavaScript中对象数组 根据某个属性值 然后push到新的数组

    原文链接 https://segmentfault.com/q/1010000010075035 将下列对象数组中,工资大于1w的员工,增加到对象数组 WanSalary中 var BaiduUser ...

  10. FFPLAY的原理（四）

    意外情况 你们将会注意到我们有一个全局变量quit,我们用它来保证还没有设置程序退出的信号(SDL会自动处理TERM类似的信号).否则,这个线程将不停地运 行直到我们使用kill -9来结束程序.FF ...