Nano Hash - криптовалюты, майнинг, программирование

CSS HTML меню навигации

В этом примере фиксированная навигация ul вверху слева, она представляет 4 раздела; каждый из которых содержит переменное количество текста. Я хочу знать, как управлять HTML/CSS, чтобы при нажатии любого раздела (1-4) соответствующий текст для этого раздела выводился наверх независимо от количества текста в любом разделе. Другими словами, какой бы раздел ни щелкнули, этот раздел переместится в ту же самую позицию в окне. Таким образом, меню навигации фиксируется, и при щелчке соответствующий раздел текста переносится в то же самое положение и в поле зрения.

<!DOCTYPE html>
<html>
    <head>
        <style>

body 
{
    background-color:#F3E2A9;
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 14px;  
    font-weight: normal;  
    font-variant: normal;  
    font-style: normal;  
    line-height: 120%;  
    margin:200px 0px 0px 250px;
    padding:0px 0px 0px 0px;
    max-width:600px;
}  


            #navlist
            {
            position: fixed;
            left: 50px; /**/
            top: 75px;
            }

            #navlist
            {
            padding-left: 0;
            margin-left: 0;
            border-bottom: 1px solid gray;
            width: 150px;
            }

            #navlist li
            {
            list-style: none;
            margin: 0;
            padding: 0.25em;
            border-top: 1px solid gray;
            }


#navlist li a 
{
line-height: 125%;  
text-decoration: none; 
font-family:Arial,Helvetica,sans-serif;
font-size:18px;
font-variant:small-caps;

font-style: bold;  

}


        </style>
    </head>

    <body>

        <ul id="navlist">
        <li><a href="#1">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="#3">3</a></li>
        <li><a href="#4">4</a></li>



        </ul>


<a id="1"</a>
<h2>1</h2>
<p>
1Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

</p>

<a id="2"</a>
<h2>2</h2>
<p>
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.
2Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.


</p>
<a id="3"</a>
<h2>3</h2>
<p>
3Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus  
 Quis fuisset ut has, in sit vero probo, vim in elit inermis expetendis. At veniam nullam eleifend pri. Mel in nusquam conceptam 

referrentur, eos et natum insolens vituperata. In sea alia eruditi, ceteros vivendo est ad. Wisi dicam atomorum eu duo. Quo 

primis dignissim intellegat ex.


</p>
<a id="4"</a>
<h2>4</h2>
<p>
4Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

</p>
<a id="5"</a>
<h2>5</h2>
<p>
5Lorem ipsum dolor sit amet, sonet molestie an qui, cum iriure evertitur concludaturque ne, inani utamur at duo. Usu ludus 

inermis molestie ut. Case doctus definitiones vis ex, mea ut habemus persequeris, vidit idque nec at. Ne eos nobis senserit 

voluptatum, eruditi invenire ius an, posse munere sed ea. Mea reque dicunt electram an, per veniam consul virtute cu. Ad mel 

harum aliquam instructior, nobis soluta omnium ad sea.

</p>

    </body>
</html>
navigation html css
03.05.2014

  • Примечание: идентификаторы не должны начинаться с цифр, поскольку они могут можно получить только с помощью [id="1"] в CSS (#1 не будет работать) 03.05.2014
  • @ZachSaucier хммм ... интересно, ты действительно пробовал это? Смотрите мой ответ, я использовал (почти) тот же код, что и выше, и нет никаких проблем с использованием #1 - вы можете уточнить, почему это не сработает, или это просто неправильная разметка...? 03.05.2014
  • @webeno 1. Это неправильная разметка 2. Ее нельзя достичь с помощью стилей CSS: #1 { ... properties ... }, чего вы не делали 03.05.2014
  • @ZachSaucier оба могут быть правдой, хотя, когда вы говорите, что это не работает, это подразумевает, что это не будет работать для ссылок на разделы страницы, что, конечно, неверно, потому что это так, и я считаю, что это было целью их в этот вопрос. 03.05.2014
  • @webeno Это не имеет отношения к вашему ответу на этот вопрос, но по-прежнему является неправильным HTML - поэтому я указал на это в комментарии к вопросу. 03.05.2014

Ответы:


1

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

body {
    /* ... */
    margin:200px 0px 2000px 250px;
    /* ... */
}

Кроме того, вы можете применить верхний отступ к h2, чтобы он отображался именно на той высоте, которую вы хотите:

h2 {    
    padding-top:95px
}

Вот демонстрация (я немного подчистил ваш код)

03.05.2014
  • webeno - извините, я пытался исправить свою проблему, и комментарий был опубликован преждевременно - тогда мне пришлось перейти к чему-то другому. Но если вы посмотрите на исходную скрипку с: h2 { padding-top:95px } 10.05.2014
  • эм... кажется, вы не закончили предложение, или я все еще не понимаю, что вы имеете в виду... 10.05.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..