转载请说明出处，小编博客地址：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. PS 图像特效-非线性滤波器

    利用非线性滤波器,使图像的色彩凝块,形成一种近似融化的特效. clc; clear all; addpath('E:\PhotoShop Algortihm\Image Processing\PS A ...

  2. SharePoint 2010 之寻找页面布局

    习惯了2007的页面布局,虽然感觉不是太好用,尤其以开始接触时非常不理解页面布局和页面的关系,但是后来理清了,感觉还是很好用的,尤其对于相同格式的网站,修改布局而不改页面的情况,还是非常有效的,好了, ...

  3. obj-c编程15[Cocoa实例01]:一个会发声的随机数生成器

    哇!终于到了obj-c编程系列的第15篇喽,一路走过来满不容易的哦!(怎么个意思,这才哪到哪啊!),为了能够更好的练习obj-c在Cocoa框架上的编程,接下来会以N篇Cocoa实例的博文来巩固和记忆 ...

  4. RubyMotion之父：Ruby是目前替代Objective-C的最佳iOS开发语言

    发表于2012-08-16 00:52| 21716次阅读| 来源CSDN| 24 条评论| 作者杨鹏飞 RubyMotionRubyObjective-CiOSJava 摘要:曾几何时,PC端有那么 ...

  5. Windows7安装Pygame软件

    1. 工具包下载地址: Python下载地址: https://www.python.org/downloads/ pip下载地址:https://pypi.org/project/pip/#file ...

  6. 安装centOS后要解决的问题

    1,检查是否联网 ping www.baidu.com 未显示: 则表示网络未连接 首先关闭防火墙 sudo systemctl stop firewalld.service #停止firewall ...

  7. 《MySQL必知必会》读书笔记_4

    PS:一个实际的存储过程案例 CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_delete_article_by_id`(IN `id` int) BE ...

  8. Eclipse如何提高开发效率

    Ctrl+Shift+J 反向增量查找(和上条相同,只不过是从后往前查) Ctrl+Shift+F4 关闭所有打开的Editer Ctrl+Shift+X 把当前选中的文本全部变为小写 Ctrl+Sh ...

  9. Liunx权限修改命令

    语法: chmod  数值  文件名 例: chmod 644 mm.txt 命令执行后,文件mm.txt的权限值为 rw-r--r-- 详解:       权限分为 读.写.执行三种,分别用字母  ...

  10. spring3.1文档目录翻译

    整理google共享磁盘找到了2014年翻译的spring官方文档的目录,分享出来可能会对英语不好的同学有些帮助吧. spring3.1官方文档目录-中文 spring3.1官方文档-英文 关于作者