设置表格和表单的样式
一、表格的标记
<table summary="This table shows the yearly income for years 2004 through 2007" border="1">
<caption>年度收入 2004 - 2007</caption>
<tr>
<th></th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
</tr>
<tr>
<th scope="row">拨款</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
</table>
备注:tr 是行 而 td和th是列,第一行的列用th,每行的第一列也可以用th。
二、表格的颜色:
body{
background-color:#ebf5ff; /* 页面背景色 */
margin:0px; padding:4px;
text-align:center; /* 居中对齐(IE有效) */
}
.datalist{
color:#0046a6; /* 表格文字颜色 */
background-color:#d2e8ff; /* 表格背景色 */
/* 表格字体 */
}
.datalist caption{
font-size:18px; /* 标题文字大小 */
font-weight:bold; /* 标题文字粗体 */
}
.datalist th{
color:#003e7e; /* 行、列名称颜色 */
background-color:#7bb3ff; /* 行、列名称的背景色 */
}
只要表格在引用的时候标明 class=”datalist”就可以了。行和列会继承过去。
三、表格的边框
border:1px solid #429fff;
/* 表格边框 */
四、隔行变色:
.datalist tr.altrow{
background-color:#c7e5ff; /* 隔行变色 */
}
引用的时候
<tr class="altrow">
<!-- 偶数行 -->
五、CSS与表单
控制页面
form {
border: 1px dotted #AAAAAA;
padding: 3px 6px 3px 6px;
margin:0px;
font:14px Arial;
}
所有输入框
input {
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
控制选择框
select {
width: 80px;
color: #00008B;
background-color: #ADD8E6;
border: 1px solid #00008B;
}
引用
<form method="post">
<p>请输入您的姓名:<br><input type="text" name="name" id="name"></p>
<p>请选择你最喜欢的颜色:<br>
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>请问你的性别:<br>
<input type="radio" name="sex" id="male" value="male">男<br>
<input type="radio" name="sex" id="female" value="female">女</p>
<p>你喜欢做些什么:<br>
<input type="checkbox" name="hobby" id="book" value="book">看书
<input type="checkbox" name="hobby" id="net" value="net">上网
<input type="checkbox" name="hobby" id="sleep" value="sleep">睡觉</p>
<p>我要留言:<br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit"></p>
</form>
输入框和按钮的边框取消
CSS代码:
body{
background-color:#daeeff; /* 页面背景色 */
}
form{
margin:0px; padding:0px;
font:14px;
}
input{
font:14px Arial;
}
.txt{
border-bottom:1px solid #005aa7; /* 下划线效果 */
color:#005aa7;
border-top:0px; border-left:0px;
border-right:0px;
background-color:transparent; /* 背景色透明 */
}
.btn{
background-color:transparent; /* 背景色透明 */
border:0px; /* 边框取消 */
}
引用:
<form method="post">
请输入您的信息: <input type="text" name="name" id="name" class="txt">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submit>>" class="btn">
</form>