Question

我正在创建一个个人生物网站，我想要标题，正文和页脚的不同颜色背景。我找到了这个网站http://www.chimengxi.com/，这就是我想要的。最后，我希望我的标题是水平的，而不是堆叠。如果可行的话，一些3色的配色方案会很棒。

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="main.css">
    <meta charset="utf-8">
    <title>My Personal Website</title>
</head>

<body>
    <div class="wrapper">
        <ul class="navbar">
            <li><a href="default.asp">Home</a>
            </li>
            <li><a href="news.asp">About Me</a>
            </li>
            <li><a href="contact.asp">School</a>
            </li>
            <li><a href="about.asp">Contact Information</a>
            </li>
        </ul>
        <h1><a href="index.php">Terrence Horgan <br> Information Science Major </a></h1>
        <h2><u>My Personal  Website...About ME!</u></h2>
        <p id="summary">Here is a little about myself....</p>
        <p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
        <div class="footer">Call me (607-425-0760)<address>Email Me <a href="mailto:tmh233@cornell.edu">tmh233@cornell.edu</a>.<br></address>
            </a>Copyright @ 2014 Terrence Horgan</div>
    </div>
</body>

</html>

CSS

body {
    background-color:orange;
    height:100%
}
ul.navbar {
    background-color:orange;
    text-align:right;
    font-size:175%
}
.navbar ul {
    height:auto;
    padding:0;
    margin:0;
    background-color:#f2f2f2;
    border-bottom:1px solid #ccc;
    display:inline-block
}
.navbar li {
    display:inline-block;
    padding:20px;
    margin-left:auto;
    margin-right:auto
}
h1 {
    position:relative;
    bottom:85px
}
h1 a:hover, a:active {
    color:#FFF;
    background-color:#3CF;
    text-decoration:none
}
h1 a:visited, a:link {
    color:#F36;
    text-decoration:none
}
p {
    width:30%;
    font-size:120%
}
#summary {
    font-size:135%;
    font-weight:700
}
.footer {
    display:inline-block;
    position:relative
}

Answer 1

将导航栏包装在div中。然后根据需要设置div背景颜色的样式。
将内容包装在导航栏下方和页脚上方的另一个div中。相应的风格。
将页脚的背景颜色设置为您想要的任何颜色。

Answer 2

以下是更改颜色的示例。我通过将它们着色为绿色和黄色并添加一些简单的CSS样式使它们相应地适合（浮动，文本对齐）使它们非常明显。请看下面的代码，请注意我将CSS粘贴在顶部。您需要做的就是将代码之间的代码粘贴到CSS文件中。

<!DOCTYPE html>
<html>

<head>
    <style>
    body {
    height:100%
        }

ul.navbar {
    background-color:green;
    text-align:right;
    font-size:175%;
    padding-bottom: 10px;
    text-align: center;
}
.navbar ul {
    height:auto;
    padding:0;
    margin:0;
    background-color:#f2f2f2;
    border-bottom:1px solid #ccc;
    display:inline-block;
    float: left;

}
.navbar li {
    display:inline-block;
    padding:20px;
    margin-left:auto;
    margin-right:auto;
    font-size: 25px;
    margin-top: 20px;
}
h1 {
    float: left;
    font-size: 24px;
            text-align: left;
}
h1 a:hover, a:active {
    color:#FFF;
    background-color:#3CF;
    text-decoration:none
}
h1 a:visited, a:link {
    color:#F36;
    text-decoration:none
}
p {
    width:30%;
    font-size:120%
}
#summary {
    font-size:135%;
    font-weight:700
}
.footer {
    display:inline-block;
    position:relative;
    background-color: yellow;
    width: 100%;
    text-align: center;
}</style>

    <meta charset="utf-8">
    <title>My Personal Website</title>
</head>

<body>
    <div class="wrapper">
        <ul class="navbar">
            <h1><a href="index.php">Terrence Horgan <br> Information Science Major </a></h1>
            <li><a href="default.asp">Home</a>
            </li>
            <li><a href="news.asp">About Me</a>
            </li>
            <li><a href="contact.asp">School</a>
            </li>
            <li><a href="about.asp">Contact Information</a>
            </li>
        </ul>
        <h2><u>My Personal  Website...About ME!</u></h2>
        <p id="summary">Here is a little about myself....</p>
        <p>My name is Terrence Horan, I love in Montour Falls, NY, not to far from Ithaca, NY. I attend Cornell University and am majoring in Information Science, and hopefully will get a minor in Computer Science. I love anything that involves technology,however if you would like to read more, dont be shy! Come in a browse my website!</p>
        <div class="footer">Call me (607-425-0760)<address>Email Me <a href="mailto:tmh233@cornell.edu">tmh233@cornell.edu</a>.<br></address>
            </a>Copyright @ 2014 Terrence Horgan</div>
    </div>
</body>

</html>

试图获得多彩色背景

2 个答案: