Html 如何制作一个以“大”为中心的网页;“正文栏”;两边有两个小的空的,背景不同的?

Html 如何制作一个以“大”为中心的网页;“正文栏”;两边有两个小的空的,背景不同的?,html,css,background-color,Html,Css,Background Color,这听起来可能是一个奇怪的问题,因为我真的不知道如何描述它,但我想做的是在我的网页两侧都有大约15%的空白空间。在dreamweaver中,可以通过在身体两侧设置15%的填充来轻松实现这一点。但我希望两边的空白处有背景色 例如,我希望页面的“主要部分”为白色,侧面的15%为浅蓝色 此外,我想知道如何(而不是)使这影响到topbanner。我还没有决定是想让顶部横幅覆盖整个屏幕还是像其他横幅一样居中 谢谢!!!您可以通过在包含的div中放置一个div来实现这一点。包含的div必须是页面的100%宽度

这听起来可能是一个奇怪的问题,因为我真的不知道如何描述它,但我想做的是在我的网页两侧都有大约15%的空白空间。在dreamweaver中,可以通过在身体两侧设置15%的填充来轻松实现这一点。但我希望两边的空白处有背景色

例如,我希望页面的“主要部分”为白色,侧面的15%为浅蓝色

此外,我想知道如何(而不是)使这影响到topbanner。我还没有决定是想让顶部横幅覆盖整个屏幕还是像其他横幅一样居中


谢谢!!!

您可以通过在包含的div中放置一个div来实现这一点。包含的div必须是页面的100%宽度,而内部的div必须是70%,并将
边距:0 auto
设置为居中,从而为您提供15%的边距

正文{
背景:天蓝色;
/*使背景天蓝*/
填充:0;
/*删除正常的浏览器填充*/
保证金:0;
/*删除正常的浏览器边距*/
}
标题{
高度:50px;
/*只是一些预先设定的高度*/
背景:红色;
/*设置不同的背景*/
保证金:0;
/*删除元素外部的间距*/
}
.内容{
宽度:70%;
/*将宽度设置为页面宽度的70%*/
保证金:0自动;
/*将上下页边距设置为0,但左右页边距将居中对齐*/
背景:白色;
/*设置白色背景*/
文本对齐:居中;
/*将文本居中*/
}

留白
这是宽度的70%,每侧间隔15%

谢谢,但是如何使侧面的蓝色继续贯穿整个页面?现在它的顶部只有两条蓝色的小线,上面有你写的文字。另外,我如何确保我在页面上写的所有信息都在中间而不是在边上?请看我修改后的答案。我还添加了注释,向您展示了每一行CSS对页面的更改。