標題像固定寬度的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; 

}

來源

2013-05-09 oyshee

只需使用'位置：在你的'.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

來源

2013-05-09 22:05:59 Danield

試試這個代碼：

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

來源

2015-04-07 17:43:33

標題像固定寬度的Facebook

回答

相關問題