查看: 2227|回复: 9

DIV + CSS 排版疑问

2 主题	0 好友	220 积分

支柱会员

Rank: 4 Rank: 4 Rank: 4 Rank: 4

发消息

电梯直达

1^#

发表于 2010-10-9 11:18 PM |只看该作者 |倒序浏览

这应该是一个普通的排版，我想知道我的代码是否有误？请大家指点

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

<style type="text/css">
body {
color: #004182;
text-align: center;
background-color: #FFFFFF;
margin: 10px 0;
padding: 0;
}
#c {
background-color: #FFFFFF;
width: 80%;
border: 1px solid #333333;
margin: 0 auto;
padding: 0;
text-align: left;
}
#h {
float: left;
background-color: #999900;
width: 100%;
margin: 0;
padding: 0;
}
#h img {
float: left;
margin: 0 10px;
}
#h h1 {
float: left;
margin: 20px 10px;
padding: 0;
font-size: 14px;
}
#m {
width: 100%;
background-color: #CC9933;
margin: 0;
padding: 0;
}
#f {
width: 100%;
background-color: #FFCC00;
text-align: center;
}
#f p {
margin: 0;
padding: 5px;
}
</style>
<body>
<div id="c">
<div id="h">
<img src="" alt="LOGO" height="55" width="70"/>
<h1>Description</h1>
</div>
<div id="m">
<p>Main Content</p>
</div>
<div id="f">
<p>Footer</p>
</div>
</div>
</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 的话就会出现白色空白区。为什么呢？即使我的内容很多也是一样

css , div , 排版 , 疑问

收藏0

相关帖子

使用道具举报

宅男-兜着走

46 主题	6 好友	6456 积分

百变名嘴

Rank: 13

发消息

2^#

发表于 2010-10-10 01:24 PM |只看该作者

http://www.jbtalks.cc/thread-862900-1-1.html
又是个卡在 Layout的。

不知道你有兴趣没，如果有兴趣就用用看吧，能帮到你。

使用道具举报

genki880712

5 主题	5 好友	4157 积分

一流名嘴

Rank: 12

发消息

3^#

发表于 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

7 主题	1 好友	5108 积分

一流名嘴

Rank: 12

发消息

4^#

发表于 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 吧

<style type="text/css">
body {
color: #004182;
text-align: center;
background-color: #FFF;
margin: 10px 0px;
}
#c {
background-color: #FFF;
width: 80%;
border: 1px solid #333;
margin: 0px auto;
text-align: left;
}
#h {
background-color: #999900;
padding: 5px;
}
#h img {
vertical-align: middle;
margin-right: 10px;
}
#h h1 {
display: inline;
font-size: 14px;
color: #FFF;
}
#m {
margin: 0px;
background-color: #CC9933;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
#m p {
background-color: #CC9933;
}
#f {
background-color: #FFCC00;
text-align: center;
}
#f p {
background-color: #FFCC00;
padding: 5px;
margin: 0px;
}
</style>
<body>
<div id="c">
<div id="h">
<img src="" alt="LOGO" height="55" width="70" border="0" />
<h1>Description</h1>
</div>
<div id="m">
<p>Main Content</p>
</div>
<div id="f">
<p>Footer</p>
</div>
</div>
</body>

复制代码

使用道具举报

abc_hulala

2 主题	0 好友	220 积分

支柱会员

Rank: 4 Rank: 4 Rank: 4 Rank: 4

发消息

5^#

发表于 2010-10-10 07:26 PM |只看该作者

又是个卡在 Layout的。

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

你刚开的时候我就看了

谢谢你的分享

使用道具举报

abc_hulala

2 主题	0 好友	220 积分

支柱会员

Rank: 4 Rank: 4 Rank: 4 Rank: 4

发消息

6^#

发表于 2010-10-10 07:29 PM |只看该作者

回复 abc_hulala

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

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

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

无论如何，谢谢你的协助

使用道具举报

abc_hulala

2 主题	0 好友	220 积分

支柱会员

Rank: 4 Rank: 4 Rank: 4 Rank: 4

发消息

7^#

发表于 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

7 主题	1 好友	5108 积分

一流名嘴

Rank: 12

发消息

8^#

发表于 2010-10-10 10:29 PM |只看该作者

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

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

border 是依照你第一張图片有线条而加上的，margin 這類自行更改自己喜歡而存在
一切学过就大概要記得，使用久了自然就會记住
而你的内容之前会出現空白是因為使用了 paragraph <p> 的關系，所以指定 p 的背景颜色之後就会取代白色

使用道具举报

genki880712

5 主题	5 好友	4157 积分

一流名嘴

Rank: 12

发消息

9^#

发表于 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还是好的，可以针对免费的主题加以更改，让该主题成为你独有的风格。