如何在html中只给屏幕上未使用的部分上色？_Html_Css

如何在html中只给屏幕上未使用的部分上色？

html css

如何在html中只给屏幕上未使用的部分上色？,html,css,Html,Css,我正在尝试建立一个网页。我要密码 <header> Some content </header> <body> More content </body> 一些内容更多内容放置在屏幕的中间，只占一小部分。屏幕的宽度。我希望屏幕的其余部分是灰色的基本上，我希望该页面具有类似的外观要做到这一点，最简单的方法是什么？您必须将所有内容包装在一个主分区中，并为其指定最大宽度，例如1200px。然后为身体设置颜色，如： b

我正在尝试建立一个网页。我要密码

<header>
    Some content
</header>
<body>
    More content
</body>


一些内容
更多内容

放置在屏幕的中间，只占一小部分。屏幕的宽度。我希望屏幕的其余部分是灰色的

基本上，我希望该页面具有类似的外观

要做到这一点，最简单的方法是什么？

您必须将所有内容包装在一个主分区中，并为其指定最大宽度，例如1200px。然后为身体设置颜色，如：

    body {
        background-color: #eee;
    }
    #main {
        max-width: 900px;
        background-color: #fff;
        margin: 0 auto; 
    }

您必须将所有内容包装在一个主div中，并给它一个最大宽度，例如1200px。然后为身体设置颜色，如：

    body {
        background-color: #eee;
    }
    #main {
        max-width: 900px;
        background-color: #fff;
        margin: 0 auto; 
    }

将所有内容包装在container div中并指定宽度。将主体的背景色设置为灰色。您需要使用

margin:auto，左：0和<代码>右侧：0以使容器div居中

正文{
背景颜色：浅灰色；
}
#容器{
宽度：400px；
背景色：白色；
保证金：自动；
左：0；
右：0；
}
标题{
高度：200px；
}
.更多内容{
高度：300px；
}

一些内容
更多内容
将所有内容包装在container div中并指定宽度。将主体的背景色设置为灰色。
您需要使用margin:auto，左：0和<代码>右侧：0以使容器div居中

正文{
背景颜色：浅灰色；
}
#容器{
宽度：400px；
背景色：白色；
保证金：自动；
左：0；
右：0；
}
标题{
高度：200px；
}
.更多内容{
高度：300px；
}

一些内容
更多内容
要实现这一点，您需要将
元素的背景色设置为灰色，并将其子元素设置为白色：


身体{
/*把整个窗户都拉长*/
位置：绝对位置；
宽度：100%；
身高：100%；
/*集中所有内容*/
显示器：flex；
对齐内容：居中；/*水平对齐*/
对齐项目：居中；/*垂直对齐*/
/*设置背景色*/
背景：浅灰色；
}
正文>div{
/*让它看起来更好*/
填充：20px；
/*设置背景色*/
背景：白色；
}
你好，世界！
要实现这一点，您需要将
元素的背景色设置为灰色，并将其子元素设置为白色：


身体{
/*把整个窗户都拉长*/
位置：绝对位置；
宽度：100%；
身高：100%；
/*集中所有内容*/
显示器：flex；
对齐内容：居中；/*水平对齐*/
对齐项目：居中；/*垂直对齐*/
/*设置背景色*/
背景：浅灰色；
}
正文>div{
/*让它看起来更好*/
填充：20px；
/*设置背景色*/
背景：白色；
}
你好，世界！
有时看似复杂的问题有最简单的解决方案+然而，有时看似复杂的问题有最简单的解决方案+不过我还是同意这一点。