Question

这就是我得到的，但这只是填充90％屏幕的一种背景颜色。但是我希望有另一种颜色。

position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 90%;
background-color: #20a2d6;}

您可以找到我想要获得here

的示例

Answer 1

http://www.spelltower.com/正在为这些彩色背景使用HTML section标签。它不仅仅是具有多种背景颜色的单个元素。在调整浏览器窗口大小时，Javascript用于调整每个部分的大小。

HTML

<div>
    <section id="first_section">First Section</section>
    <section id="second_section">Second Section</section>
    <section id="third_section">Third Section</section>
</div>

CSS

#first_section { background_color: blue; }
#second_section { background_color: red; }
#third_section { background_color: green; }

的Javascript

//When the browser window is resized...
$(window).resize(function() {
    // Get the new window height
    var windowHeight = $(window).height();

    //Determine the height we want each section, in this
    //case we don't want it to be less than 600 pixels tall
    var newHeight = windowHeight;
    if(newHeight<600) newHeight = 600;

    $('section').css('height', newHeight);
});

Answer 2

如果您在spelltower.com上检查来源，您会注意到您所看到的内容并未将多种背景颜色应用于整个页面。每个部分都有自己的背景颜色。

Answer 3

如果你希望你的身体是一种颜色的90％和另一种颜色的剩余10％，那么你应该在HTML体中创建两个容器：对于每个容器，你将分配一个不同的CSS。为了解释你的逻辑（我让你完成关于定位，尺寸等的其余工作）：

HTML：在这里创建两个独立的div容器......

<body>

    <div id="first_section">

    <div/>

    <div id = "second_section">

    <div/>

<body/>

因此，您会将样式属性归因于 CSS 中的每一个......

#first_section{
    width: 100%;
    height: 90%;
    background-color: red;
}

#second_section{
    width: 100%;
    height: 10%;
    background-color: blue;
}

我会特别建议Bootstrap，这是一个很好的类和Javascript函数集合，可以让您的网站在浏览器大小更改后立即响应（从全屏到平板电脑或手机，例）。

如何使用超过1种背景颜色的网站？

3 个答案:

HTML

CSS

的Javascript