表格样式
<style type="text/css">
table {
font-size: 12px;
table-layout: fixed;/*固定表格布局*/
empty-cells: show;/*显示空单元格*/
border-collapse: collapse;/*合并单元边框格*/
margin: 0 auto;
border: 1px solid #cad9ea;/*边框样式*/
color: #666;
width:100%;
}
caption { /*设置表格标题 */
padding: 0 0 5px 0;
text-align: center; /*水平居中*/
font-size: 30px; /*字体大小*/
font-weight: bold; /*字体加粗*/
}
th {
background-image: url(images/th_bg1.gif);/*指定背景图片*/
background-repeat: repeat-x;/*定义水平平铺*/
height: 30px;
}
td { height: 20px; }/*单元格的高度*/
td, th {
border: 1px solid #cad9ea;
padding: 0 1em 0;/*单元格左右两侧的补白,一个字距*/
}
tbody tr:nth-child(2n) {
background-color: #f5fafe;/*定义隔行变色样式*/
}
</style>
<body>
<table summary="历届奥运会中国奖牌数">
<caption>
历届奥运会中国奖牌数
</caption>
<thead>
<tr>
<th>编号</th>
<th>年份</th>
<th>城市</th>
<th>金牌</th>
<th>银牌</th>
<th>铜牌</th>
<th>总计</th>
</tr>
</thead>
<tbody>
<tr>
<th>第23届</th>
<td>1984年</td>
<td>洛杉矶(美国)</td>
<td>15</td>
<td>8</td>
<td>9</td>
<td>32</td>
</tr>
<tr>
<th>第24届</th>
<td>1988年</td>
<td>汉城(韩国)</td>
<td> 5</td>
<td>11</td>
<td>12</td>
<td>28</td>
</tr>
<tr>
<th>第25届</th>
<td>1992年</td>
<td>巴塞罗那(西班牙)</td>
<td>16</td>
<td>22</td>
<td>16</td>
<td>54</td>
</tr>
<tr>
<th>第26届</th>
<td>1996年</td>
<td>亚特兰大(美国)</td>
<td>16</td>
<td>22</td>
<td>12</td>
<td>50</td>
</tr>
<tr>
<th>第27届</th>
<td>2000年</td>
<td>悉尼(澳大利亚)</td>
<td>28</td>
<td>16</td>
<td>14</td>
<td>58</td>
</tr>
<tr>
<th>第28届</th>
<td>2004年</td>
<td>雅典(希腊)</td>
<td>32</td>
<td>17</td>
<td>14</td>
<td>63</td>
</tr>
<tr>
<th>第29届</th>
<td>2008年</td>
<td>北京(中国)</td>
<td>51</td>
<td>21</td>
<td>28</td>
<td>100</td>
</tr>
<tr>
<th>第30届</th>
<td>2012年</td>
<td>伦敦(英国)</td>
<td>38</td>
<td>27</td>
<td>23</td>
<td>88</td>
</tr>
<tr>
<th>第31届</th>
<td>2016年</td>
<td>里约热内卢(巴西)</td>
<td>26</td>
<td>18</td>
<td>26</td>
<td>70</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>合计</th>
<td colspan="6">543枚</td>
</tr>
</tfoot>
</body>
- 圆角表格,使用
border-radius
定义圆角,使用box-shadow
为表格添加内阴影。使用transition
定义过渡动画,使用linear-gradient()
函数定义标题列渐变背景效果,使用text-shadow
定义文本阴影。
表单样式
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body { text-align: center; }
input[type="text"] { padding: 4px 6px; }
#login {
margin: 10px auto 10px;
text-align: left;
}
fieldset {
width: 230px;
margin: 20px auto;
font-size: 12px;
padding: 8px 24px;
}
legend { font-weight:bold; font-size:20px; margin-bottom:12px;}
label {
width: 200px;
height: 26px;
line-height: 26px;
text-indent: 6px;
display: block;
font-weight: bold;
}
#name, #password {
border: 1px solid #ccc;
width: 160px;
height: 22px;
margin-left: 6px;
padding-left: 28px;
line-height: 20px;
}
#name { background: url(images/name.gif) no-repeat 4px center; }
#password { background: url(images/password.gif) no-repeat 4px center; }
.button_div {
text-align: center;
margin: 6px auto;
}
</style>
<form action="" method="post" class="form" id="login">
<fieldset>
<legend>用户登录</legend>
<label for="name">姓名</label>
<div>
<input name="name" type="text" id="name" value="">
</div>
<label for="password">密码</label>
<div>
<input name="password" type="text" id="password" value="">
</div>
<div class="button_div">
<input type="image" src="images/login1.gif">
</div>
</fieldset>
</form>