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

时间：2021-12-27 15:25:37

转载请说明出处，小编博客地址：http://blog.csdn.net/u012116457

最近本来想去写一个类似论坛的页面，论坛首页一般都需要一个表格去显示数据，自己简单的写了一下，先上一张图

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


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>


标签：

相关文章