html - 我如何做一个有超过 1 种背景颜色的网站？

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);
});