HTML頂部酒吧背景拉伸

你如何在HTML或CSS代碼設計一個頂部酒吧也許背景顏色的紅色，將通過屏幕尺寸拉伸？HTML頂部酒吧背景拉伸

例如，這是我通常做的，我無法達到我想要的。下面是我會在我的CSS中做的例子。

#topbar { 
     background-color:red; 
     width:1400px; 
     height:50px; 
}

在這種情況下，紅色條會在左上角被切掉。我應該怎麼做html/css所以角落不會被切斷？

來源

2013-08-01 LeroyCJW

：100％ – falguni

你的代碼只需使用寬度 –

工作的jsfiddle： http://jsfiddle.net/JVbry/2/ – Parrotmaster

試試這個

http://jsfiddle.net/JVbry/3/

*{ 
    margin:0; 
    padding:0; 

} 
#topbar { 
     background-color:red; 
     width:100%; 
     height:50px; 
}

來源

2013-08-01 07:36:52 falguni

刪除了使用外部CSS的註釋和+1。這樣更容易閱讀和編輯:) – Parrotmaster

是的，我在尋找什麼！謝謝！無論如何，*代表什麼？我從來沒有遇到過這個。那麼應該用什麼* – LeroyCJW

@ user2641016如果額外間隙看到我們的html，請使用marign：0和pdding0 * ya在body css中使用，它的刪除間隔。如果我的答案有用，請接受我的回答 – falguni

試試這個

#topbar { 
    background-color:red; 
    width:100%; 
    height:50px; 
} 
* { 
    margin:0px; 
    padding:0px; 
}

如果你給在像素寬度，那麼它不會在所有的屏幕都有效。它更好地使用％寬度，因此它可以自動調整屏幕寬度。

來源

2013-08-01 07:37:44

爲什麼要在此重置邊距和填充？ – Pavlo

@PavloMykhalov它確保您的代碼中的元素不具有您不需要的邊距和填充。如果將其重置爲0，則可以將邊距和填充值分配爲100％，以確保您自己的編碼線將應用於元素。 – Parrotmaster

@Protromaster我知道規則的作用。 ;）我問的不是這樣一個簡單例子中的過度。 – Pavlo

如果我理解正確的話...... 的Html

<div id="header"> 
    <div id="nav> 
    </div> 
</div>

的CSS

html, body { 
    margin: 0; 
    padding: 0; 
} 
#header { 
    width: 100%; 
    background: red; 
} 
#nav { 
    margin-left: auto; 
    margin-right: auto; 
}

如果你有嘗試此，請分享的jsfiddle

來源

2013-08-01 07:39:05 rjf0909

HTML頂部酒吧背景拉伸

回答

相關問題