关于CSS的小问题

可能在下个月月中,我们部门将会向中国所有的CSS设计人员开放一个网站(目前我还不能透露这个网站的域名),并且同时展开一个CSS大赛。基本上的方式就是只要通过提交一个CSS以及图片组合的模板,就改变该网站的整个外观,以便让更多的开发人员/设计人员了解CSS的强大威力。在这个网站上进行这个赛事是我的创意。

当然这个创意的来源是来自于VisitMix,在这个网站当中有一个子栏目叫ReMix,这其实就是一个CSS大赛,在里面的Gallery当中,有很多网友上传的CSS模板,感兴趣的话,你只需要点击某一个item,就会把整个网站的外观风格完全变一个样子(其实这个创意可能最初来自于CSS禅意花园),记得在去年第一次见到这个网站的时候,感觉非常新奇,那时候就有一个想法,我可不可以把博客堂也做成这个样子?

大家都知道,无论是.Text还是后来的SubText或者BlogEngine,还有DasBlog,其实所使用的模板机制大同小异,除了CSS外,还都使用了类似于Master方式的一个文件来控制所有控件的布局,以便产生更多的风格。有没有可能把这个Master式的控制文件移掉,而只使用CSS或者图片呢?所以我就开始做了一个实验。但至少到现在为止,尚未解决一些关键性难题。以下这些问题我曾经向三位CSS高手求教,答案都是很难实现,或者只能兼容某种浏览器。

好了,以下是我的问题,如果大家有解答,欢迎直接通过邮件与我联系。(joy ^ joycode.com,把^替换为@)。

有以下的HTML架构,希望实现以下三种不同的用户体验,并且兼容IE 6+,Firefox 1.5+以上的浏览器。

这是标题

        

这是主内容

        

                  

                           

  • 主页
  • 目录1
  • 目录2

                  

                  

这是其它内容

          </div>

</div>

这是结尾

第一种布局:

 

Header内容
Sidebar内容(width:200px) Content主内容(Width:Screen.Width-200px);
Footer内容

 

 第二种布局

Header内容
Stats内容(Width:200px) Content(Width:Screen.Width-400px) Sidebar当中除Stats之外的内容(Width:200px)
Footer

 

第三种布局

Header内容
Stats内容(由竖直排列改为水平排列)
Sidebar内容,除Stats之外的内容(width:200px) Content内容(Width:Screen.Width-200px)
Footer内容
打赏作者

“关于CSS的小问题”的30个回复

  1. 手有点生了。

    1、入门。

    2、方法很多,但要每个部分都不定高比,需要JS。

    3、约等于入门。stats相对定位、绝对定位都可以。至于footer,相对定位、内容绝对定位都可以。

    css不是银弹。其实这种问题一点意思都没,算了,写都写了就不删了。

  2. 谢谢爆牙齿。
    的确我在一段时间把CSS当作银弹了,主要也是受了VisitMix的影响,现在想来,VisitMix很多内容都是固定的,所以大部分的CSS都是使用了绝对定位更改了布局。有些Gallery中的item甚至还注明可以应用于全站,这就说明大部分items其实并不能应用于其它页面。

  3. 包括css大赛也没意思,呵呵,2004年9月的时候blueidea就举办过我也参加过,但也没搞第二次了,没啥意义。
    2.1的CSS并不强大,再加上现在浏览器的不配合,前端是混乱的。
    而且和当年不一样,当年CSS懵懂,资料稀缺,于是很多技巧创意产生,而如今已经三年过去了,2.1的CSS几乎已经走到强弩之末了,能挖掘的技巧国内外都挖得差不多了,几乎就是能就能,不能你顶你肺也不能。反而悬念在设计上,在架构上,在三者的取长补短配合上。

  4. 我主要是想更改一下博客堂的模板方式,因为如果允许用户上传ASCX或者Master页面,毕竟还是有一定风险的,而我想完全通过CSS来实现模板机制,这一年来我一直在为这事头疼。:(

  5. @开心就好老大哥:
    在CSS社区估计最烦恼的就是如何制作自动适应整个屏幕的页面了,特别是当其中一列固定的宽度,让另外一列如适应剩下的部分
    刚才没有看清您的题目,所以说第一第二很容易实现的,后来再看不是那么回事

    🙂

  6. 不才,只做了二题。
    第一题比较正常,这个布局之前也讨论不少,这里不多说,如果有兴趣可以去我blog翻翻。
    第二题只做到FF、IE7正常,IE6下高度自适应须JS支持。
    第三题就BT了,IE6下由于position的宽会被父标签的宽限制,所以IE6下导航无能为力。希望有高手可以指点下。:)

    如果楼主已经做出来,请分享下。

  7. 第三题如果Footer的高度受到Sidebar和Content的影响,那么就是非常典型的剩余部分问题,Table可以轻易的解决,而纯CSS则几乎无法解决(在不借助JS的情况下)。

    这个问题我常常用来驳斥CSS银弹论的人。

  8. <p>
    题目来自 <a href="http://blog.joycode.com/&quot; rel="tag">开心就好</a> 写的一篇文章 "<a href="http://blog.joycode.com/joy/archive/2007/08/28/107691.aspx">关于<acronym title="Cascading Style Sheets">CSS</acronym>的小问题的解答</a>",很高兴国内也有人有类似的活动出来,支持笔者能提供这样的网站.但,此类活动不仅考验做题者的<em><acronym title="Cascading Style Sheets">CSS</acronym></em>,更考验了出题者的<strong><acronym title="Extensible HyperText Markup Language">XHTML</acronym></strong>结构合理性,就像这道题,结构上就会不少可以挑的地方,<a href="http://www.csszengarden.com/"><acronym title="Cascading Style Sheets">CSS</acronym>禅意花园</a>的结构虽然还不是很完美,但也是积累了不少经验写出来的结构,希望笔者能够在构建这个网站的时候注意编写<strong><acronym title="Extensible HyperText Markup Language">XHTML</acronym>结构的合理性</strong>.
    </p>
    <p>
    再来谈谈这三道题的实现,如果要完美还原原稿,用<acronym title="Cascading Style Sheets">CSS</acronym>是不太可能的事.在实验中遇到 "自适应高度" 、"还原border" 、"内容不可选"等问题,我这里放弃了<acronym title="Cascading Style Sheets">CSS</acronym>自适应高度的应用,用脚本调整了内容的高度自适应.当然,禁用了脚本之后也可以正常显示.个人觉得js来解决自适应高度是比较合适的方案.
    </p>

  9. 3只是容器换了而已。。。

    不然就overflow掉footer也行。。。

    2 的话,我的理解是要获取分辨率的脚本配合下。。。

    用百分比。。。。。
    1的话,要做到在firefox中兼容,也要用overflow….

发表评论