라벨 네비게이션 제작을 구현하는 순수 CSS_체험교류

인터넷에서 검색한 결과 순수하게 CSS를 사용하여 레이블 탐색을 만드는 방법에 대한 튜토리얼이나 지침은 많지 않았습니다. 이것은 CSS를 배우는 많은 사람들에게 정말 배려가 없는 일입니다. 아무도 해본 적이 없기 때문에 먼저 시도해 보겠습니다. 제가 여기서 하고 있는 CSS 라벨 탐색은 순수한 CSS, JS, 배경 이미지가 없는 녹색 탐색입니다. 이 기사는 초보자에게 적합하고 전문가는 지나갈 수 있습니다. 하하!

<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">스크립트 하우스 01</a></li> <li><a href="#" id="nav002">스크립트 하우스 02</a></li> <li><a href="#" id="nav003">스크립트 하우스 03</a></li> </ul> </div> <div class="con">스크립트 홈 <a href="</div">www.jb51.net</a> </div>>
[Ctrl+A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

코드 복사 코드는 다음과 같습니다.

.mainNav{
margin:0 20px; 🎜> height:47px;
border-bottom:2px solid #000;
ul{
margin:20px;
margin-bottom:0
padding-left: 20px; -유형:없음;
글꼴 크기:12px;
}
ul li{
여백:5px; 🎜> }
ul li a{
display:block;
width:100px;
text-align:center;
배경색:#FC0; > 경계선: 없음;
높이:27px
배경색:#F60; #000;
경계선:없음;
.con{
여백:0
패딩:20px;
배경- 색상:#F60;
테두리:2px 솔리드 #000;
테두리 상단: 없음
}





복사 코드


코드는 다음과 같습니다.

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

En fait, le point clé est la commande position:absolute dans ul. , le contenu de la navigation ul devient un affichage en couche , ce qui équivaut à flotter sur le navigateur. Afin d'éviter que le contenu suivant ne remplisse le contenu de la partie ul, un div est placé à l'extérieur de l'ul, ce qui aide l'ul à occuper de l'espace. Ce div sert également d'arrière-plan ul. La clé de la navigation dans les étiquettes est la bordure inférieure. Après avoir tout lu, vous constaterez que c’est en fait très simple, mais la clé est d’avoir une idée. Très bien! Continuez à apprendre !

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.