이번에는 CSS로 1단계 네비게이션 바를 구현하는 방법을 알려드리겠습니다. CSS를 사용하여 1단계 네비게이션 바를 구현할 때 주의 사항은 무엇인가요?
1단계: CSS 스타일 시트를 도입하고 ID 탐색으로 새 레이어를 만든 다음
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/yiji.css"/> </head> <body> <p id="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> <li><a href="">首页</a></li> </ul> </p> </body> </html>
두 번째 단계는 CSS 스타일을 설정하는 것입니다:
1. nav의 속성을 설정합니다.
#nav{ width: 500px; height: 50px; border: 1px solid red; }
표시 효과는 다음과 같습니다.
2. 앞에 태그 내장 포인트
#nav ul{ list-style: none; }
3.
#nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; }
에 포함된 태그의 속성을 설정합니다.
R#nav ul li a:hover{ background-color: #ABCDEF; }ALINAL EFFECT :
complete HTML 코드 부분 :
R<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/yiji.css"/>
</head>
<body>
<p id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
<li><a href="">首页</a></li>
</ul>
</p>
</body>
</html>
SCOMPLETE CSS 스타일 코드 부분 :
*{ margin: 0; padding: 0; } #nav{ width: 500px; height: 50px; border: 1px solid red; margin: 30px; } #nav ul{ list-style: none; } #nav ul li a{ width: 98px; height: 50px; float: left; border: 1px solid red; text-align: center; line-height: 50px; text-decoration: none; } #nav ul li a:hover{ background-color: #ABCDEF; }
이 기사에서 사례를 읽은 후 방법을 마스터했다고 믿습니다. . 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:
CSS3의 n번째 하위 유형과 n번째 유형의 차이점 및 사용 팁css3의 새로운 속성 box-sizing에 대한 자세한 설명
위 내용은 CSS는 첫 번째 수준 탐색 모음을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!