我今天刚刚学习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>
答案 0 :(得分:1)
试试这个:
你的html代码中的添加:
<div id="footer">
© All rights reserved
</div>
并在您的CSS中添加(更新):
#footer {
position: absolute;
bottom: 0px;
background-color: orange;
width: 100%;
text-align: center;
}
检查DEMO
答案 1 :(得分:1)
你可以这样做:
<div id="footer">
</div>
或HTML 5:
<footer>
</footer>
并添加CSS:
#footer {
something
}
或HTML 5:
footer {
something
}
对于版权,只需使用©
您想要的版权符号,©。
答案 2 :(得分:0)
我不确定你想要什么样的页脚,但试试这个。您可以根据需要进行修改。
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;
}
答案 3 :(得分:-1)
添加一些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; }