如何制作具有超过 1 种背景颜色的网站？答案

【问题标题】：How do I do a website with more than 1 background color?如何制作具有超过 1 种背景颜色的网站？
【发布时间】：2014-12-05 22:51:59
【问题描述】：

这就是我得到的，但这只是一种填充屏幕 90% 的背景颜色。但我想在下面有另一种颜色。

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

你可以找到我想得到的例子here

【问题讨论】：

标签： html css colors background

【解决方案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);
});

【讨论】：

【解决方案2】：

如果您检查 spelltower.com 上的来源，您会注意到您所看到的并不是应用于整个页面的多种背景颜色。这些部分中的每一个都有自己的背景颜色。

【讨论】：

【解决方案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 函数集合，可以让您的网站在浏览器大小发生变化时立即响应（例如，从全屏到平板电脑或手机） .

【讨论】：