Web-based html + CSS (1) --- Implementation of the Forum homepage table

Web-based html + CSS (1) --- Implementation of the Forum homepage table

 

Recently I wanted to write a page similar to a Forum. The Forum homepage usually needs a table to display the data. I wrote it briefly and first made a picture.

 

Css code:

 

/* Basic information */body {margin: 0px;/* margin */text-align: left;/* align text in center */font-family: 'trebuchet Ms ', 'lucida sans ', Arial; font-size: 14px; background: # E1D0BB;/* background Color */}/* Page layer container */# container {width: 70%; height: 100%; margin-left: 15%; margin-right: 15%; background: # ABE0F1;}/* header */# header {width: 100%; height: 30%; margin: 0px; background: # ffffff;}/* Page subject */# pageBody {width: 100%; height: 70%; margin: 0px; background: # ffFFFF ;} /* Total table */table {* border-collapse: collapse;/* IE7 and lower */border-spacing: 0;/* No split line is displayed between columns */width: 100% ;}. zebra td ,. zebra th {padding: 8px;/* control the height of each row in the table */border-bottom: 1px solid # FFFFFF;/* width and color of the boundary of each row */}. zebra tbody tr: nth-child (even) {background: # f0f0f0;/* color of an even row, that is, set the color of two adjacent lines to different */-webkit-box-shadow: 0 1px 0 rgba (255,255,255 ,. 8) inset;/* Set shadow */-moz-box-shadow: 0 1px 0 rgba (255,255,255 ,. 8) inset; box-shadow: 0 1px 0 rgba (255,255,255 ,. 8) inset;}/* Header style setting */. zebra th {text-align: left;/* left-aligned text */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;/* usual color */}. zebra tr td a: hover {font-width: 800; text-decoration: underline; color: red;/* hovering color */}/* bottom of the table */. zebra tfoot td {border-bottom: 0; border-top: 1px solid # fff; background-color: # f1f1f1;}/* a small table used to display the number of pages */. pageTable {widthborder = 0;}/* footer */# footer {width: 100%; height: 10%; margin: 0px; background: # FFFF00 ;}

Html code:

 

 

 

Title	Author	Reply/View	Last Update Time
Who is the next six?	Qi shi, an account	11/123
Yuzhi bo?	Qi shi, an account	23/132
Lufei's Strength Analysis	ODA rongichiro	21/132