div+css를 사용하여 첫 번째 수준 탐색 만들기
- 零下一度원래의
- 2017-04-28 11:01:371929검색
이 글에서는 주로 간단한 네비게이션 바를 만드는 방법을 공유합니다. 특정 참조 값이 있으므로 아래 편집기를 사용하여 살펴보겠습니다.
오늘은 간단한 탐색 모음을 만드는 방법을 공유하겠습니다.
1단계: CSS 스타일 시트 소개 nav ID를 사용하여 새 A 레이어를 만들고
<!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;
}의 표시 효과는 다음과 같습니다.
앞의 점을 지웁니다.
#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;
}
rreee최종 효과:
HTML 코드 부분 완성:
#nav ul li a:hover{
background-color: #ABCDEF;
} CSS 스타일 코드 부분 완성:
<!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>위 내용은 div+css를 사용하여 첫 번째 수준 탐색 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.