JBTALKS.CC

标题: DIV + CSS 排版疑问 [打印本页]
作者: abc_hulala    时间: 2010-10-9 11:18 PM
标题: DIV + CSS 排版疑问
这应该是一个普通的排版，我想知道我的代码是否有误？请大家指点



这是我想要的效果，以下是我的代码

  1. <style type="text/css">
  2. body {
  3. color: #004182;
  4. text-align: center;
  5. background-color: #FFFFFF;
  6. margin: 10px 0;
  7. padding: 0;
  8. }

  10. #c {
  11. background-color: #FFFFFF;
  12. width: 80%;
  13. border: 1px solid #333333;
  14. margin: 0 auto;
  15. padding: 0;
  16. text-align: left;
  17. }

  19. #h {
  20. float: left;
  21. background-color: #999900;
  22. width: 100%;
  23. margin: 0;
  24. padding: 0;
  25. }

  27. #h img {
  28. float: left;
  29. margin: 0 10px;
  30. }

  32. #h h1 {
  33. float: left;
  34. margin: 20px 10px;
  35. padding: 0;
  36. font-size: 14px;
  37. }

  39. #m {
  40. width: 100%;
  41. background-color: #CC9933;
  42. margin: 0;
  43. padding: 0;
  44. }

  46. #f {
  47. width: 100%;
  48. background-color: #FFCC00;
  49. text-align: center;
  50. }

  52. #f p {
  53. margin: 0;
  54. padding: 5px;
  55. }
  56. </style>

  58. <body>
  59. <div id="c">

  61.   <div id="h">
  62.       <img src="" alt="LOGO" height="55" width="70"/>
  63.       <h1>Description</h1>
  64.   </div>

  66.   <div id="m">
  67.     <p>Main Content</p>
  68.   </div>

  70.   <div id="f">
  71.     <p>Footer</p>
  72.   </div>
  73. </div>
  74. </body>
复制代码


问题 :
1. 看到许多教学都是什么 “盒子” 之类的排版，就是一个 Div（container） 包着三个 Div（Header、Content、Footer）什么的。这样比较好吗？
2. 在 #h 一定要使用使用 width 吗？如果不放就会跑了


3. 在 #h 里我使用两个 float: left ，有错误吗？（因为我想达到那效果）
4. 我习惯使用 Dreamweaer 来编辑，因为方便，自动关闭标签以及选择语法。
当我点击每一个 DIV 标签时它都会选取起来显示给我看是哪一个？（很难解释）
比如我点击 <div id="c"> 时，画面就显示（选取整个）


当我点击 #h 时就显示（选取 Header - 黄色框格）


但当我点击 #m 时他却显示（蓝色框格也在 Header），是不是代码有错误的地方？还是没问题的？


最后就是 #m 如果不放 height 的话就会出现白色空白区。为什么呢？即使我的内容很多也是一样


作者: 宅男-兜着走    时间: 2010-10-10 01:24 PM
http://www.jbtalks.cc/thread-862900-1-1.html
又是个卡在 Layout的。

不知道你有兴趣没， 如果有兴趣就用用看吧， 能帮到你。
作者: genki880712    时间: 2010-10-10 05:14 PM
回复 1# abc_hulala

你所谓的盒子(container)，是把你的网页变成多个部分，目的在于容易运用CSS。在你代码里面，"c"是整个网页，"h"是顶部"m"是内容"f"是尾部，三个皆在"c"里面。不明白可以看下图：

在"h"放宽度是为了让宽度固定，就是说即使在"h"里的能容不够长，"m"里的内容也不会吃"h"的位。
在CSS我们使用"float"是为了固定图片的位置，我们只会用1个。如果有一张图片你要靠左，一张图片你要靠右，你可以使用"inline CSS"。
Dreamweaver的网页模式有时不准的，你用IE或Mozilla来看比较准。

如果你要了解更多，可以去W3School学，很容易上手的。希望我的解说你能明白...^^
作者: Super-Tomato    时间: 2010-10-10 07:04 PM
本帖最后由 Super-Tomato 于 2010-10-10 07:13 PM 编辑
这应该是一个普通的排版，我想知道我的代码是否有误？请大家指点
abc_hulala 发表于 2010-10-9 11:18 PM



问题 :
1. 看到许多教学都是什么 “盒子” 之类的排版，就是一个 Div（container） 包着三个 Div（Header、Content、Footer）什么的。这样比较好吗？
如果不這样設計的話，那麽你要更改顯示宽度的时候不就要逐个去更改? 而且也可以确保 container 當中所有的標簽設計不會跑出之外


2. 在 #h 一定要使用使用 width 吗？如果不放就会跑了

因為你使用了 float: left 才會造成這样的問題，div 的預設顯示样式是 block


3. 在 #h 里我使用两个 float: left ，有错误吗？（因为我想达到那效果）
以你這個简单的設計來說可以完全不使用 float 属性


4. 我习惯使用 Dreamweaer 来编辑，因为方便，自动关闭标签以及选择语法。
当我点击每一个 DIV 标签时它都会选取起来显示给我看是哪一个？（很难解释）
比如我点击 <div id="c"> 时，画面就显示（选取整个）


当我点击 #h 时就显示（选取 Header - 黄色框格）


但当我点击 #m 时他却显示（蓝色框格也在 Header），是不是代码有错误的地方？还是没问题的？


最后就是 #m 如果不放 height 的话就会出现白色空白区。为什么呢？即使我的内容很多也是一样
這類問題只能說主要還是靠经验來控制 css 吧



  1. <style type="text/css">
  2. body {
  3.     color: #004182;
  4.     text-align: center;
  5.     background-color: #FFF;
  6.     margin: 10px 0px;
  7. }

  9. #c {
  10.     background-color: #FFF;
  11.     width: 80%;
  12.     border: 1px solid #333;
  13.     margin: 0px auto;
  14.     text-align: left;
  15. }

  17. #h {
  18.     background-color: #999900;
  19.     padding: 5px;
  20. }

  22. #h img {
  23.     vertical-align: middle;
  24.     margin-right: 10px;
  25. }

  27. #h h1 {
  28.     display: inline;
  29.     font-size: 14px;
  30.     color: #FFF;
  31. }

  33. #m {
  34.     margin: 0px;
  35.     background-color: #CC9933;
  36.     border-top: 1px solid #333;
  37.     border-bottom: 1px solid #333;
  38. }

  40. #m p {
  41.     background-color: #CC9933;
  42. }

  44. #f {
  45.     background-color: #FFCC00;
  46.     text-align: center;
  47. }

  49. #f p {
  50.     background-color: #FFCC00;
  51.     padding: 5px;
  52.     margin: 0px;
  53. }
  54. </style>



  58. <body>
  59. <div id="c">
  60.         <div id="h">
  61.                 <img src="" alt="LOGO" height="55" width="70" border="0" />
  62.                 <h1>Description</h1>
  63.         </div>

  65.         <div id="m">
  66.                 <p>Main Content</p>
  67.         </div>

  69.         <div id="f">
  70.                 <p>Footer</p>
  71.         </div>
  72. </div>
  73. </body>
复制代码
作者: abc_hulala    时间: 2010-10-10 07:26 PM
又是个卡在 Layout的。

不知道你有兴趣没， 如果有兴趣就用用看吧， 能帮到你。
宅男-兜着走 发表于 2010-10-10 01:24 PM

你刚开的时候我就看了  
谢谢你的分享
作者: abc_hulala    时间: 2010-10-10 07:29 PM
回复  abc_hulala

你所谓的盒子(container)，是把你的网页变成多个部分，目的在于容易运用CSS。在你代码 ...
genki880712 发表于 2010-10-10 05:14 PM

谢谢你的提示 : inline
在我看到你的回复时我便更改代码，效果是有了，只不过标题文字不能够在图片中间而已

过后看见 Super-Tomato 前辈的回复便解开了

无论如何，谢谢你的协助  
作者: abc_hulala    时间: 2010-10-10 08:14 PM
问题 :
1. 看到许多教学都是什么 “盒子” 之类的排版，就是一个 Div（container） 包着三个 Div（H ...
Super-Tomato 发表于 2010-10-10 07:04 PM

其实我接触网页编写开始就使用这种模式，或许是我未熟悉或精通，所以都会遇到状况

這類問題只能說主要還是靠经验來控制 css 吧
新手。   

谢谢你提供的参考代码
不过我更改了一些

我把 #m 里的  margin: 0px;   、border-top: 1px solid #333;  以及  border-bottom: 1px solid #333;  移走了
（这里的 margin 有什么作用吗？移除应该不会影响美观吧？）

在  #m p { }  加入  margin: 0;
（因为 <div id="m"> 会出现比较多的空位（不是 pandding 的关系），所以我加在这里）


已经算是解决了目前的问题，非常谢谢大家的协助      

顺道一问，请问网页编写人员都是完全把所有语法都记在脑力吗？
vertical-align: middle; 这一个语法 "或许曾经" 看过，但没什么用到所以都不会用
还有很多很多，能记得完吗？
作者: Super-Tomato    时间: 2010-10-10 10:29 PM
其实我接触网页编写开始就使用这种模式，或许是我未熟悉或精通，所以都会遇到状况

這類問題只能說主要 ...
abc_hulala 发表于 2010-10-10 08:14 PM


border 是依照你第一張图片有线条而加上的，margin 這類自行更改自己喜歡而存在
一切学过就大概要記得，使用久了自然就會记住
而你的内容之前会出現空白是因為使用了 paragraph <p> 的關系，所以指定 p 的背景颜色之後就会取代白色
作者: genki880712    时间: 2010-10-11 06:52 AM
其实我接触网页编写开始就使用这种模式，或许是我未熟悉或精通，所以都会遇到状况

這類問題只能說主要 ...
abc_hulala 发表于 2010-10-10 08:14 PM


我冒昧的问一下，你只是纯属要做个自己的网页？还是为了学CSS？
如果是要做自己的网页，你大可以不用学CSS，因为CMS(Content Management System)，已经能让你在弹指之间做出一个很专业的网页了，而且他们提供超多主题(theme/ template)。我本身用Wordpress，Drupal我也用过。

不过了解一点CSS或PHP还是好的，可以针对免费的主题加以更改，让该主题成为你独有的风格。
作者: abc_hulala    时间: 2010-10-11 09:10 PM
我冒昧的问一下，你只是纯属要做个自己的网页？还是为了学CSS？
如果是要做自己的网页，你大可以不用学 ...
genki880712 发表于 2010-10-11 06:52 AM

两者都是  
如你所说，现在有很多 CMS 选择，但在更改模板的时候就需要这方面的知识了

而且有时候纯粹只是建设一个静态网页供人浏览而已，这样简洁多了   



欢迎光临 JBTALKS.CC (https://jbtalks.my/) Powered by Discuz! X2.5