的 DEMO

Question

我想给一个html页面提供两个页脚。我的页面如下所示： enter image description here

我想把这两个链接作为两个段落的页脚。我的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;
}

还告诉我如何在两个段之间添加数据。如何获得所需的结果？

Answer 1

的 DEMO

标记：可能看起来像这样。

<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; }

Answer 2

在这里，我根据您的要求对代码进行了所有更改检查此JSFiddle链接

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

如何在html文档中提供两个页脚

2 个答案:

的 DEMO