• [公告]本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搜索“
  • 近来发现对图像替换的方法越来越多人在意了,主要是因为“display:none”对SEO与屏幕阅读器不友好,而且还提出了解决方法,其中比较好的还是利用负值隐藏文字的方式(个人觉得)。然后一味的使用这种方法,真的就正确吗?

    其实什么情况下会用到图像替换呢?

    logo,做为一个站点的视觉标志,真的应该做成背景吗?图像按钮(虽然不太建议使用链接去做按钮,但有时看是按钮的东东也只是起来链接的作用),有支持SEO的必要吗?使用样式背景是为了什么呢?把表现的图片从内容中分离出来,使内容结构合理、完整。即然是装饰性的图片,还需要支持SEO吗?当然,如果你是做垃圾站的话,不在此列。

    ...
  • [http://www.blogbus.com/forest-logs/5192416.html]

    如下代码定义了一个循环模板的例子:




  • CSS森林群组建立

    2007-04-10 | Tag:闲话闲说

    在BLOGBUS建了个群组——CSS森林,欢迎各位同行加入,分享下经验、技巧。

    群组:http://groups.blogbus.com/cssforest.html 

    CSS森林(QQ群:30247792) 欢迎走 Web 标准之路,玩CSS的朋友加入。精神正常者慎入!
  • IE条件注释很多人都知道了,今天才知道,原来它也可以对非IE的浏览器起作用。嘿嘿,想知道吧。

     我们所认识的IE条件注释是这样的:

    ==============HTML===============
    <!--[if IE]> IE的内容<![endif]-->
    ================================= 

    看这个了解一下:IE条件注释参考

    如果是非IE的浏览器,会把这一段也当成一个注释,当然也就不会起作用了。所以要这样写:

    ==============HTML===============
    <!–[if IE]><![if !IE]><![endif]–> 非IE可见 <!–[if IE]><![endif]><![endif]–>
    ================================= 

    这样非IE的浏览器就可以读到里面的内容,而IE则因为里面的条件为真而不显示内容。

    例子在这:猜猜你用的浏览器是?