转载请说明出处，小编博客地址：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. 内核调试神器SystemTap — 更多功能与原理（三）

    a linux trace/probe tool. 官网:https://sourceware.org/systemtap/ 用户空间 SystemTap探测用户空间程序需要utrace的支持,3.5 ...

  2. ionic1 sqlite的添加使用

    开始使用这个存储方式的原因是  之前用的Local Storage 存储在ios设备上  当内存达到一定程度时 ios会自动清除app的一部分存储 所以之前存的东西可能会被清除  达不到想要的功能效果 ...

  3. machine learning 之 Neural Network 2

    整理自Andrew Ng的machine learning 课程 week5. 目录: Neural network and classification Cost function Backprop ...

  4. remove Nth Node from linked list从链表中删除倒数第n个元素

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...

  5. docker的安装和基础使用

    Docker EE/Docker CE简介与版本规划 版本区别 Docker EE Docker EE由公司支持,可在经过认证的操作系统和云提供商中使用,并可运行来自Docker Store的.经过认 ...

  6. MLDS笔记：Generalization

    1 泛化能力 用VC维来衡量一个模型的表达能力,比如2维线性模型的VC维为3. 在图1-2中,随便给啥训练数据该model都能learn起来. 从理论上来看,当2个model在训练数据上表现一样时,为 ...

  7. Mybatis批量更新数据库与批量插入数据库（以oracle为例）

    一.批量更新 1.普通写法(一条记录update一次,性能比较差,容易造成阻塞.不建议使用) <update id="updateBatch" parameterType=& ...

  8. mysql-索引、关系、范式

    索引 几乎所有的索引都是建立在字段之上 索引:系统根据某种算法,将已有的数据(未来可能新增的数据也算),单独建立一个文件,这个文件能够快速的匹配数据,并且能够快速的找到对应的表中的记录 索引意义 能够 ...

  9. my views--软件工程、python

    这是大三第二学期开的一门课,由吴世枫老师和王韬助教教的. 大一开了C语言,大二开了java.matlab,而用得最多的应该是学java顺便学会的C++了.matlab在实训和数学建模用了多次,尤其是数 ...

  10. java 一维数组

    数组的概念?有什么特点? 数组是指一组数据的集合,数组中的每个数据被称作元素.在数组中可以存放任意类型的元素,但同一个数组里存放的元素类型必须一致. 一维数组的定义格式? 数据类型[]   名称  = ...