Question

所以我是HTML和CSS的新手，我试图创建一个带有标题，居中的列和由该列后面的图像组成的背景的布局，但我无法使其正常工作。

这是HTML代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>mylayout </title>
<link rel="stylesheet" type=text/css
href="style/my1stcss.css" />
</head>      

<body>
<div id="box">                      
<div id="header"></div>      
<div id="column"></div>        
</div>
</body>
 </html>

这是css样式表：

html, body {margin:0px; padding:0px
background-image:url (img.jpg)}

#box {
Height:auto   ;
Width:100%   ;
Margin-left:auto;      
Margin-right:auto;    
}
#header {
Height:150px;
Width:100%;                                  
Background-color:red;
}
#column {
Height:600px  ;
Width:50%     ;                              
Margin-left:25%    ;
Background-color:blue;
}

如果你看到白色，那么我想在图片的后面放一张图片。

Answer 1

首先，您需要以小写编写所有CSS属性。 Background-color不是有效的CSS，必须是background-color。

接下来删除CSS值之间的所有空格，并始终在末尾添加分号;。否则你的CSS不会生效。最后确保图像的路径是正确的。如果没有，则不会显示图像。

Here 是您提供的代码的jsFiddle示例，其中包含一个可爱的小猫作为背景，为您提供有关它如何工作的示例。

Answer 2

我总是根据一些惯例创建这样的布局。因此，如果您想创建一个居中的“主框架”，其标头高度为固定高度：

<body>
    <div class="center">
       <div class="main-frame"></div>
       <div class="header"></div>
    </div>
</body>


.center {
    width: <must be set, can be percentage>;
    margin: 0px auto;
 }

 .main-frame {
     position: relative;
     margin: <height of header> auto <height of footer> auto;
  }

 .header {
     position: absolute;
     top: 0px;
     height: <height of header>;
  }

页脚的相同方法。请注意，main-frame显示在源代码中的页眉和页脚之前，否则它们位于main-frame后面且无法点击。也可以通过使用z-index来解决这个问题，但我尽可能少地使用它来防止与z-indices的混淆。

您可以通过常规方式使用css将所需的背景图像附加到“主框架”。

div列背后的背景图像

2 个答案: