Can'；在我的页面的适当部分（HTML/CSS）中，无法获取填充的背景色_Html_Css_Background Color

Can'；在我的页面的适当部分（HTML/CSS）中，无法获取填充的背景色

html css

Can'；在我的页面的适当部分（HTML/CSS）中，无法获取填充的背景色,html,css,background-color,Html,Css,Background Color,嗨，我的html和css代码有问题。无论何时，只要调整了浏览器的大小，我都会尝试在浏览器中对齐所有内容中心，但要保持背景颜色水平连续流动。我有以下代码，但背景色似乎与我页面中的某些部分重叠。我错过了什么或做得不正确？非常感谢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

嗨，我的html和css代码有问题。无论何时，只要调整了浏览器的大小，我都会尝试在浏览器中对齐所有内容中心，但要保持背景颜色水平连续流动。我有以下代码，但背景色似乎与我页面中的某些部分重叠。我错过了什么或做得不正确？非常感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style>
body {
    width:auto;
    font-family:Century Gothic, Arial, Verdana;
}

.wrapper {
    width:850px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
}

h4 {
    color: #db870a;
    font-size:16px;
}

.threeCol {
    display:block;
    float:left;
    width:30.50%;
    padding:30px 0px;
    text-align:justify;
}

/*Alterations*/
.noSpaces {
    margin:0px;
    padding:0px;
}

.float {
    float:left;
}

.alignR {
    text-align:right;
}

.paddingR {
    padding:10px 30px 10px 0px;
}

.paddingL {
    padding:10px 0px 10px 30px;
}

.noPadding {
    padding: 10px 0px 10px 0px;
}


/*footer*/

#footer {
    display:block;
    background-color:#F60;

}


/*Other Articles*/

#otherArticles {
    font-size:12px;
}

</style>



<body>

<section id="otherArticles">
    <div class="wrapper">
    <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>

      <article class="threeCol paddingR">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna1leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article> 

        <article class="threeCol noPadding">
      <header><h4 class="noSpaces">Lorem ipsum dolor sit amet</h4></header>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>
    </div
></section>

<br />

<footer id="footer">
<div class="wrapper">
    Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscin</div>
</footer>

</body>
</html>


无标题文件
身体{
宽度：自动；
字体系列：世纪哥特式、Arial、Verdana；
}
.包装纸{
宽度：850px；
左边距：自动；
右边距：自动；
边际上限：0px；
边缘底部：0px；
}
h4{
颜色：#db870a；
字体大小：16px；
}
threeCol先生{
显示：块；
浮动：左；
宽度：30.50%；
填充：30px 0px；
文本对齐：对齐；
}
/*改变*/
.餐厅{
边际：0px；
填充：0px；
}
.浮动{
浮动：左；
}
.对准器{
文本对齐：右对齐；
}
帕丁格先生{
填充：10px 30px 10px 0px；
}
帕丁格尔先生{
填充：10px 0px 10px 30px；
}
没有{
填充：10px 0px 10px 0px；
}
/*页脚*/
#页脚{
显示：块；
背景色：#F60；
}
/*其他文章*/
#其他文章{
字体大小：12px；
}
Lorem ipsum dolor sit amet
前庭红调味品。多奈克·马格纳·利奥·萨皮安·奥古斯·泰卢斯、帕塞卢斯·埃拉特、阿迪皮斯·莱克斯·帕塞卢斯·埃尼姆·努拉、欧盟的苏打水
Lorem ipsum dolor sit amet
前庭红调味品。Donec magna1leo sapien augue tellus，phasellus erat，Adipis lectus phasellus enim nulla，eu aliquam sodales
Lorem ipsum dolor sit amet
前庭红调味品。多奈克·马格纳·利奥·萨皮安·奥古斯·泰卢斯、帕塞卢斯·埃拉特、阿迪皮斯·莱克斯·帕塞卢斯·埃尼姆·努拉、欧盟的苏打水


前庭红调味品。Donec magna leo sapien augue tellus，phasellus erat，Adipisin

尝试更改

.wrapper {
    width:850px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    margin-bottom:0px;
}

到

您的代码的问题是您只设置页脚的颜色。
在body标记之后立即开始页脚标记。

只需更改页脚标记的开头。

更多正确代码。。。您应该使用外部CSS

无标题文件


身体{
宽度：自动；
字体系列：世纪哥特式、Arial、Verdana；
}
部分{
宽度：850px；
保证金：0自动；
溢出：自动；
}
h4{
颜色：#db870a；
字体大小：16px；
}
文章{
显示：块；
浮动：左；
填充：30px 0px；
文本对齐：对齐；
宽度：30%；
保证金权利：3%；
}
第条最后{页边权：0；}
/*页脚*/
页脚{
显示：块；
背景色：#F60；
}
Lorem ipsum dolor sit amet
前庭红调味品。多奈克·马格纳·利奥·萨皮安·奥古斯·泰卢斯、帕塞卢斯·埃拉特、阿迪皮斯·莱克斯·帕塞卢斯·埃尼姆·努拉、欧盟的苏打水
Lorem ipsum dolor sit amet
前庭红调味品。Donec magna1leo sapien augue tellus，phasellus erat，Adipis lectus phasellus enim nulla，eu aliquam sodales
Lorem ipsum dolor sit amet
前庭红调味品。多奈克·马格纳·利奥·萨皮安·奥古斯·泰卢斯、帕塞卢斯·埃拉特、阿迪皮斯·莱克斯·帕塞卢斯·埃尼姆·努拉、欧盟的苏打水
前庭红调味品。Donec magna leo sapien augue tellus，phasellus erat，Adipisin

示例

当你编写一个html5时，实际上是一个HTML5doctype

，这应该是HTML还是XHTML？你的源代码中有矛盾的信息。我刚刚接触html编码，我正在学习html5，你能识别你看到的矛盾代码吗？这可能会帮助我改进代码。谢谢。您有一个用于XHTML1.0过渡版的doctype，但有一个用于HTML的http等价物。然后有一些HTML5元素（没有类型、节、标题等的样式）中间有一个XHTML
。你不应该把它们混在一起，最好选择一个标准，然后坚持下去。html5的Doctype等。实际上，这只是我页面代码的一部分。我多次使用.wrapper来保持分区的所有内容集中对齐，因此如果我更改它，它也会影响其他分区。我希望保留在.wrapper类上定义的页面宽度，因此每当我要更改宽度时，我只会从那里调整它。为什么要使用.wrapper？我的意思是，为什么不删除id，并将包装器类设置为：我更改了它，但div footer的背景色仍然与#otherArticles重叠：（Id）如果我将类包装器分配给节，它将包装我分配给每个节的背景色。我只想包装节的内容，使其在浏览器中居中对齐，并且背景色（包装器外部）将与浏览器窗口的宽度一样长。

#otherArticles{
width:850px;
margin:0 auto;
}

<style>
body {
    width:auto;
    font-family:Century Gothic, Arial, Verdana;
}

section {
    width:850px;
    margin:0 auto;
    overflow:auto;
}

h4 {
    color: #db870a;
    font-size:16px;
}

article {
    display:block;
    float:left;
    padding:30px 0px;
    text-align:justify;
    width:30%;
    margin-right:3%;
}

article.last{margin-right:0;}


/*footer*/

footer {
    display:block;
    background-color:#F60;
}


</style>



<body>

<section>
    <article >
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>

      <article>
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna1leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article> 

        <article class="last">
      <h4>Lorem ipsum dolor sit amet</h4>
      <p>Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscing lectus phasellus enim nulla, eu aliquam sodales</p>
    </article>
</section>

<footer>
    Rutrum vitae vestibulum condimentum metus. Donec magna leo sapien augue tellus, phasellus erat, adipiscin
</footer>

</body>
</html>