Якоря не работают на одной странице сайта

0

Мой новый проект - это веб-сайт на одну страницу. Честно говоря, это моя страница презентации так сказать. Вот

Теперь, моя проблема. Как я уже сказал, сайт должен быть на одной странице. Поэтому я проектирую 4 раздела, сначала в середине, второй справа, третий внизу и последний слева. Все они абсолютно позиционированы. А также фиксированный nav.

Следующий код: 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; } */

}

Проблема здесь в том, что навигация с помощью якорей не работает. Правильно ли это, или вы предпочтете лучший вариант?

Кроме того, скрипка включала скрипку

Теги:
anchor

1 ответ

0
Лучший ответ

Попробуйте использовать

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

Надеюсь это поможет

Поделиться
  • 0
    Нет :( Но спасибо за попытку!
  • 0
    проверьте, достаточно ли страницы журнала, и якоря размещены на относительно большом пространстве.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню