HTML5 - 改变每个区域的背景颜色答案

【问题标题】：HTML5 - change the background color of each areaHTML5 - 改变每个区域的背景颜色
【发布时间】：2014-02-26 03:19:26
【问题描述】：

我正在尝试创建一个具有不同区域的背景，每个区域都有自己的背景颜色和自己的一组小部件，例如按钮和文本。

我试过能够使用下划线创建一些区域。我能够更改每个区域中每个段落的颜色。

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>

====================编辑===================

我已经更正了正文标签问题。其实我没有正确解释这个问题。我想要两条不同颜色的水平线之间的区域。我认为为段落着色会解决问题，但事实并非如此。请建议如何完成。

我怎样才能创建这种类似类型的布局？

【问题讨论】：

"如何改变 HTML5 中每个区域的背景颜色？" > 你的意思是，使用 Javascript ？ HTML 只是标记：不能用作编程语言。
全部显示。
在第 9 行你有一个结束

标签： javascript css html

【解决方案1】：

你应该使用 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>

【讨论】：

它工作了.. css 似乎真的很好..请建议一些教程来学习所有这些布局的东西..
@Katoch 那里有很多...您可以从这里开始：csstutorial.net 开始非常简单。如果它对您有更多帮助，请不要忘记接受这个答案：stackoverflow.com/help/someone-answers

【解决方案2】：

每个文档只有一个正文标签。删除第 9 行结束标记。休息是正确的。

【讨论】：

【解决方案3】：

<!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>

【讨论】：