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">

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

流体和固定头

2 个答案: