CSS 네비게이션 바

탐색 바

모든 웹사이트에서는 탐색 바를 능숙하게 사용하는 것이 매우 중요합니다.

CSS를 사용하면 지루한 HTML 메뉴 대신 아름다운 탐색 바로 바꿀 수 있습니다.

탐색 모음 = 링크 목록

표준 HTML 기반으로 탐색 모음이 필요합니다

. 이 예에서는 표준 HTML 목록 탐색 모음을 구축합니다.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网</title> 
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p>注意:我们用 href="#"作为测试连接.用在一个真正的web站点的url。</p>
</body>
</html>

세로 탐색 모음

위 코드에서 세로 탐색 모음을 생성하려면 <a> 요소의 스타일만 필요합니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>

예:

display:block - 블록 요소에 대한 링크를 표시하여 전체 링크 영역을 클릭할 수 있도록 합니다(텍스트뿐만 아니라). 너비를 지정할 수 있습니다.

width:60px - 블록 요소 기본값은 최대 너비입니다. 너비는 60픽셀로 지정해야 합니다.

참고: 세로 탐색 모음에서 <a> 요소의 너비를 지정하세요. 너비를 생략하면 IE6에서 예상치 못한 결과가 발생할 수 있습니다.

가로 탐색 바

가로 탐색 바를 만드는 방법에는 두 가지가 있습니다. 인라인 또는 부동 목록 항목을 사용하세요.

두 방법 모두 괜찮지만, 링크의 크기를 동일하게 만들고 싶다면 float 방법을 사용해야 합니다.

인라인 목록 항목

가로 탐색 모음을 만드는 방법 중 하나는

요소를 지정하는 것입니다. 위의 코드는 표준 인라인입니다:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>

플로팅 목록 항목

위 예에서 링크의 너비는 다릅니다.

모든 링크의 너비가 같도록 하려면 <li> 요소를 띄우고 <a> 요소의 너비를 지정하세요.

예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">娱乐</a></li>
<li><a href="#">关于</a></li>
</ul>
<p><b>注意:</b> 如果!DOCTYPE 没有定义, floating 可以产生意想不到的结果.</p>
<p><b>注意:</b> overflow:hidden 添加到ul元素,以防止li元素列表的外出。.</p>
</body>
</html>

예제 해결:

float:left - 서로 옆에 있는 부동 블록 요소를 사용하여 슬라이드

display:block - 블록 요소에 대한 링크를 표시하여 전체를 클릭 가능한 링크 영역(텍스트뿐만 아니라)으로 만듭니다. us 너비 지정

너비:60px - 블록 요소는 기본적으로 최대 너비입니다. 너비를 60픽셀로 지정하려고 합니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网</title> <style> ul { list-style-type:none; margin:0; padding:0; } a { display:block; width:60px; background-color:#dddddd; } </style> </head> <body> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">娱乐</a></li> <li><a href="#">关于</a></li> </ul> </body> </html>

제출하다 코드 재설정

자동운전