2013-08-01 181 views
1

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

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

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

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

+0

:100% – falguni

+2

你的代碼只需使用寬度 –

+0

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

回答

1

試試這個

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

*{ 
    margin:0; 
    padding:0; 

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

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

+0

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

+0

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

2

試試這個

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

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

+0

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

+0

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

+0

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

1

如果我理解正確的話...... 的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