Question

我的新项目是一个单页网站。坦率地说，这是我的演示文稿页面。 here

现在，我的问题。正如我所说，该网站应该是一页。所以我正在设计4个部分，第一个在中间，第二个在右边，第三个在底部，最后在左边。所有这些都绝对定位。还有一个固定的导航。

下一个代码： 1.Html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Andrei Terecoasa</title>

    <meta name="viewport" content="width=device-width, user-scalable=false;">

    <link href='http://fonts.googleapis.com/css?family=Raleway:400,200,500,300' rel='stylesheet' type='text/css'>


    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <div id="first">
        <a name="home"></a>
        <h1 id="hi">Hi!</h1>
        <h2 id="who">I am <span id="name">Andrei <span id="who2">Terecoasa</span></span></h2>
        <p id="what">and i am a front-end developer! <span id="d">:D</span></p>
    </div>
    <div id="blog">
        <a name="blog"></a>
        <article>
            <h1 class="title">Salut</h1>
            <p class="desc">primul articol</p>
        </article>
    </div>
    <nav>
        <ul>
            <li><a href="#home">home</a></li>
            <li><a href="#blog">blog</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">about</a></li>
        </ul>
    </nav>
</body>
</html>

2.CSS：

/*


*/

html,
body {
    min-height: 100%;
    height:100%;
}

body {
    font-family: 'Raleway', sans-serif;
    overflow: hidden;

}

#first {
    background: #2ecc71;
    text-align: center;
    color:#ecf0f1;
    min-height:100%;
    padding: 70px;
    width:100%;
    position: absolute;
    top:0%;
    left:0%;
}

#hi {
    font-size:6em;
    line-height: 100px;
    margin:20px;
}

#who {
    margin:20px;
    font-size: 2.5em;
}

#name {
    color:#2c3e50;
}

#what {
    font-size: 1.3em;
    margin:30px;
}

nav {
    position: fixed;
    bottom:0px;
    background: #ecf0f1;
    width:100%;
    text-align: center;
}

nav ul li {
    display: inline-block;
}

nav ul li a {
    font-size:1.2em;
    display:block;
    padding:10px;
    text-decoration: none;
    color:#8e44ad;
}

#blog {
    position: absolute;
    left:100%;
    top:0;
    width:100%;
    background: #3498db;
        min-height:100%;
    padding: 70px;
    width:100%;
}







/**

 * Media queries for responsive design.

 *

 * These follow after primary styles so they will successfully override.

 */



@media all and (orientation:portrait) {


    html, body {width:100%;max-width: 100%;margin:0;padding:0;}


}



@media all and (orientation:landscape) {


}



@media screen and (max-width:900px) {

}



@media screen and (max-width: 500px) {



}



@media screen and (max-device-width: 480px) {





  /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you: j.mp/textsizeadjust */

  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */

}

这里的问题是通过锚定导航不起作用..这是正确的方法还是你建议更好的方法？

此外，小提琴还包括fiddle

Answer 1

尝试使用

href="linktoyourpage.com#home"
href="linktoyourpage.com#blog"

希望这有帮助

锚点不在一个页面站点中工作

1 个答案: