• [公告]本BLOG搬家了

    2007-09-12 | Tag:

    谢谢各位同学一直以来的支持,以后的更新将会到新的地址:(http://www.cssforest.org/blog/)欢迎关注!:)

  • 近来把精力都转到了CSS森林上了,所以这里的更新可能会停上一段时间。

    谢谢大家以往对我的支持!:) 

    有兴趣的同学可以去CSS森林看看,虽然还刚建不久,也正因此需要你们的支持! 

  • 看了之前的《两列一边宽度固定,另一边宽度自适应布局》后,觉得iVane的方法还可以再优化一下的,比如可以少用一个div……

    自适应的问题也是布局中常会遇到的问题,最早用负边界的方法解决了高度自适应,没想法现在用负边界同样可以解决宽度自适应的问题。来看看怎样做吧:

    ================HTML===================
    <body>
    <div id="top">top</div>
    <div id="main">
     <div id="midpart"><p>主要内容部分,宽高自适应。</p></div>
     <div id="leftpart"><p>左栏宽200像素,高度自适应。</p></div>
    </div>
    <div id="bottom">bottom</div>
    </body>
    ======================================

    ================CSS===================
    #top,#bottom{
    clear:both;
    width:100%;
    height:auto;
    padding:10px 0;
    background-color:#0099FF;
    }
    #main{
    _width:100%;
    height:auto;
    overflow:hidden;
    padding:0;
    padding-left:200px;
    color:#000000;
    }
    #leftpart,#midpart{
    height:auto;
    margin-bottom:-32767px;
    padding-bottom:32767px;
    }
    #midpart{
    float:right;
    width:100%;
    background-color:#00CC99;
    }
    #leftpart{
    _display:inline;
    float:left;
    width:200px;
    margin-left:-200px;
    padding-top:30px;
    background-color:#999900;
    }
    ======================================

    完整的Demo

    这里对宽度自适应做了优化,并增加了高度自适应。如果要改成其它的二栏布局就很容易啦,比如可以改成“右栏定宽”或“左右栏都自适应宽高”。大家自己发挥吧~:)

    注:此布局兼容IE5.5+、FF2、OP9+,其它版本的浏览没有测试过,有条件的同学帮忙看下吧。

  • 对于"display:none"对SEO不友好的说法,在今天得到了一个事实的证明,看下下边的截图:


    (可在google搜索“