0

我是今天刚学 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>
4

4 回答 4

2

尝试这个：

在您的 html 代码中添加：

<div id="footer">
    &copy; All rights reserved
</div>

并在您的 css 添加（更新）：

#footer {
    position: absolute;
    bottom: 0px;
    background-color: orange;
    width: 100%;
    text-align: center;
}

检查演示

于 2013-08-19T14:58:47.047 回答
1

你可以这样做：

<div id="footer">
</div>

或 HTML 5：

<footer>
</footer>

并添加 CSS：

#footer {
  something
}

或者对于 HTML 5：

footer {
  something
}

对于版权，只需&copy;在您想要版权符号的地方使用 ©。

于 2013-08-19T15:05:03.573 回答
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;
 }
于 2013-08-19T15:04:15.953 回答
-1

添加一些 HTML 和一些 CSS 以使您的文本居中。

如果使用 HTML5...

HTML：

<footer>
  <p>&copy; Copyright 2011. All Rights Reserved.</p>
</footer>

CSS：

footer { text-align: center; }

如果使用 HTML4...

HTML：

<div id="footer">
  <p>&copy; Copyright 2011. All Rights Reserved.</p>
</div>

CSS：

#footer { text-align: center; }
于 2013-08-19T15:07:00.470 回答