如何製作始終保持在頂部的標題？

-1

我想打一個頭像http://www.chacha.com（不動，是關於寬和高度，並且能夠安裝在它裏面的div也必須是一個圖像）如何製作始終保持在頂部的標題？

我開始了與空白html文檔和一個空白的css頁面，所以我目前沒有寫任何代碼。

我一直試圖兩天直接做到這一點，所以我會很感激任何人都可以提供的幫助。

我有瘸子，所以如果任何人也可以給我一個完美的標題和完美的背景大小的圖像尺寸，我將不勝感激。

來源

2012-08-09 Adam Boustead

'position：fixed;' – starbeamrainbowlabs 2012-08-09 19:53:02

在大多數現代瀏覽器中，您可以右鍵單擊並查看元素_，它會說什麼CSS應用到它。如果您使用的是FireFox，那麼FireBug的擴展功能很棒 – ajax333221 2012-08-09 19:55:29

有關瀏覽器兼容CSS位置屬性的信息，請參見quirksmode.org：http://www.quirksmode.org/css/position.html – calvinf 2012-08-09 21:01:36

CSS：

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 10px; 
    background: url(yourimage.png) repeat-x; 
} 

<!--html --> 
<div id="header"></div>

這應該給你一個起點，我不能告訴你更多，也不一定是看到的佈局應該是。

來源

2012-08-09 19:50:58

爲你可以使用的陰影'盒子陰影' – starbeamrainbowlabs 2012-08-09 19:53:42

你，先生，是一個天才，非常感謝你。 – 2012-08-09 19:58:38

感謝您的幫助和建議。 – 2012-08-09 20:00:07

您正在查找的CSS屬性是position: fixed，它將相對於視口定位元素。這是定位的良好擊穿：https://developer.mozilla.org/en-US/docs/CSS/position

在這種特定的情況下，你所得到的是與大致沿着這些路線的風格元素：

#header_id { 
    position: fixed; 
    width: 100%; 
    height: 35px; 
}

您沒有設置高度，但除非固定元素中有內容，否則如果沒有指定高度，它將崩潰。他們似乎還在元素上放置了一個drop-shadow，以獲得整潔的浮動效果。

如果你想有內部的圖像，你可以把標題元素中的<img>，或者用它作爲CSS的background-image網址，並將其與background-position位置（參見：https://developer.mozilla.org/en-US/docs/CSS/background-position雖然兼容性表在如果你想對這個屬性做任何特定的事情，底部是很重要的）。

您可以使用任何塊級元素（或其上設置了display:block的任何元素）執行此操作。在你的例子中，他們使用HTML5 <header>標籤;如果<header>不適合您的網頁，<div>也可以使用。

我建議使用Firefox的Firebug插件（或其他現代瀏覽器的開發者控制檯） - 您可以右鍵單擊頁面上的元素，然後從下拉菜單中選擇「檢查元素」，並獲得看看其他網站是如何構建的標記和樣式。當你瀏覽互聯網時，你會看到一些東西並思考，這非常有用，'這是一個巧妙的訣竅，它是如何工作的？'

來源

2012-08-09 20:00:16

FOR FULL WIDTH固定報頭

頭{ 寬度：100％; 背景：綠色; height：60px; margin：-8px; 職位：固定; }

FOR非全部寬度固定報頭
創建一個div，並設置寬度和高度（你也可以把它向左或向右float:left, float:right）然後在這個div把上面的代碼，但沒有margin:-8px;和更改寬度到你div的寬度。這是一個測試

來源

2014-08-23 15:48:20 panos

如何製作始終保持在頂部的標題？

回答

相關問題