我今天刚刚学习CSS，我不能继续前进，我不知道如何添加页脚，就像保留所有权利一样？到目前为止，我已经完成了下面的代码，我尝试在div标签结束之前插入它，但我似乎无法插入页脚？我迷路了，请帮助我朝正确的方向努力。提前致谢。
这是我到目前为止所做的：
<html>
<head>
<title>Cascading Menus</title>
<!-- Internal Style -->
<style>
*
{
margin: 0px;
}
#table
{
font-size:100%;
height: 100%;
width: 100%;
background: #aac6e9;
border: 3px solid red;
color:#396;
}
#spaceheader
{
width: 100%;
height: 5%;
background: #aac6e9;
}
.tabs {
position: relative;
min-height: 80%; /* adjust height of the body */
min-width: 80%;
clear: both;
margin: 30px 50px 100px 50px; /* top, right, bottom, left */
background: #aac6e9;
}
.tab
{
float: left; /* this is responsible for tabs to align left */
}
.tab label {
background: #eee;
padding: 10px 40px; /* menu bar item height width */
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
top: -29px;
- webkit-transition: background-color .17s linear;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
-webkit-transition: opacity .6s linear;
opacity: 0;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
opacity: 1;
}
</style>
</head>
<body>
<h1> </h1>
<div id="table">
<div id="spaceheader">
</div>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Home</label>
<div class="content">
<p>Stuff for Tab One</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">About Us</label>
<div class="content">
<p>Stuff for Tab Two</p>
<img src="http://placekitten.com/200/100">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Gallery</label>
<div class="content">
<p>Stuff for Tab Three</p>
<img src="http://placedog.com/200/100">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Forum</label>
<div class="content">
<p>Stuff for Tab Four</p>
<img src="http://placedog.com/200/100">
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">Sign up</label>
<div class="content">
<p>Stuff for Tab Three</p>
<img src="http://placedog.com/200/100">
</div>
</div>
</div> <!--*end of table tag -->
</body>
</html>
试试这个：
在你的HTML代码中添加：
<div id="footer">
© All rights reserved
</div>
并在你的CSS添加（更新）：
#footer {
position: absolute;
bottom: 0px;
background-color: orange;
width: 100%;
text-align: center;
}
检查DEMO
你可以这样做：
<div id="footer">
</div>
或HTML 5：
<footer>
</footer>
并添加CSS：
#footer {
something
}
或者对于HTML 5：
footer {
something
}
对于版权，只需使用©，你想要版权符号，©。
我不确定你想要什么样的页脚，但试试这个。您可以根据需要进行修改。
HTML：
<div id="footer">
<p>All rights reserved</p>
</div>
CSS：
#footer {
position: absolute;
bottom: 0;
background-color: #333333;
height: 100px;
text-align: center;
width: 100%;
z-index: 1;
color: #ffffff;
}
#footer p {
padding-top: 40px;
}
添加一些HTML和一些CSS来集中文本。
HTML：
<footer>
<p>© Copyright 2011. All Rights Reserved.</p>
</footer>
CSS：
footer { text-align: center; }
HTML：
<div id="footer">
<p>© Copyright 2011. All Rights Reserved.</p>
</div>
CSS：
#footer { text-align: center; }