标题像固定宽度的Facebook

问题描述：

你好专家，我想建立一个像Facebook一样的欢迎页面。我想要一个带有固定宽度的不同颜色的页眉，就像Facebook的欢迎页面一样。我创建了一个宽度为100的div ID。但宽度不适合浏览器。它显示在身体里。请告诉我如何做到这一点。我在这一切中都是全新的。标题像固定宽度的Facebook

的Index.html

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="welcome.css"/> 
<title>Welcome To The Thinkers</title> 
</head> 
<body> 
<div class="header"><h1>Welcome To Thinkers</h1></div> 
</body> 
</html>

CSS

body{ 
    background-color:yellow; 
    width:100%; 

} 
p{ 
    font-size:23px; 
    color:#930 
} 
.header{width:100%; 
height:72px; 
background-color:green; 

}

只需使用'位置：在你的'.header' CSS fixed' - 这里的例子 - http://jsfiddle.net/3ajjM/ – lifetimes 2013-05-09 21:32:26

只要看看stackoverflow网站的顶栏。用户名seache框有。我想建立这种类型的顶级酒吧。怎么做。？ – oyshee 2013-05-09 21:36:19

第一：学习html和css的基础知识。其次：学习如何使用开发工具检查其他站点的代码（在Chrome或Firefox中的Firebug）。第三：显示一些努力，而不是要求直接的解决方案。第四：迟到欢迎来到stackoverflow.com :) – 2013-05-09 21:42:11

答

如果我理解你正确地我觉得你的问题是与某些元素默认保证金/填充。

如果添加

body, h1 
{ 
    margin:0; 
    padding:0; 
}

应该整理了这一点。

Demo

答

试试这个代码：

//these code is for fixed header 
.header{ 
position: fixed; 
top: 0; 
left:0; 
width: 100%; 
background-color: #0683c9; 
}

标题像固定宽度的Facebook

相关推荐