html - 流体和固定头

Question

我想创建一个带有固定标题的网站，它也应该是一个流畅的布局。有没有办法做到这一点？如果有怎么办？任何帮助，将不胜感激。

Answer 1

HTML 上的骨架如下所示：

<div class="masterHeader">   
   THIS IS HEADER TEXT
   <br/>

   <span style="float: left;"> LEFT SPAN </span>
   <span style="float: right;"> RIGHT SPAN </span>
</div>

<div class="contentData">
</div>

使用以下 CSS 进行样式设置：

.masterHeader
{
    display: block;
    height: 80px;
    position: fixed;
    text-align: center;
    min-width: 700px;
    width: 100%;
}

.contentData
{
    float: left;
    margin-top: 100px;
    padding-bottom: 15px;
    padding-left: 2px;
    position: relative;
    width: 100%;
}

Answer 2

这可以通过 CSS3 媒体查询和/或 HTML4 媒体属性来完成，请参阅http://affinitysearch.com进行演示（提示：调整浏览器窗口大小）。

基本语法是：

主要样式表（为移动设备构建）：<link rel="stylesheet" href="/css/style.css">

600px 及以上样式表：<link rel="stylesheet" media="only screen and (min-width:600px)" href="/css/600.css">

960px 及以上的样式表：<link rel="stylesheet" media="only screen and (min-width:960px)" href="/css/960.css">

此方法与大多数浏览器兼容。