一、控制表格
1,表格中的标记
table: border, summary
caption
th: scope(row, col)
2,表格的颜色
.datalist {
color: #0046a6;
background-color: #d2e8ff;
font-family: Arial;
}
.datalist caption {
font-size: 18px;
font-weight: bold;
}
.datalist th {
color: #003e7e;
background-color: #7bb3ff;
}
3,表格的边框
.datalist {
border: 1px solid #007eff;
font-family: Arial;
border-collapse: collapse;
}
.datalist th, .datalist td {
border: 1px solid #429fff;
}
4,隔行变色
.datalist tr.altrow {
background-color: #c7e5ff;
}
5,鼠标经过变色
FireFox:
.datalist tr:hover {
background-color: #c4e4ff;
}
IE则不支持Anchor Pseudo Classes,只能用JavaScript配合:
var rows = document.getElementsByTagName('tr');
for(var i=0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += 'altrow';
}
rows[i].onmouseout = function() {
this.className = this.className.replace('altrow', '');
}
}
二、控制表单
1,表单中的元素
form
input
textarea
select
option
2,文字按钮
.btn {
background-color: transparent;
border: 0px;
}
3,七彩下拉菜单
<select>
<option value="blue" class="blue">blue</option>
<option value="red" class="red">red</option>
</select>
.blue {
background-color: #7598FB;
color: #000000;
}
.red {
background-color: #E20A0A;
color: #ffffff;
}
4,类似Excel的无边框输入框
input {
border: none;
}