css - 如何制作这个布局?

标签 css layout

布局

alt text

我真的不知道从哪里开始使用 DIV 或表格来制作它,特别是因为我需要顶部背景和底部背景。请我需要这个方向,如果你能用我放在图像上的名字制作 css,我会理解代码而无需任何解释。非常感谢您的帮助。

最佳答案

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>

也将感谢任何其他评论,干杯

关于css - 如何制作这个布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4156447/

相关文章:

css - Styled-Components:在 parent 悬停时指定 child 的风格

java - 调整 JFrame 大小时,如何防止 JTable 的列调整大小?

css - 如何在浏览器中勾勒 HTML 页面的元素以查看框的布局?修改用户代理样式表?

java - 如何从左角到右角创建jlist?

css - 如何改变圆形边框的长度

html - HTML5错误验证中表格宽度边框cellspacing cellpadding全0

javascript - Firefox 无法正确处理 jQuery $(window).load

html - 排列 img 和 div css

html - 为什么我的图像有额外的间距?

android - 告诉 Android 布局充气器 "wrap_content"应该有多大