玩转Web之html+CSS(一)---论坛首页表格的实现
转载请说明出处,小编博客地址: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(一)---论坛首页表格的实现的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 分分钟带你玩转 Web Services【2】CXF
在实践中一直在使用 JAX-WS 构建 WebService 服务,服务还是非常稳定.高效的. 但还是比较好奇其他的 WebService 开源框架,比如:CXF/Axis2/Spring WS等. ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- “教你如何玩转Web响应式布局” 的更多相关文章
“教你如何玩转Web响应式布局” 的更多相关文章 网址:http://www.360doc.com/relevant/641896074_more.shtml
- web中的CSS、Xpath等路径定位方法学习
今天不到八点就到公司了,来的比较早,趁着有点时间,总结下web中的CSS.Xpath等路径定位定位的方式吧! 简单的介绍下xpath和css的定位 理论知识就不罗列了 还是利用博客园的首页.直接附上代 ...
- web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单 本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
随机推荐
- PS 图像特效-非线性滤波器
利用非线性滤波器,使图像的色彩凝块,形成一种近似融化的特效. clc; clear all; addpath('E:\PhotoShop Algortihm\Image Processing\PS A ...
- SharePoint 2010 之寻找页面布局
习惯了2007的页面布局,虽然感觉不是太好用,尤其以开始接触时非常不理解页面布局和页面的关系,但是后来理清了,感觉还是很好用的,尤其对于相同格式的网站,修改布局而不改页面的情况,还是非常有效的,好了, ...
- obj-c编程15[Cocoa实例01]:一个会发声的随机数生成器
哇!终于到了obj-c编程系列的第15篇喽,一路走过来满不容易的哦!(怎么个意思,这才哪到哪啊!),为了能够更好的练习obj-c在Cocoa框架上的编程,接下来会以N篇Cocoa实例的博文来巩固和记忆 ...
- RubyMotion之父:Ruby是目前替代Objective-C的最佳iOS开发语言
发表于2012-08-16 00:52| 21716次阅读| 来源CSDN| 24 条评论| 作者杨鹏飞 RubyMotionRubyObjective-CiOSJava 摘要:曾几何时,PC端有那么 ...
- Windows7安装Pygame软件
1. 工具包下载地址: Python下载地址: https://www.python.org/downloads/ pip下载地址:https://pypi.org/project/pip/#file ...
- 安装centOS后要解决的问题
1,检查是否联网 ping www.baidu.com 未显示: 则表示网络未连接 首先关闭防火墙 sudo systemctl stop firewalld.service #停止firewall ...
- 《MySQL必知必会》读书笔记_4
PS:一个实际的存储过程案例 CREATE DEFINER=`root`@`localhost` PROCEDURE `sp_delete_article_by_id`(IN `id` int) BE ...
- Eclipse如何提高开发效率
Ctrl+Shift+J 反向增量查找(和上条相同,只不过是从后往前查) Ctrl+Shift+F4 关闭所有打开的Editer Ctrl+Shift+X 把当前选中的文本全部变为小写 Ctrl+Sh ...
- Liunx权限修改命令
语法: chmod 数值 文件名 例: chmod 644 mm.txt 命令执行后,文件mm.txt的权限值为 rw-r--r-- 详解: 权限分为 读.写.执行三种,分别用字母 ...
- spring3.1文档目录翻译
整理google共享磁盘找到了2014年翻译的spring官方文档的目录,分享出来可能会对英语不好的同学有些帮助吧. spring3.1官方文档目录-中文 spring3.1官方文档-英文 关于作者