Reines CSS zur Realisierung der Label-Navigationsproduktion_Erfahrungsaustausch-CSS-Tutorial-php.cn

Reines CSS zur Realisierung der Label-Navigationsproduktion_Erfahrungsaustausch

WBOY

Freigeben： 2016-05-16 12:06:26

Original

1845 Leute haben es durchsucht

Nach der Suche im Internet habe ich nicht viele Tutorials oder Anleitungen zum Erstellen einer Etikettennavigation ausschließlich mit CSS gefunden. Die meisten davon beinhalten das Schreiben von JS. Das ist für viele Leute, die CSS lernen, wirklich nicht rücksichtsvoll. Da es noch niemand gemacht hat, lass es mich zuerst versuchen! Die CSS-Label-Navigation, die ich hier verwende, ist eine grüne Navigation mit reinem CSS, ohne JS und ohne Hintergrundbild. Dieser Artikel ist für Anfänger geeignet, Experten können vorbeikommen, haha!

<div class="mainNav">
        <ul>
            <li><a href="#" id="nav001">Script House 01</a></li>
            <li><a href="#" id="nav002">Script House 02</a></li>
            <li><a href="#" id="nav003">Script House 03</a></li>
        </ul>
    </div>
    <div class="con">Skript-Startseite <a href="</div">www.jb51.net</a>
</div>>

[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Code kopieren Der Code lautet wie folgt:

.mainNav{ 
 margin:0 20px 
 height:47px; 
 border-bottom:2px solid #000; 20px; -type:none; 
 position:absolute; 
ul li{ 
 margin-right:5px; 🎜> } 
ul li a{ 
 width:100px; 
 text-align:center; 
 color:#999; 
 background-color:#FC0; > border-bottom:none; 
 height:#FFF; 
 border:2px; #000; 
 border-bottom:none; 
.con{ 
 margin:0 20px; 
 color:#FFF; color:#F60; 
 border:2px solid #000; Code


 Der Code lautet wie folgt:

 
 " id="nav001">Ali Manman 01/ li> ;                                                                                                    🎜> 




사실 이 CSS 속성을 사용하기 때문에 핵심은 position:absolute 명령입니다. , ul 탐색 내용은 브라우저에 떠 있는 것과 동일한 레이어 표시가 됩니다. 다음 내용이 ul 부분의 내용을 채우는 것을 방지하기 위해 ul 외부에 div를 배치하여 ul이 공간을 차지하는 데 도움을 줍니다. 이 div는 ul 배경으로도 사용됩니다. 레이블 탐색의 핵심은 하단 테두리입니다. 다 읽고 나면 실제로는 매우 간단하다는 것을 알게 될 것입니다. 하지만 핵심은 아이디어를 갖는 것입니다. 괜찮은! 계속 배워보세요! 