탐색 바
모든 웹사이트에서는 탐색 바를 능숙하게 사용하는 것이 매우 중요합니다.
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픽셀로 지정하려고 합니다
다음 섹션