Erstellung von Navigationsleiste und sekundärer Menüleiste (Dropdown-Liste)

       Als Anfänger Xiaobai ist es für uns, nachdem wir mit den Funktionen und der Syntax von HTML, CSS und JS vertraut sind, bei der Front-End-Entwicklung des Webs wichtiger, die Schnittstelle zu verschönern, die hauptsächlich auf der Grundlage der riesigen Funktionen realisiert wird von CSS. Heute werde ich mit Ihnen teilen Ja, verwenden Sie HTML-Code, um die horizontale Navigationsleiste und die Dropdown-Menüliste zu implementieren.

Unten ist die Navigationsleiste:

 Navigationsleiste mit Dropdown:

 Als nächstes stellen wir die Implementierung von HTML-Code vor:

<ul id="list">
          <li>
              <a href="#">登录</a>
              <ul id="u1">
                  <li><a href="tsdl.html">提示帮助</a></li>
                  <li><a href="dhrr.html">登录界面</a></li>
                  <li><a href="#">二级导航</a></li>
                  <li><a href="#">二级导航</a></li>
              </ul>
          </li>
          <li>
              <a href="#">注册</a>
              <ul id="u2">
                  <li><a href="tszc.html">提示帮助</a></li>
                  <li><a href="dhrrr.html">注册界面</a></li>
                  <li><a href="#">二级导航</a></li>
                  <li><a href="#">二级导航</a></li>
              </ul>
          </li>
          <li>
              <a href="#">留言</a>
              <ul id="u3">
                  <li><a href="#">提示帮助</a></li>
                  <li><a href="ckly.html">查看留言</a></li>
                  <li><a href="cs.html">发表留言</a></li>
                  <li><a href="#">二级导航</a></li>
              </ul>
          </li>
          <li>
              <a href="#">我的</a>
              <ul id="u4">
                  <li><a href="#">提示帮助</a></li>
                  <li><a href="#">个人中心</a></li>
                  <li><a href="#">二级导航</a></li>
                  <li><a href="#">二级导航</a></li>
              </ul>
          </li>
        </ul>

Code-Analyse:

Verwenden Sie zunächst die Tags <ul></ul> und <li></li>, um das Layout der Navigationsleiste zu erstellen (zu diesem Zeitpunkt befindet sich die Navigationsleiste der ersten Ebene noch in der vertikalen Position, wie Sie sie ziehen). Für die Horizontale ist die Unterstützung des CSS-Teils erforderlich. Folgendes wird im CSS-Teil erwähnt: „Anmeldung“, „Registrierung“, „Nachricht“, „Mein“ im Code ist der <li>-Tag-Teil der Navigationsleiste. und die Codeposition zum Erstellen der sekundären Menüleiste ist ähnlich wie bei „ verschachtelt „ Der Weg

<ul>
    <li>
          <ul>
                <li></li>
          </ul>/*二级下拉列表*/
    </li>
    <li>
          <ul>
                <li></li>
          </ul>/*二级下拉列表*/
    </li>
    <li>
          <ul>
                <li></li>
          </ul>/*二级下拉列表*/
    </li>
    <li>
          <ul>
                <li></li>
          </ul>/*二级下拉列表*/
    </li>
</ul>/*导航栏*/

Auf diese Weise kann die Struktur der Navigationsleiste und des Dropdown-Menüs der zweiten Ebene erstellt werden. Anschließend wird der CSS-Code verwendet, um das Layout zu vervollständigen und zu verschönern

CSS-Codeteil:

a{
                text-decoration: none;
                font-weight: 800;
                font-size: large;
                display: inline-block;
                height: 40px;
                width: 100px;
                color: white;
                background-color: rgb(123, 180, 199);
                /*border: 1px solid red;
                box-sizing: border-box;*/
                line-height: 40px;
                text-align: center;
                padding: 10px 104px;
            }
           ul{
                list-style-type: none;
                position: fixed;
                
            }

            #list{
                display: block;
                margin: 0px;
                padding: 0px;
                width: auto;
                height: 100%;
                

            }

           #list >li{
                float: left;
            }

            #list>li>ul{
                display: none;
                position: absolute;
                float: none;
                
            }

            #list>li:hover ul{
                display: block;
            }

            a:hover {
                background-color: burlywood;
            }

Der Code zum Festlegen der horizontalen Navigationsleiste und der vertikalen Dropdown-Liste lautet wie folgt. Er basiert auf dem Float in CSS , um das Objektelement festzulegen. Wenn es links ist, ist es eine horizontale Navigationsleiste, und wenn es keine ist, ist es eine ist eine vertikale Dropdown-Liste

            #list >li{
                float: left;
            }

            #list>li>ul{
                display: none;
                position: absolute;
                float: none;
            }

Weitere CSS-Einstellungen finden Sie auf der offiziellen Website von Cainiao Tutorial zum Abfragen und Lernen.