2

我们正在创建一个<div>基于 Web 的设计。我们为页眉创建了一个 div，为内容创建了一个 div，为页脚创建了一个 div。我们希望在源代码中，内容 div 应该放在第一位，但是在查看时，标题应该在页面顶部。

我们如何在 CSS 中实现这一点？

4

2 回答 2

2

设置标题 divposition是absolute 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nin
{
width:940px;
margin:auto;
}
.heade
{
background: none repeat scroll 0 0 #E0E0E0;
border-radius: 5px 5px 5px 5px;
height: 50px;
position: absolute;
top: 0;
width: 940px;
}
.heade h1   {  line-height: 0; }
.fod
{
height:50px;
border-radius:5px;
background:#E0E0E0;
}
.mid
{
margin-top:75px;
height:500px;
    background:#FFFFFF;
border-style:solid;
border-radius:5px;
border-width:2px;
}
.left
{
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 2px;
float: left;
height: 343px;
margin-left: 5px;
margin-top: 5px;
width: 450px;
}
.right {
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 2px;
float: right;
height: 125px;
margin-right: 5px;
margin-top: 220px;
width: 461px;
}
.bottom
{
border-radius: 5px 5px 5px 5px;
border-style: dashed;
border-width: 2px;
height: 135px;
margin-left: 2px;
margin-top: 356px;
width: 925px;
}
</style>
</head >
<body>
<div class="nin">

<div class="mid">
<div class="left"> 
    <ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</div>
<div class="right"> 

<p>It is a coontent box one</p>
</div>
<div class="bottom">
<p>It is a content box two</p>
  <a href="http://www.iprofile.net/">Iprofile</a>
</div>
</div>
<div class="heade">
<h1>
<p style="text-align:center">This is header</p>
</h1>
</div>
<div class="fod">
<div>
<h1>
<p style="text-align:center">This is footer</p>
</h1>
</div>
</div>
</div>
</body>
</html>
于 2012-11-09T08:13:25.353 回答
2

  1. 将元素设置padding-top为<body>与标题的高度相同。这会将您的内容<div>向下移动，并为标题留出足够的空间。

    如果您的标题没有以像素为单位的固定高度，您可以使用ems 作为顶部填充，因为如果用户更改其字体大小，这将适应。但是您仍然必须清楚标题中的内容以及它的高度。

  2. 将标题设置<div>为position: absolute; top: 0;以将其从正常布局流程中删除，并将其放置在页面顶部。您可能也想设置一个值left，但这取决于您的特定布局。

于 2012-11-09T08:22:04.997 回答