Reines CSS zur Realisierung der Label-Navigationsproduktion_Erfahrungsaustausch

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!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>nav02</title> <style type="text/css"> *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ margin:20px; margin-bottom:0; padding-left:20px; list-style-type:none; font-size:12px; position:absolute; } ul li{ float:left; margin-right:5px; } ul li a{ display:block; width:100px; line-height:25px; text-align:center; color:#999; background-color:#FC0; border:2px solid #000; } ul li a:hover{ height:27px; background-color:#F60; border-bottom:none; } #nav01 ul li a#nav001, #nav02 ul li a#nav002, #nav03 ul li a#nav003{ width:100px; height:27px; color:#FFF; background-color:#F60; border:2px solid #000; border-bottom:none; } .con{ margin:0 20px; padding:20px; color:#FFF; background-color:#F60; border:2px solid #000; border-top:none; } </style> <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 배경으로도 사용됩니다. 레이블 탐색의 핵심은 하단 테두리입니다. 다 읽고 나면 실제로는 매우 간단하다는 것을 알게 될 것입니다. 하지만 핵심은 아이디어를 갖는 것입니다. 괜찮은! 계속 배워보세요!