2007-10-09

精通CSS+DIV：6，用CSS设置表格与表单样式

关键字: table form
一、控制表格
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;
}
评论
发表评论

您还没有登录，请登录后发表评论

hideto
搜索本博客
我的相册
A6bdc31c-c66e-468e-961e-9cc721e82adc-thumb
screenshot
共 1 张
存档
最新评论