简单生活@NET » css http://lee.kometo.com 正确的判断来自经验，但经验往往来自错误的判断 Mon, 06 Feb 2012 02:26:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 表格的标准化写法 http://lee.kometo.com/archives/240 http://lee.kometo.com/archives/240#comments Sat, 03 Jan 2009 08:28:08 +0000 Emeric lee http://lee.kometo.com/?p=240 HMTL中表格标准写法的一个比较完整的实例，仅供参考

结合了thead,tfoot,th的应用，还有CSS控制表格
注意：

  1. tfoot在fbody前面
  2. td,th,tr,thead,tfoot,tbody都可以省略结束标记
  3. th不仅仅用在表头中
Title

 =

 =

 =

 =

 =
=

 =

 =

 =

 =

=
B

 -

 -

 -

 -

 +

B

 -

 -

 -

 -

 +

B

 -

 -

 -

 -

 +

B

 -

 -

 -

 -

 +

B

 -

 -

 -

 -

 +

WordPress在保存会自作聪明的做一些源码改写操作，同时上面的表格也会受到wordpress本身的CSS影响，所以代码请以下面部分的源码为准

<style>
table#test{
    border: 2px solid blue;
    border-spacing: 1px;
    padding: 2px;
    width: 100%;
}
</style>
<table id="test">
  <thead>
    <tr>
        <th> Title
        <td> =
        <td> =
        <td> =
        <td> =
        <th> =
<tfoot>
    <tr>
        <th> =
        <td> =
        <td> =
        <td> =
        <td> = 
        <th> =
<tbody>
    <tr class="trAlt1">
        <th> B
        <td> -
        <td> -
        <td> -
        <td> -
        <th> +
    <tr class="trAlt2">
        <th> B
        <td> -
        <td> -
        <td> -
        <td> -
        <th> +
    <tr class="trAlt2">
        <th> B
        <td> -
        <td> -
        <td> -
        <td> -
        <th> +
    <tr class="trAlt2">
        <th> B
        <td> -
        <td> -
        <td> -
        <td> -
        <th> +
</table>
]]> http://lee.kometo.com/archives/240/feed 0 CSS方式控制DIV页面内绝对居中的好办法 http://lee.kometo.com/archives/9 http://lee.kometo.com/archives/9#comments Thu, 23 Feb 2006 08:54:48 +0000 Emeric lee http://lee.kometo.com/?p=9 核心思路是，通过设置top和Left居中(50%)，然后再用负的margin,实现DIV中心居中。

这段代码兼容性很好，代码简单，没用Tabel，没用JS，没用expression

不过总觉得现在CSS的系统设计上还有很多不合理的地方，简单页面设计用一下也可，但复杂的页面设计完全用CSS几乎不可能，而且标准化设计所推崇的表现和内容分离现阶段根本实现不了，往往为了实现表现上的设计还要去修改HTML文件；CSS只能作为补充，不可能取代。

进一步的解释:

1)首先通过设置left和top都为50%,这时div的左上角应该在显示区域的中心

css
top: 50%;   left: 50%;

2)然后根据div的宽和高,分别做1/2的偏移,这是通过margin来实现,实际使用中不一定1/2,你可以根据特殊需要调整.

css
margin: -200px auto auto -275px;
height: 400px; width: 550px;

3)div必须有确定的宽和高,只有这样才能计算出margin.
完整代码如下

盒模型 div 布局（W3C推荐）居中
css
body {
    margin: 0;    padding: 0;
}
div {
   margin: -200px auto auto -275px;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 550px;
   height: 400px;
   background: #f60;
   text-align: center;
   line-height: 400px;
}


正好今天看到两个关于网页标准化的文章，和我的观点很相似，转一下地址

http://ggwu.net/archives/153

http://www.pjhome.net/article.asp?id=535

]]> http://lee.kometo.com/archives/9/feed 12