Jorux Notebook

Just a web designer's blog

布局篇(1)—If you love css …

从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置。
如果你是一个初学者,很可能觉得做一个网页的第一步就是布局。其实不然,css网页的设计过程可以参考分为以下几步:

平面设计—>页面切割—>布局—>细节控制

1. 平面设计是一个网页的精髓所在,读者直接面对的界面,在本站以后的文章中会涉及此方面内容。也许你会认为在脑子里形成一个网站的大概印象就可以了,那么这种想法直接就给你贴上业余的标签。推荐工具:Photoshop;
2. 页面切割其实可以划分到布局里,因为你的页面切割方式直接影响了布局方式,也体现了你是属于表格布局阵营还是css布局阵营。它是布局(前)的关键步骤。将在本章重点讲述。推荐工具:Photoshop;
3. 如果把布局说简单点,就先得把你的网页简单化。简单到把你的网站分为header,content,sidebar,footer四个部分。
4. 细节控制,将header,content,sidebar,footer的表现细节化。
本章将针对页面切割讲述一些Jorux的私人观点与技术。

首先,我们要有一个被切割的对象,这里以Jorux.com的原始photoshop平面设计图为例。如下,点击看大图(Fig.01):

j

如果使用表格布局的话,你可能就想到在photoshop里把页面切割为无数个固定宽高的格子。但用css布局的话,你首先要明确的以下几点是:

1. 你是要横着切,还是要竖着切
2. 第一次切割,只需要把网页中的背景图片切割出来(因为背景图片是在css里声明的);
3. 切的的图

114 Responses to “布局篇(1)—If you love css …”

  1. imyyh says:

    很不错的教程,受益!

    文章出的题目我不能很好完成,我是初学者,抱歉!

    发现一处不妥,见笑:

    4. 最后把header作为一个DIV,ID=“Footer”;
    应该是footer吧,呵呵

  2. 多谢imyyh指正,已更正,那个题目可以试试的,不管能达到什么效果。解决不了也可以贴上来,到时我会汇总问题,一起解决。

  3. […] 布局篇(1)—If you love css … (tags: css) […]

  4. 红鼻子 says:

    完成几个projects?能否搞几个全屏的截图看看,赏析一下

  5. 红鼻子 says:

    真是好久没有练习了,写起来手生的厉害。没经过那么多的浏览器测试。随便写的看看吧
    html,body{
    margin:auto;
    padding:auto;
    }
    #AllWrap{
    width:760px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
    }
    #Header{
    height:120px;
    background-color:red;
    text-align:center;
    }
    #MidWrap{
    background-color:green;
    }
    #Content{
    float:left;
    width:560px;
    height:400px;
    background-color:blue
    }
    #Sidebar{
    float:left;
    width:200px;
    height:400px;
    background-color:purple;
    }
    #Footer{
    clear:both;
    background-color:pink;
    height:80px;
    }

  6. 哈哈,红鼻子终于出现了。最近有三个刚完成或正在进行的projects。但是由于客户的保密要求暂不能公布。

    以下有一个两个月前做的wordpress主题缩略图,由于该网站尚未运行,所以暂不提供全屏
    http://www.flickr.com/photos/60385880@N00/287458924/

    还有就是,最近可能要办个英文的show case站点,准备正式进入web design行业。主攻欧美市场。 🙂

    稍后测试和评论红鼻子的代码!感谢红鼻子的热情参与!!

  7. leavic says:

    只试了一下IE6和FireFox下的效果,IE7试用过一段时间,很多东西还是不标准,没比IE6进步多少。只是Vista的雅黑字体看起来挺舒服的。
    我的作业有一个小地方作弊了:
    Footer部分如果不加“clear:both;”,结果Footer的颜色在FireFox下就和Body部分相同,根本区分不出Footer部分。
    效果有点像是上次jorux说道的“折叠”,不过用那些对付折叠的方法又没用。在红鼻子的代码里看到“clear:both;”添加上以后在FF下就没问题了。
    “clear:both;”这句代码是起什么作用的?(如果jorux以前提到过,是我学艺不精,可不要骂我啊)
    ———————————————————————–
    html, body {
    margin: 0;
    padding: 0;
    }
    body{
    background:#444;
    }
    #AllWrap {
    width: 760px;
    background: white;
    float:left;
    }
    #Header {
    background: red;
    height: 80px;
    text-align:center;
    }
    #MidWrap {
    background: blue;
    }
    #Content {
    background: white;
    width:560px;
    height:400px;
    float:left;
    text-align:center;
    }
    #Sidebar {
    background: green;
    width:200px;
    height:400px;
    float:right;
    text-align:center;
    }
    #Footer {
    background:blue;
    height: 80px;
    width:760px;
    clear:both;
    text-align:center;
    }

  8. leavic says:

    BTW:进入web design行业,不当医生了?

  9. 红鼻子 says:

    to leavic
    clear:both就是自动适应footer上面部分的内容的长度。
    to jorux
    还好最近比较忙,不然天天等你的还不等出几根白发。
    恭喜恭喜,进军欧美市场了。

  10. To 红鼻子:
    红鼻子的答案向来就是正确的,只是这次好像没有看清题目啊! :)文中有一要求“向左浮动”!
    现在先暂时以居中为题来评析红鼻子的代码:
    1. 第2,3行很不错。也可以和leavic的代码替换。我更倾向于:
    * {
    margin:0;
    padding:0;
    }
    2. 第7行“height:100%;”也是可以省略的,height会自适应;
    3. 第8,9可以合并为margin:0 auto;
    4. clear:both;说明红鼻子是个老手!即使手生也很麻利嘛!
    再次感谢红鼻子的解答。幸好红鼻子也不是闲人啊,我的文章又慢又长,久等了。我也很想每个星期一都能发一篇post,这样的话红鼻子的白发少了,而我的白发就见长了。 🙂

  11. To leavic:
    如果我没记错的话,leavic应该是第二次在这留言回答问题。这次的答案非常好。看来leavic已经基本懂得如何布局了。
    1. 关于“clear:both;”:
    这并不是折叠现象。leavic可以试着把content和sidebar的背景移走,你就可以看到footer的背景其实没有被折叠,而是藏在header下面。
    这个代码我在《十步》里是重点提过的,看来leavic是有点忘了。要理解这句代码的意义,首先要理解float的概念。一个网页其实是立体的,浮动的DIV并不和不浮动的DIV在一个平面上,而是浮于其上。所以没那句代码的话footer就和不浮动的header(同一个平面)对齐了。而浮动的content和sidebar就浮于其上遮住footer的背景了。
    正如红鼻子所说的,clear:both;使footer自动适应位于其上的浮动DIV,而不至于被遮住了。

    2. 关于web design:
    以目前的状况,99%会当医生,毕竟还没毕业,我还是希望给自己一个机会,看看自己到底适不适合医生这个职业。
    另外,我所接的projects有很多是国外的designer外包给我的,毕竟欧美和大陆刚好一个白天一个黑天,这样就有时间排开我的各种事务。
    show case站点迟迟不开始的一个重要原因,就是怕一旦和大量客户直接接触,工作量就会剧增,到时我就没法在现实与网络之间游刃有余了。

  12. leavic says:

    一说就明白了,我还是把《十步》好好复习一下为妙。

  13. 红鼻子 says:

    一个网页其实是立体的,浮动的。很经典的一个概括,这样就能很深刻的理解box模型。
    平面设计—>页面切割—>布局—>细节控制
    看来想做一个designer,还是要从平面设计开始,我也要从photoshop开始了

  14. spring says:

    每天我打开网站的第一件事就是到你的网站,溜达溜达,看有没有新的文章,今天终于让我等到了,呵,支持

  15. To spring:
    其实不用每天打开我的网站的,只需订阅我的feed就好。既省时间,又能即时被通知更新。比如这篇文章,都已经发表2~3天了,你才发现。

  16. zhong says:

    支持支持,多谢Jorux!

  17. Zid says:

    终于看到你更新了,不容易啊,
    我的确订阅了,可是看你更新无规律,都懒的看你的FEED了

  18. To zid:
    真是抱歉,久等了。
    不过要有耐心啊,作为一个非专业博客,要出好文章,至少是能让我自己满意的文章,没有个一两个星期是不行的。

  19. leavic says:

    我订阅的Feed很多都是几个星期才更新一次的,像Digg那样一天几十上百条新闻的,不是退订,就是几十秒扫过,和没订阅差不多。

  20. To Leavic:
    首先应该庆幸本站的超慢更新速度没有招致leavic的反感。:)

    我订阅的FEED更新周期是一到两周。但我主要是订阅Digg的各个category。我也很忙,没时间看Digg成堆的更新。但是有几个cat我是追着一个一个看的。
    说句实话: I love Digg!
    Digg改变了我的生活,不仅仅是网络。
    在这里悄悄的向大家推荐,请订阅和仔细阅读自己喜欢的category-Digg吧!

  21. ant says:

    <<十步>>是那十步啊,麻烦Jorux/Bluecssr 告许我一下,我也去学习学习,这是我第一次来这,觉的这里的资源太丰富了,谢谢Jorux/Bluecssr ,以后还会常来!
    还有一件事情想麻烦Jorux/Bluecssr ,就是我想下载你的胖嘴蓝鱼,可在网上找了半天也没找到,麻烦你给我发到我的e-mail,或者你在回复中留个连接也可,谢谢!

  22. To ant:
    《十步》在这: http://jorux.com/archives/10steps-built-web-with-css/
    Bluefish是Ubuntu系统下的软件,在window下是不能使用的。如果你安装了Ubuntu的话,在新得立管理器里搜索,然后安装就可以的,前提是你有宽带。

  23. ant says:

    啊  是这样的啊,那我还是老老实实用editplus吧,谢谢你啊,《十步》我已经找到了,正在看!

  24. asura says:

    Ubuntu免安装的方法是什么?有教程吗?
    我拿到盘之后就一直下不了手,怕会坏了xp的系统。
    可以如你所说,我也超想尝试的。

  25. speeds86 says:

    Jorux老师,可不可以把正确答案发一次让俺参考参考呀?
    另外,我对float这个方法还是有点迷惑,这个题目当Content用了folat:left后,Sidebar也要用一次float:right才能达到您要求的效果。如果只对Sidebar用float的话,Content和Sidebar就不在同一水平线上了,请指点指点~~~

  26. To: speeds86
    1. css其实没有所谓的“正确”的答案,那达到目的就是好的。要实现文中的效果,有很多种方法;
    2. 你提的问题很得要领。Sidebar向左或是向右浮动都是可以的。但如果你没使用绝对定位,又不使用浮动的话,作为块级元素的DIV是不允许有其他任何块级元素与其位于同一水平的。sidebar自然就只能位于content之下了;
    3. 关于布局方法,还会在下篇中进一步说明;
    4. 对了,不要使用“老师”这个称谓。直呼Jorux就好,我和广大网友是位于同一水平的,这点不用使用float。

  27. lennon says:

    内容详实,条理清晰,又不罗嗦!学医的能把css玩成这样很佩服!
    我会经常来的!

  28. speeds86 says:

    谢谢JORUX的讲解,热切期待你的布局(2)呀~~

  29. speeds86 says:

    请问可以在往后的教程里抽一小段讲讲position:absolute;inherit;relative;static的用法吗?

  30. Jorux says:

    To Speeds86:
    会的,至少会涉及absolute。

  31. 红鼻子 says:

    Jorux看来你要加油了,现在关注的人是越来越多了

  32. To 红鼻子:
    Haha。还是红鼻子的关注比较有分量。只是下一篇不会是布局,打算补充一个属性篇。Photoshop学的怎么样了?

    对了,红鼻子的Javascript应该很好吧??

  33. 红鼻子 says:

    整天被工作困住了,下了个教程,还没有看呢。Javascript了解一点,怎么有事?mail我吧。

  34. xf5337651 says:

    第一次在百度里搜索到,一看便喜欢上了你的BLOG,偶也是刚刚接触CSS,在这里学到了不少东西,我会经常来的。
    也会努力做好你留的习题。。。
    真的很好,谢谢Jorux。。。

  35. sojarr says:

    好喜欢的说,很棒
    不顶没得说的,呵呵,我是菜鸟,来学习

  36. Daisy says:

    关注…………!

  37. elnic says:

    问一下! 框架中是否没有自动换行的功能
    一定要自己加换行标记的?

  38. To elnic:

    应该是能自动换行的,但你的框架宽度得设置好。

  39. 塞上柳絮 says:

    网络虽大,要找个合适的教程还是很难,楼主这里总算找到了,特别关注!

  40. CAII says:

    我想知道Jorux为什么不用布局表格来布局页面,我以前一直用布局表格的,DIV+CSS根本没用过,就从你这里开始学,尝试用这种布局方法!

  41. elfox says:

    我这个基本是按现在这个模板样子弄的

    先按博主要求弄的,发现要小一圈.于是试着弄个一模一样.

    一开始换到800×600就乱掉了,后来才知道allwrap需要一个确定值,才不会让float的东西乱掉.

    原图切割的时候head没切好就直接用的logo.jpg

    sidebar我float:left的.

    有个问题.如果content的高没有确定值,那个foot怎么让它一直处于屏幕下方(当然如果是这个模板就不好看了)

    吃个饭先…..回来再看
    __________________________________

    html,body {
    margin:0;
    padding:0;
    background-color:#333333;
    }

    #AllWrap {
    width:960px;
    }

    #Header {
    background-image:url(images/headbackground.png);
    background-repeat:repeat-x;

    }

    #Header img{
    border:none;
    padding:0;
    margin:0 0 0 4px;
    }

    #midwrap{
    }

    #Content{
    background-image:url(images/content.png);
    background-repeat:repeat-y;
    width:760px;
    height:400px;
    float:left;
    }

    #Sidebar{
    background-color:#CCCCCC;
    width:200px;
    height:400px;
    float:left;
    }

    #Footer{
    background-image:url(images/foot.png);
    background-repeat:no-repeat;
    clear:both;
    height:80px;
    }
    ____________________________

  42. To cAll: 老实讲,我没用表格布过局。Div+CSS让我很满意。

    To elfox:
    1. 换到800*600后,如果不给allwrap一个确定的值,屏幕是装不下content和sidebar的,因为屏幕只有800px宽。所以sidebar被挤到下面去了。
    2. 我没有用过让foot处于最下方,你可以参考一下《鱼意吉祥》的代码,他的链接在我的首页other blogger里。代码如下:
    ——————————————–
    #footNav{
    display: block;
    position: fixed;
    bottom:0;
    z-index: 1000;
    clear: both;
    width: 100%;
    }

  43. binx says:

    想询问一下,在一个页面中先使用一个div包含所有的div这样是不是会让网页的加载速度变慢?(X)HTML是从头到尾一行一行解析的,那这样的话会不会当所有的代码读完以后,这个页面一起显示出来,而不是一块一块的显示。以前的TABLE是有这样的现象,不知道使用了DIV会不会也这样,在下理解应该和table一样,这样有碍用户体验。望指教

  44. To binx:

    你提得的问题很好!我的答案是否定的。你可以做个试验(本人实践过),用一个大div把所有的小div囊括,然后在最后一个小div里,比如footer里加载一个很慢的计数程序,你就会得到答案了,只会影响footer的加载。

    你其实可以这样理解,body就是一个最大的div,如果浏览器非得把body里的所有div均读取再显示的话,那么这种现象几乎是个浏览器bug,很显然浏览器工程师比我们想到的早很多。

    Thanks for your comment!

  45. KK1188 says:

    晚了点也要顶上去 学到好多东西

  46. KK1188 says:

    我的为什么出这个呢 我用的是PS7.0?

  47. KK1188 says:

    TABLE 我的用PS切的为什么HTML里是TABLE排的而不是DIV呢

  48. To kk1188:

    代码被屏蔽了,建议你从属性篇开始学。

  49. ezsky says:

    哥们你在Ubuntu上设计用什么?

  50. To ezsky:

    用bluefish替代editplus,至于photoshop, 我想是不可替代的。

  51. 海绵宝宝 says:

    在这真是受益非浅

  52. a_mood says:

    html,body {
    margin:0;
    padding:0;
    background-color:#444
    }
    #AllWrap {
    width:760px;
    float:left;
    }
    #Header {
    background:green;
    background-image: url(../images/headerbg.gif) repeat-x;
    }
    #Midwrap {
    }
    #Content {
    background:blue;
    background-image: url(../images/contentbg.jpg) repeat-y;
    float:left;
    height:400px;
    width:560px;
    }
    #Sidebar {
    background:orange;
    float:right;
    height:400px;
    width:200px;
    }
    #Footer {
    clear:both;
    background:red;
    height:80px;
    }

    爲什麽
    background-image: url(../images/headerbg.gif) repeat-x;
    background-image: url(../images/contentbg.gif) repeat-y;
    這兩行代碼並不能控制背景.
    請幫我檢查下哪錯了。
    剛學的哦!

  53. a_mood says:

    #AllWrap
    還有像上面的這些應該叫什麽名字啊
    我試的時候它必須與html裏面的名稱要大小寫一致
    它們的對應大小寫敏感??

  54. To a_mood:

    1. 大小写最好一致、linux系统是区分大小写的。

    2. background-image: url(../images/headerbg.gif) repeat-x; 为语法错误。改为–>
    background-image: url(../images/headerbg.gif);
    background-repeat:repeat-x;

    请参看: http://jorux.com/archives/property-2-if-you-love-css/

  55. a_mood says:

    哎呀,犯这么弱的错误!

  56. a_mood says:

    http://cssstudy.xinwen520.net/test2.html
    嘿嘿,css太另人兴奋了!
    看看我的杰作。
    我可刚看到这篇教程哦
    后面的都还没看呢!

  57. a_mood says:

    http://cssstudy.xinwen520.net/styles/test2.css
    要是有时间的话帮我点评下更好了!
    谢谢啦!

  58. a_mood says:

    还有,嘿嘿。
    百度空间可以更改css样式,你能不能帮我写个阿。
    正是看到它才想起学css,以前都用表格布局的。

  59. netpod says:

    求助:
    请大哥帮忙小弟翻译个:XML with a DTD or XML Schema is designed to be self-descriptive 。
    本人实在菜,真翻译不好!非常感谢了!等待中…

  60. netpod says:

    这样翻译准确不?——
    带DTD(文档类型定义)或XML Schema(XML 模式)的XML被设计成具有自描述的标记语言?

    好象很不通。求准确译法!
    十万个感谢!

  61. To netpod:

    抱歉!本人的翻译水平不行,也不建议翻译。直接看英语最好。

  62. netpod says:

    收到,谢了!~

  63. netpod says:

    站长过谦了…

  64. CD妖精 says:

    好文章……收藏了……谢谢你……

  65. avivi says:

    之前学的是平面设计,从来没有想过会去做网页设计,但是现在却做的网页设计的工作。才开始学习css跟html,搜到你的网站,照着上面一步一步做,学到很多很多,谢谢你的分享~让我开始对css感兴趣…会一直关注下去的噢~~~

  66. 心缘 says:

    很感谢你提供这么好的东东,能不能具体讲一下怎么让所有的代码在IE6/7, Opera, Firefox均能显示正常!嘻嘻,我也是初学者,学习中..先谢谢了!

  67. mafanxixi says:

    大概写了一下

    看到上面的写法有个疑问
    content除了定义float:left;是否还要写margin-right:200px;
    如果sidebar的内容不足400px是不是会占掉sidebar下面的部分
    不知道#midwrap{height:400px;}是不是就不用定义content右边距
    body{
    font-family:12px;
    color:#444;
    padding:0;
    margin:0;
    }
    #allwrap{
    width:760px;
    padding:0;
    margin:0;
    float:left;
    }
    #header{
    height:50px;
    margin:0;
    padding:0;
    }
    #midwrap{
    margin:0;
    padding:0;
    height:400px;
    }
    #midwrap #content{
    float:left;
    width:560px;
    margin-right:200px;
    )
    #midwrap #sidebar{
    float:right;
    width:200px;
    margin-left:560px;

    #footer{
    clear:both;
    margin:0;
    padding:0;
    height:80px;
    }

  68. mafanxixi says:

    我写的这里是不是有错误
    #allwrap{
    width:760px;
    padding:0;
    margin:0;
    float:left;
    }
    #midwrap #content{
    float:left;
    width:560px;
    margin-right:200px;
    )
    #midwrap #sidebar{
    float:right;
    margin-left:560px;
    }
    定义#allwrap{

    float:left;
    }
    是不是就不用写content 和sidebar

  69. 班马萧萧 says:

    我也简单写了一个,不过我处理条件2的方法不同。(2. 在800×600,1024×768,或是宽屏显示器都能正常显示;)
    我的初步想法是,AllWrap的宽度设为100%,让其满屏显示,text-align,设为居中,中间内容固定宽度。这样就可以实现800*600的情况下,满屏显示,1024*768或者更大的情况下,居中显示,左右空白部分,AllWrap的背景填充。
    下面是我的css,(在红鼻子的基础上修改的,逃懒了,呵呵)
    html,body,*,div{
    margin:0;
    padding:0;
    border:0;
    }
    #AllWrap{
    width:100%;
    height:auto;
    text-align: center;
    }
    #Header{
    height:120px;
    background-color:red;
    text-align:center;
    width: 760px;
    }
    #MidWrap{
    background-color:green;
    height: auto;
    width: 760px;
    }
    #Content{
    width:560px;
    height:400px;
    background-color:blue;
    float: left;
    }
    #Sidebar{
    width:200px;
    height:400px;
    background-color:purple;
    float: left;
    }
    #Footer{
    clear:both;
    background-color:pink;
    height:80px;
    width: 760px;
    }

    在ie6.0的情况下可以实现各个不同分辨率的情况,布局不错。
    但在火狐下,却不能实现各个部分居中,实际效果是居左显示。
    其他的分辨率下没有测。呵呵

    还有,我针对楼主的div层次布局,提出我自己的一点看法。
    关于ID AllWrap包含所有的层问题,
    我的看法是应该分开,比如,

    Content
    Sidebar

    ……
    就像这样,把页面横向或者竖向分为几快。
    这样的分的原因主要是,照顾到网速的满的用户。把整个网页分成若干块,而不是一个整的div,最大的好处,就是不用把整个网页都读完再显示出来。(网页显示是需要读完一个完整的div)

    呵呵,说了这么多,也不知道我表达清楚了么。
    下面是几个问题
    1:
    “ imyyh Says:

    发现一处不妥,见笑:

    4. 最后把header作为一个DIV,ID=“Foote

  70. 班马萧萧 says:

    我把你的html代码这一段

    My layout

    Header

    Content
    Sidebar

    Footer

    直接粘到到我的dreamweaver里,却发现定义括住id名称的双引号,全变成的不可识别得(准确地说,是非英文输入状态下的引号)。我最先怀疑你编码问题,可我把网页改成UTF-8,还是不行。
    不管怎么说,是不是在用户交互上,作的不好啊!!!
    哈哈,可能我有点太完美注义了。

  71. To 班马萧萧:

    最近比较繁忙, 无法回答你的问题,看了你的网站,很不错的设计!

  72. 班马萧萧 says:

    To Jorux/Blueseer
    呵呵,没事,等不忙了在讨论,呵呵,你觉着我的网站还有那方面要改进的啊?

  73. To 班马萧萧:
    其实是个很不错的设计,但是就我自己的感觉的话,头部图标分散了一点。

  74. 木木 says:

    谢谢你,真的学习不少。

    CSS我的最爱。呵呵,以后共同交流吧,

  75. 木木 says:

    刚才俺的地址留错了,呵呵,

  76. nevis says:

    只在IE6上测试了,也不知道在800×600,1024×768,或是宽屏显示器是否都能正常显示.希望以后和各位高手交流,一起进步.

    body{padding:0px;margin:0px;background:#444;font:16px 宋体;}
    #contain{width:760px;padding:10px;margin-left:auto;background:#fff;float:left;}
    #header{width:760px;height:200px;background:green;clear:both;}
    #mid{width:760px;height:400px;}
    #content{width:560px;background:red;height:400px;float:left;}
    #sidebar{width:200px;background:yellow;height:400px;float:right;}
    #footer{width:760px;background:blue;height:80px;clear:both;}

  77. nevis says:

    PS:第一次上来,实在很喜欢这里,有点相逢恨晚的感觉…Because I love css.

  78. Hauran says:

    把content和sidebar再放到盒子里,确实比精妙一筹!

    支持!

  79. LDJZHan says:

    相见恨晚…
    以前都是用的表格…
    好久不摸了…
    发现现在流行DIV+CSS了…
    落伍咯…

  80. Danne says:

    我也是初学者。。一个朋友介绍了这个网站,觉得很好。。
    试着做了这个习题。。评评。。我的显示器分辨率是:1152×864的。
    以下代码在FF及IE6测试过,均可正常显示。。
    html,body { margin:0px;
    background-color:#444444;
    }
    #allwrap { width:770px;
    }
    #header { border:2px solid #FF0000;
    margin-bottom:2px;
    height:100px;
    }
    #content { width:560px;
    height:400px;
    border:2px solid #0033FF;
    float:left;
    margin:0px 2px 2px 0px;
    }
    #sidebar { width:200px;
    height:400px;
    border:2px solid #00FF00;
    float:right;
    }
    #footer { width:768px;
    height:80px;
    border:2px solid #ff0000;
    float:left;
    margin-top:2px;
    }

  81. wuyuan says:

    先留个名,以后过来看,嘿嘿

  82. y-zxuan says:

    一路往下拉,发觉不少的高手,so,不献丑了。

  83. Evan says:

    我的是19‘显示器,在我这里显示出来的页面,右边sidebar要比你设计图上宽很多

  84. Evan says:

    哦,看来是没办法的了,header上是一个图片

  85. 木可木可 says:

    找到一个学习的好地方!!
    以后会长来的!!
    感谢您的详细的讲解!
    很受益~~

  86. pepsi says:

    您好!我想向您请教一个问题,是就用css做好的页面, 在窄屏可以正常显示,宽屏为什么就不可以了呢??
    是不是我用了绝对定位??我把绝对定位删掉就可以在宽屏中正常显示了,但有写东西必须要用绝对定位,要怎样才能在宽屏中正常显示呢???期待回答~~~~~

  87. To Pepsi:
    应该是你的绝对定位造成的,我也遇到过类似问题,要想在任意宽度的显示器中正常显示,必须是相对定位。
    你可以先用一个相对定位的盒子div,然后在这个盒子里,写另一个绝对定位的盒子div。

  88. 10yes says:

    初来乍到,发表这个博客在CSS等设计方面很弓虽,比什么网页陶巴要系统得多。支持jorux,收藏。。

    另外,我觉得让AllWrap向左浮动还不如让它放在中间呢。。因为用1024的宽度是好看,,但宽屏还是略显不足!

  89. To 10yes:
    向左浮动是针对本设计的。大部分设计还是适合中间对齐。

  90. daodao says:

    一下午都在看你站点里关于css的教程,明天就开始动手一点点实践。
    很感谢有你(Jorux/Bluecssr)这样的人存在。
    谢谢:]

  91. lisa says:

    你们都好有学问啊。我是今天才到达这里的,我也是刚刚学完的div+css以后要和你们多多请教了。那十步是什么啊我也想学。可不可以告我了。发到我的邮箱就行。谢谢

  92. Kevin says:

    haha,我是从百度进来的,真的没白来,我用CSS的时间很短,看了你的例子真的受益匪浅!

  93. Riori says:

    从“不小心”进入这里,到把这里的所有文章和留言粗略看完,我觉得花了将近半天时间比花一周去看那些所谓的很系统的教材来得直接,我做网站设计到现在,接触的CSS不多,主要还是着重于效果图的设计,具体实现做得不多,一直想学CSS,但是一直由于各种原因没能认真的去学习,看了你的文章后,感觉思路清晰了很多,特别是这里提到的相对与绝对定位是我最早接触CSS时最头疼的事。呵呵,谢谢Jorux的文章,谢谢各位的留言,全都是精华,除了某条留言是个广告……

  94. Keung Chow says:

    自从看了你的那篇”十步学会CSS建站”就找到这来了,站长的人真的不错,在这里看到的东西比其它网站发的教程好多了,让人学得明白…多谢了!

    以后会更加关注这里的..(^__^)

  95. Adyle says:

    确实很不错,拿来慢慢学习。

  96. flowsky says:

    有几点讨论,不知道理解对不对
    1:xhtml 是html 向xml 过度的一种标签语言,它的基本要求就是全部用小写,所以上面的ID最好全部用小写。

    2:根据楼主的图示,只有边框是彩色,用background不符合要求,应该用border,而且盒子之间是有间隙的,假设为5px,则上面的写法无一个达到要求,而且写法是不一样的。

    3:header 和 midwrap及footer之间的间隔在midwrap定义,如果不定义midwrap的高度,footer和midwrap之间的间隔是0,也就是footer的border-top和midwrap的border-bottom是重合的,则midwrap和footer之间的间隔无任怎么定义都为0.

    4:allwrap标签无实际意义,可以放在body盒子里实现。

    5:我的写法是
    《!DOCTYPE html PUBLIC “-//W3C//DTD Xhtml 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”》
    《html xmlns=”http://www.w3.org/1999/xhtml”》
    《head》
    《title》My layout《/title》
    《style type=”text/css”》
    *{
    margin:0;
    padding:0;
    }

    body {
    width:760px;
    background:#000;
    }

    #header {
    width:758px;
    height:120px;
    border:1px red solid;
    }

    #midwrap {
    margin:5px 0 5px 0;
    height:405px;
    }

    #content {
    width:558px;
    height:400px;
    border:1px blue solid;
    float:left;
    }

    #sidebar {
    margin-left:5px;
    width:193px;
    height:400px;
    border:1px green solid;
    float:left;
    }

    #footer {
    clear:left;
    width:760px;
    height:80px;
    border:1px red solid;
    }

    《/style》
    《/head》
    《body》
    《div id=”header”》header《/div》

    《div id=”midwrap”》
    《div id=”content”》Content《/div》
    《div id=”sidebar”》Sidebar《/div》
    《/div》

    《div id=”footer”》Footer《/div》
    《/div》
    《/body》
    《/html》

  97. flowsky says:

    上面的 body少一个字符颜色
    body {
    width:760px;
    background:#000;
    color:red;
    }

  98. flowsky says:

    页面居中
    body {
    width:760px;
    background:#000;
    color:red;
    margin:0 auto;
    }

  99. To flowsky:
    1. 关于大小写,纯粹是个人爱好,能区分就好;
    2. 图例中的border不是实际的表现,只是划分标记;
    3. footer的border-top和midwrap的border-bottom不一定是重合的,如果midwrap是浮动的话;
    4. allwrap实际是有意义的,只是在本例没有用,意在一种书写格式。

    谢谢你的留言!

  100. flowsky says:

    To Jorux:

    谢谢您的留言。
    我有个难题,百思不得其解。还是上面我的css,如果midwrap中不定义高度(height:405px,实际有时div很难知道高度),无任midwrap还是footer如何padding、margin,firefox中footer上边界始终和content及sidebar下边界重合,搞不清什么原因?

    难道midwrap子块是浮动的,midwrap也变成浮动的? 导致footer的top-border实际和midwrap的margin-top重合,如果不是这样的话,当footer的margin-top为415px(5+410+5),其中的间距效果才出来(IE效果则完全变了)?

    如果是这样的,则显示的效果又不是这样的,因为其footer的top-border实际是和midwrap子块content的boder-bottom重合?

    如果你把我的css做一个html,吧大写的《》“”替换成小写的,测试一下就知道了。

  101. To flowsky:
    建议把你的文件发至我的邮箱joe7419ATgmail.com

  102. To flowsky:

    Firefox对盒子的理解和ie是不同的,由于midwrap里有子元件,ie自动和midwrap及其子元件中最高的元件去margin,所以显示正确。

    而在ff,它会和母元件midwrap去margin。由于midwrap没有确定的高度,所以就会出现你说的问题。如果没有clear,footer就会和header去margin而被遮盖,因为midwrap的高度是0。

    只需要让midwrap去适应子元件的高度就可以了,方法有
    1,overflow:auto;
    2,overflow:hidden;
    3,float:left;

  103. Fenrir says:

    我是这么写的 也能实现这种效果 但感觉怪怪的
    body{background-color:#444;}
    #AllWrap{width::760px;}
    #Header{background-image:url(images/2222_01.jpg);
    background-repeat:no-repeat;
    height:88px;}
    #Content{width:745px;
    height:400px;
    background-image:url(images/2222_05.jpg);
    background-repeat:repeat-y;
    float:left;}
    #Sidebar{width:299px;
    height:400px;
    background-image:url(images/2222_06.jpg);
    background-repeat:no-repeat;
    float:left;}
    #Footer{width:760px;
    height:80px;
    background-image:url(images/2222_04.jpg);}

  104. savaior says:

    以前浪费了太多的时间,还有很好的学习机会。现在一无所成!偶然看了下CSS。感觉很有意思。想跟你学习。迷途知返希望还不算太晚!
    能不能加我啊?QQ:78742195

  105. adu688 says:

    我是第一次上来到这里的,我也觉得有点相逢恨晚的感觉。因为现我也正在努力学CSS之中的。

  106. 萱萱 says:

    收益匪浅,无意中发现了你的网站,正是我想找的,原来灯火阑珊处在这呢,以后一定常来,我是一个初学者,感觉看了你的东西豁然开朗,而且版主的头像很帅气的偶,(*^__^*) 嘻嘻……

  107. 骑士 says:

    初学能碰到你这样的老师,真是我的福气。
    (抱拳)老师,多谢了!
    我的代码就是自己认为需要什么写什么,没写的一定是初学的漏洞,希望老师指教。
    * {
    margin:0;
    padding:0;
    }
    body{
    background-color:#444;
    }
    #allwrap{
    width:760px;
    }
    #header{
    background-image:url(../images/03b.jpg);
    margin-left:4px;
    height:90px;
    }
    #content{
    /*border-top: 1px solid #efefef;*/
    background-image:url(../images/04b.jpg);
    background-repeat:repeat-y;
    width:560px;
    height:400px;
    float:left;
    }
    #sidebar{
    width:200px;
    height:400px;
    float:left;
    }
    #footer{
    background-image:url(../images/05b.jpg);
    clear:both;
    width:760px;
    height:80px;
    }

  108. Youk Ton says:

    找了很多教程,逐渐在入门,发现你的,才是最适合我的!
    持续关注~

  109. darki says:

    请问如何实现图片自动适应长度了
    #Header{
    height:120px;
    background-image:url(images/header.bmp);
    text-align:center;
    }
    这样的话,图片有一部分无法显示。

  110. to darki:
    你的header.bmp是作为背景图片存在的,所以Header是无法自动适应其高度的。

  111. darki says:

    噢,我明白了。

Leave a Reply

Designed by Jorux. Proudly powered by WordPress    Except where otherwise noted, this site is licensed under a Creative Commons License.