HTML5 - 改變每個區域的背景顏色

-1

我試圖創建一個背景，用不同的區域&每個區域都有自己的背景顏色&它自己的一組小部件，如按鈕&文本。HTML5 - 改變每個區域的背景顏色

我試過可以使用下劃線創建一些區域。我能夠改變每個區域中每個段落的顏色。

如何更改HTML5中每個區域的背景顏色？

請建議。

<!DOCTYPE html5> 
<html> 
<body style="background-color:yellow;"> 
<br> 
<br> 
<br> 
<hr> 
<p style="background-color:red;">Area 1</p> 
</body> 
<hr> 
<br> 
<br> 
<br> 
<hr> 
<p style="background-color:green;">Area 2</p> 
<hr> 
<p style="background-color:orange;">Area 3</p> 
<hr> 
<p style="background-color:grey;">Area 4</p> 
<hr> 
</body> 
</html>

====================編輯===================

我已更正身體標記問題。其實我沒有正確解釋問題。我想要兩條不同顏色的水平線之間的區域。我認爲着色段會解決，但它不會。請建議如何做。

如何創建此類相似類型的佈局？

來源

2014-02-25 Katoch

「如何更改HTML5中每個區域的背景顏色？」 >你的意思是，用Javascript？ HTML只是標記：不可用作編程語言。 – Feugy

顯示塊'em全部。 – Houssni

在第9行，您有一個關閉。 –

您應該使用CSS使這些橫線是這樣的：

FIDDLE

CSS：

p { 
    border-bottom:1px solid #000; 
    border-top:1px solid #000; 
    margin:0; 
    padding:0; 
}

HTML：

<p style="background-color:red;">Area 1 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
</p> 
<p style="background-color:green;">Area 2 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
</p> 
<p style="background-color:orange;">Area 3 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
</p> 
<p style="background-color:grey;">Area 4 
    <br/> 
    <br/> 
    <br/> 
    <br/> 
</p>

來源

2014-02-25 11:05:12

它的工作.. CSS似乎是非常好的..請學習所有這些佈局的東西建議一些教程.. – Katoch

@Katoch有他們在那裏噸...你可以開始看這裏：http：// www。開始使用csstutorial.net/非常簡單。不要忘記接受這個答案，如果它幫助你在這裏更多：http://stackoverflow.com/help/someone-answers –

每個文檔只有一個正文標籤。刪除第9行關閉標記。休息是正確的。

來源

2014-02-25 09:42:41 Mardie

<!DOCTYPE html5> 
<html> 
<body style="background-color:yellow;"> 
<br> 
<br> 
<br> 
<hr> 
<p style="background-color:red;">Area 1</p> 
</body> <!-- <== this is the problem... --> 
<hr> 
<br> 
<br> 
<br> 
<hr> 
<p style="background-color:green;">Area 2</p> 
<hr> 
<p style="background-color:orange;">Area 3</p> 
<hr> 
<p style="background-color:grey;">Area 4</p> 
<hr> 
</body> 
</html>

來源

2014-02-25 09:42:50

HTML5 - 改變每個區域的背景顏色

回答

相關問題