CSS는 첫 번째 수준 탐색 모음을 구현합니다.
- php中世界最好的语言원래의
- 2018-03-22 13:04:363313검색
이번에는 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 :
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!