玩转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{widthborder=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>

转载于:https://www.cnblogs.com/dingxiaoyue/p/4931786.html

玩转Web之html+CSS(一)---论坛首页表格的实现相关推荐

Android程序员学WEB前端(9)-CSS(4)-商城首页Demo-Sublime
转载请注明出处: http://blog.csdn.net/iwanghang/article/details/77850533 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 跟着视频教程练习了一下 ...
玩转border-radius，用CSS来画一个花式流程图~
用Html标签和css来写一个花式流程图,先看这张已经完工的流程图,一个白色圆形,中心是文字,围绕它周围的是8个彩色的花瓣,花瓣中间有文字.另外圆环周围缺角的三角形部分分别对应的是花瓣的颜色. 难点分 ...
web中用纯CSS实现筛选菜单
web中用纯CSS实现筛选菜单本文我们来用纯css实现像淘宝宝贝筛选菜单那样的效果,例子虽然没有淘宝那样强大,不过原理差不多,如果花点心思也可以实现和淘宝一样的. 内容过滤是一个在Web上常见的一个 ...
java cxf 入口统一_分分钟带你玩转 Web Services【2】CXF
在实践中一直在使用 JAX-WS 构建 WebService 服务,服务还是非常稳定.高效的. 但还是比较好奇其他的 WebService 开源框架,比如:CXF/Axis2/Spring WS等. ...
canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...

玩转Web之html+CSS(一)---论坛首页表格的实现

玩转Web之html+CSS(一)---论坛首页表格的实现相关推荐

最新文章

热门文章