转载请说明出处，小编博客地址：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. 配置SharePoint环境加域提示网络名不可用[已解决]

    今天去客户给机器做备机,带着装好SharePoint07的机器跑过去了,先做个LAN,然后连上机器开始工作:首先当然是改ip地址,然后都改好了开始加域,加了好几次,发现都不行,提示"指定的网 ...

  2. IOS常见的加密方法,常用的MD5和Base64

    iOS代码加密常用加密方式 iOS代码加密常用加密方式,常见的iOS代码加密常用加密方式算法包括MD5加密.AES加密.BASE64加密,三大算法iOS代码加密是如何进行加密的,且看下文 MD5 iO ...

  3. javascript中正则表达式和ruby中的一点差异

    看到一个例子,不过这个例子中正则表达式的格式貌似是错的: Function.prototype.get_name = function(){ return this.name || this.toSt ...

  4. .net找List1和List2的差集

    有个需求是找两个自定义类泛型集合的差集: class Person { public string Name{get; set;} public string Country{get; set;} } ...

  5. [C#网络应用编程]1、对进程的操作

    在.net中,Process类提供了对进程进行管理的各种方法. 一.获取进程集合的方法: Process[] myProcesses = Process.GetProcesses();  //获取本地 ...

  6. 以太坊智能合约虚拟机(EVM)原理与实现

    以太坊 EVM原理与实现 以太坊底层通过EVM模块支持合约的执行与调用,调用时根据合约地址获取到代码,生成环境后载入到EVM中运行.通常智能合约的开发流程是用solidlity编写逻辑代码,再通过编译 ...

  7. 第一次作业 orm环境构建(hibernate)及基本的demo

    一.数据库 1.创建数据库hibernate01-1514010311 2.创建表 customer CREATE TABLE customer( id int(11) not null auto_i ...

  8. python爬虫——词云分析最热门电影《后来的我们》

    1 模块库使用说明 1.1 requests库 requests 是用Python语言编写,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更 ...

  9. C#语言中的XmlSerializer类的XmlSerializer.Serialize(Stream,Object)方法举例详解

    在对象和 XML 文档之间进行序列化和反序列化操作. XmlSerializer 使您能够控制如何将对象编码为 XML. 命名空间:   System.Xml.Serialization程序集:  S ...

  10. 8.Vue基础

    环境搭建 node.js安装 https://nodejs.org/en/ cnpm npm install -g cnpm --registry=https://registry.npm.taoba ...