zoukankan      html  css  js  c++  java
  • 玩转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{     
    70%;
    height:100%;
    margin-left:15%;
    margin-right:15%;
    background:#ABE0F1;
    }
    /*头部*/
    #header{
    100%;
    height:30%;
    margin:0px;
    background:#ffffff;
    }
    /*页面主体*/
    #pageBody{
    100%;
    height:70%;
    margin:0px;
    background:#ffFFFF;
    }
    /* 总表格 */
    table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;         /* 列之间不显示分割线 */
     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-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{
    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>
    


    版权声明:本文为博主原创文章,未经博主允许不得转载。

  • 相关阅读:
    [Luogu P3626] [APIO2009] 会议中心
    杭电 1869 六度分离 (求每两个节点间的距离)
    杭电 1874 畅通工程续 (求某节点到某节点的最短路径)
    最短路径模板
    杭电 2544 最短路径
    POJ 1287 Networking (最小生成树模板题)
    NYOJ 1875 畅通工程再续 (无节点间距离求最小生成树)
    POJ 2485 Highways (求最小生成树中最大的边)
    杭电 1233 还是畅通工程 (最小生成树)
    杭电 1863 畅通工程 (最小生成树)
  • 原文地址:https://www.cnblogs.com/dingxiaoyue/p/4931786.html
Copyright © 2011-2022 走看看