CSS修饰的表格
下面这个CSS样式的表格,个人感觉颜色起到了很大的作用。如果不是两种颜色的对比效果好,可能也就是一般的表格:
先来看HTML:
<table width="590" cellspacing="1">
<caption>
text
</caption>
<thead>
<tr>
<th class="line1" scope="col">text</th>
<th scope="col">text</th>
<th scope="col">text</th>
<th class="line4" scope="col">More</th>
</tr>
</thead>
<tbody>
<tr>
<th height="78">text text text text</th>
<td>text text text text</td>
<td>text text text</td>
<td class="line4"> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
上面的表格没有什么要解释的,建议大家用thead,tbody,tfoot这些具有语义的标签。
body{
background-color:#D5DFE9;
}
table{
border-spacing:1px;
border:1px solid #A2C0DA;
}
td, th{
padding:2px 5px;
border-collapse:collapse;
text-align:left;
font-weight:normal;
}
thead tr th{
background:#B0D1FC;
border:1px solid white;
}
thead tr th.line1{
background:#D3E5FD;
}
thead tr th.line4{
background:#C6C6C6;
}
tbody tr td{
height:50px;
background:#CBE2FB;
border:1px solid white;
vertical-align:top;
}
tbody tr td.line4{
background:#D5D6D8;
}
tbody tr th{
height:50px;
background: #DFEDFF;
border:1px solid white;
vertical-align:top;
}
caption,tfoot{
display:none;
}
#btn{
text-align:center;
}
.txt{
width:200px;
height:20px;
}
上面的样式没有特别的地方。欢迎大家留言。
相关文档:
由下往上的:
<div id="demo" onmouseover="ij=1" style="border:1px solid gray; overflow: hidden; height: 119px; width:211px " onmouseout="ij=0">
<div id="demo1">1<br />2br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>
可以是任何的HTML内容<br&g ......
1. CSS Reset/重置
你也许需要先了解什么是css重置。然后怎么样写css重置呢。
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.
不要使用* { margin: 0; padding: 0; } 。我个人很爱用,原作者提到使用这句并不适用一些元素比如单选按钮。不过俺博客里面也没有单 ......
50款css工具
引自:http://bbs.seuuo.com/thread-2613-1-3.html
50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。
网格和布局The 1KB CSS Grid
新颖的 CSS 网格工具,可用于简化内容管理系统的 ......
图片自动适应大小的问题在平时制作的时候是比较常见的问题,下面提供一个比较简单的解决方法:
div img {
max-width:600px;
//IE7、FF等其他非IE浏览器下最大宽度为600px;
width:600px;
//所有浏览器中图片的大小为600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
//当图片大小大于6 ......
<style type="text/css">
<!--
input{ background:expression((this.readOnly &&this.readOnly==true)?"#CCCCCC":"")}
-->
</style>
<body>
<input type="text" name="" />
<input type="text" name="" readonly="readonly" />
expression:处理方式:
  ......