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 - 改变每个区域的背景颜色

回答

相关问题