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

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

2024-07-11 20:29:29   222人阅读

转载请说明出处，小编博客地址：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=http://www.mamicode.com/"../styles/postBarFirstPage.css">>


联系
我们