我想給頁面提供兩個頁腳。我的頁面看起來像這樣： enter image description here 如何在html文檔中提供兩個頁腳

我想讓兩個鏈接都作爲頁腳的頁腳。我的HTML代碼是在這裏：

<html> 
    <head> 
     <link rel="stylesheet" href="style2.css"/> 
    </head> 
    <body> 
     <h1 class="header"> My site </h1> 
     <p class="first"> 
      <span>T</span>the textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe text 
     </p> 
     <p class="second"> 
      <span class="my">Y</span> My second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second para 
      <span class="footer"> Link:<a href="#" > First link </a></span> 
     </p> 
     <h3> Link:<a href="#">Secondlink</a> </h3> 
    </body> 
</html>

CSS是在這裏：

body 
{ 
    width: 500px; 
} 
.my 
{ 
    font-size: 200%; 
    float:left; 
    margin: 0 5px 0 0 ; 
} 
.header 
{ 
    background-color:blue; 
    text-align: center; 
    color:#fff; 
     margin:0; 

} 
.first 
{ 
    float:left; 
    max-width:200px; 
    border-right:1px solid green; 
    margin:0; 
    padding:4px; 
    border-left:1px solid green; 
} 
.second 
{ 
    border-left:1px solid green; 
    float:right; 
    max-width:200px; 
    border-right:1px solid green; 
    margin:0; 
    padding:4px; 
} 
h3 
{ 
    clear:both; 
    background-color: green; 
    color:#fff; 
    max-width:210px; 
} 
.footer 
{ 
    font-size: 27px; 
    background-color: green; 
    color:#fff; 
    padding:0; 
    border-collapse:collapse; 
}

還告訴我，我怎麼能對兩者之間添加數據。我如何獲得所需的結果？

來源

2014-04-05 jahan

DEMO

enter image description here

的標記：看起來是這樣的。

<html> 
    <head> 
     <link rel="stylesheet" href="style2.css"/> 
    </head> 
    <body> 
     <header> 
      <h1 class="header"> My site </h1> 
     </header> 
     <section> 
     <article class="first"> 
      <p><span>T</span>the textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe textthe text</p> 
      <footer class="footer"> Link:<a href="#" > First link </a></footer> 
     </article> 
     <article class="second"> 
      <p><span class="my">Y</span> My second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second paraMy second para</p> 
      <footer class="footer"> Link:<a href="#" > Second link </a></footer> 
     </article> 
     </section> 
    </body> 
</html>

**風格：**可能看起來像這樣。

*{ 
     padding:0; 
     margin:0; 
    } 
    body{ 
     text-align:center; 
     width: 500px; 
    } 
    header{ 
    clear:both; 
    background-color: green; 
    color:#fff; 
    } 
    article{ 
    width:40%; 
    text-align:left; 
    } 

    [class=first]{ 
     float:left; 
     max-width:200px; 
     border-right:1px solid green; 
     margin:0; 
     padding:4px; 
     border-left:1px solid green; 
    } 
    [class=second]{ 
     border-left:1px solid green; 
     float:right; 
     max-width:200px; 
     border-right:1px solid green; 
     margin:0; 
     padding:4px; 
    } 

    footer{ 
     font-size: 27px; 
     background-color: green; 
     color:#fff; 
     padding:0; 
     border-collapse:collapse; 
    }

來源

2014-04-05 13:20:28

在這裏，我已經做了一切發生在你的代碼，根據您的要求檢查該鏈接的jsfiddle

(http://jsfiddle.net/ugLMy/ )

來源

2014-04-05 15:06:45 napender

如何在html文檔中提供兩個頁腳

回答

DEMO

相關問題