Question

布局

alt text

我真的不知道从哪里开始使用DIV或桌子专门用我需要顶级背景和背景的事实。请问我需要这个方向，如果你能用我放在图像上的名字制作css，我会理解代码，不管任何解释。非常感谢您的帮助。

Answer 1

Have look if this is你在追求什么（在SAFARI 5.0上测试）如果是，则代码如下所示

<html>
    <head>
    <style type="text/css">
    * {margin:0px;padding:0px;border:0px;}

    body{background:#e8a7aa;}

    #bg-top{height:200px;width:100%;background:#008a2b;display:block;float:left;}

    #container{float:left;width:900px;z-index:100;margin-left:150px;margin-top:-700px;}

    #header{background:#3d2627;height:180px;}

    #content{background:#94101e;height:340px;}

    #footer{background:#3d2627;height:180px;}

    #bg-bottom{height:200px;width:100%;background:#008a2b;display:block;margin-top:300px;float:left;}
    </style>
    </head>
    <body>
        <div id="bg-top"></div>
        <div id="bg-bottom"></div>
        <div id="container">
           <div id="header"></div>
           <div id="content"></div>
           <div id="footer"></div>
        </div>

    </body>
 </head>

欢迎任何其他评论，欢呼

Answer 2

有很多方法可以做到这一点。我不是CSS专家，但我会看到我能想到的东西，可能其他人有更好的答案。假设你想要填满整个浏览器窗口，我会从三个div开始。

一个用于左侧，一个用于中间，一个用于右侧。如果要填充窗口，可以使它们浮动：向左并以百分比给出宽度。如果你想把这整个事物放在中心，给它们绝对宽度，把它们放在一个父div中，然后用一个自动边距居中父母

之后，你可以用内部div填充三个div。给它们正确的宽度和高度，它们将自动排列在彼此之下。之后，使用CSS为div分配背景。

编辑：我忘了说，有一个明确的：左或清：你可以使用的两种风格如果在浮动div之后，你需要回到“正常”的div行为

Answer 3

这是家庭作业吗？如果是这样，您将需要学习除“询问Stack Overflow”之外的研究技能。

那说：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <style>
    body {
        margin: 0;
        background: #dfaaaa;
        color: #fff;
        font-family: 'Arial', sans-serif;
        font-weight: bold;
    }

    .TOP-Background {
        background: url(TOP-background.gif) left top repeat-x;
    }

    .BOTTOM-Background {
        background: url(BOTTOM-background.gif) left bottom repeat-x;);
    }

    .HEADER,
    .Content,
    .FOOTER {
        width: 900px;
        margin: 0 auto;
    }

    .HEADER,
    .FOOTER {
        height: 200px;
        background-color: #3a2727;
    }

    .Content {
        min-height: 801px;
        background-color: #8b1d23;
    }
    </style>

    <title></title>
</head>
<body>

<div class="TOP-Background">
    <div class="BOTTOM-Background">
        <div class="HEADER">
            HEADER: W=900px H=200px
        </div>
        <div class="Content">
            Content: W=900px
        </div>
        <div class="FOOTER">
            FOOTER: W=900px H=200px
        </div>
    </div>
</div>

</body>
</html>

怎么做这个布局？

布局

3 个答案: