HTML 5和CSS3纯内容切换

时间:2016-02-13 17:03:01

标签: html css html5 css3

我有以下问题。

所以我想在我的网站上创建一个切换内容。 我想创建我可以用我的导航栏切换内容。 我没有任何想法......

这是我的代码

<section class="content show" id="home">
        <h1>Welcome</h1>
        <h5>My new site is coming soon!</h5>
        <p>ich werde diese Seite komplett neu aufbauen, ich hoffe das Ihnen meine neue Webpräsenz gefallen wird. <br><br> Mit freundlichen Grüßen, <br> <b> Alexander Constapel </b> </p>
        <p><a href="#about">More info &#187;</a></p>
    </section>

    <!-- /About Page -->
    <section class="content hide" id="about">
        <h1>About</h1>
        <h5>Some facts about me!</h5>
        <p>
        <ul> 
        <li>Alexander Constapel </li>
        <li>20.02.1994 </li>
        <li>Ausbildung zum Mediengestalter in Digital und Print </li>
        <li>Webdevelopment & Design </li>
        </ul></p>
        <p><a href="http://facebook.com/hipsteralex">Subscribe me on Facebook!</a></p>
    </section>

    <!-- /Contact Page -->
    <section class="content hide" id="contact">
        <h1>Contact</h1>
        <h5>Get in touch!</h5>
        <p>Email: <a href="#">Alook.de</a><br />
            Phone: 05<br /></p>
        <p>Jever<br />
            Germany</p>
    </section>

And this is my CSS to this:

.show {
    display: block;
}
.hide {
    opacity: 0;
}
.content { 
    color: deepskyblue;
    float:left;
    margin:40px;
    position:absolute;
    top:200px;
    width:600px;
    z-index:9999;
    -webkit-font-smoothing:antialiased;
}

Ofc我的资产净值已经#home #about #contact 但它仍然无法运作。 请帮帮我。 非常感谢。 亚历

0 个答案:

没有答案