Блог

Главная - Вопросы по программированию - Привязка Html по горизонтали без javascript

Привязка Html по горизонтали без javascript

#html #css

#HTML #css

Вопрос:

http://www.indofolio.com /, я пытаюсь создать веб-сайт с аналогичной функцией, но я не понимаю, как он сделал горизонтальную прокрутку с тегом привязки без javascript. Отключите javascript, и его веб-сайт все еще функционирует должным образом. Мне действительно нравится прогрессивное улучшение, которое он сделал.

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

     <!DOCTYPE HTML>
    <html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ab {
    width: 20%;
    height: 20%;
    float: left;
    display: inline-block;
    border: 1px solid red;

}

</style>
 </head>
 <body>
 <a href="#box1">aaaaaaa</a>
 <a href="#box2">bbbbbbb</a>
<div id="container" style="width:100%">
    <ul style="width:500%;height:2000px;background-color:red">
        <li class="ab"><a name="box1"></a>
            <div>test</div>
        </li>
        <li class="ab"><a name="box2"></a>
            <div>test2</div>
        </li>
        <li class="ab">
            <a name="box3"></a>
            <div>test3</div>
        </li>
        <li class="ab">
            <div></div>
        </li>
        <li class="ab">
            <div></div>
        </li>
    </ul>
</div>
 </body>
 </html>

Ответ №1:

Как сказал Квентин, но его объяснения могут немного не хватать, если вы новичок в веб-дизайне. При выключенном javascript обратите внимание, что url в изменяется. Домашняя страница www.indofolio.com/#box1 следующая имеет #box2 и т.д. Это id поля содержимого, которые он использует. Нормальным поведением для a тега является «переход» к этим точкам, если они существуют на странице и привязка настроена на это. Привязка его домашней страницы находится там, <a class="link home selected" href="#box1">Home</a> где href находится то, что вызывает переход к этому местоположению.

РЕДАКТИРОВАТЬ: Вот несколько переработанных кодов для вашего примера.

HTML

 <div id="nav">
 <a href="#box1">B1</a>
 <a href="#box2">B2</a>
 <a href="#box3">B3</a>
 <a href="#box4">B4</a>
 <a href="#box5">B5</a>
</div>
<div id="container">
    <ul>
        <li class="ab" id="box1">
            <div>test1</div>
        </li>
        <li class="ab" id="box2">
            <div>test2</div>
        </li>
        <li class="ab" id="box3">
            <div>test3</div>
        </li>
        <li class="ab" id="box4">
            <div>test4</div>
        </li>
        <li class="ab" id="box5">
            <div>test5</div>
        </li>
    </ul>
</div>

CSS

 body {
    padding: 0;
    margin: 0;
}
.ab {
    width: 20%;
    float: left;
    padding: 0;
    margin: 0;
}

.ab div {
    height: 500px;   
    border: 1px solid red;
}

#container {
    width: 500%; /* five page widths for five horizontal pages */
    padding: 0;
    margin: 1.5em 0 0;
}

#container ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

#nav {
    position: fixed;
    left: 0;
    top: 0;
}

#nav a {
    margin-right: 10px;
    display: inline-block;
}

Комментарии:

1. Да, я понимаю, как он прыгает, но он не работает по горизонтали, я просто вставил код сверху, просто протестируйте его. Когда вы удаляете встроенный блок и перемещаете влево, это работает отлично, но не наоборот. к сожалению, но это работает на indofolio …. это все еще загадка

2. Он не перемещается по горизонтали в indofolio с выключенным javascript. Это просто «прыгает» на место. Горизонтальная привязка выполняется только с помощью javascript.

3. отключите javascript, отключите скрытое переполнение в div id =»оболочка», изображения выравниваются по горизонтали, когда вы уменьшаете масштаб, чтобы минимизировать содержимое, и когда вы нажимаете на меню, оно переходит к нему. Я знаю. но это не работает нормально даже в моем простом тесте там. Он не будет прыгать по горизонтали… пожалуйста, будьте точнее, потому что я тупой, и я чувствую себя еще более тупым, когда мне приходится уточнять снова.

4. Хорошо, я думаю, что теперь я понял ваш вопрос. Я отредактировал ваш пример кода. Главное — сделать ваш контейнер достаточно широким, чтобы в нем могли размещаться объекты, которые вы перемещаете.

Ответ №2:

Он прокручивается по вертикали, используя обычные привязки, если JS недоступен.

Горизонтальное позиционирование применяется с помощью JS.