我正在制作个人生物网站，我想要标头，车身和页脚的不同颜色背景。我找到了这个网站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
}
- 将您的Navbar包裹在Div中。样式的Div背景色，但是您想要。
- 将Navbar下方的内容和另一个Div的页脚上方包裹。相应的样式。
- 将页脚的背景色设置为您想要的任何东西。
这是更改颜色的示例。我使它们呈绿色和黄色，并添加一些简单的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>