CSS 네비게이션 바
CSS를 사용하면 지루한 HTML 메뉴 대신 아름다운 탐색 모음으로 변신할 수 있습니다.
html과 css를 사용하여 가로 탐색 메뉴 만들기
li set float:left; 🎜> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px 50px;/*margin:100px auto无效,不能使ul左右居中*/
text-align:center;
font-size:14px;
}
li{
float:left;/*改动的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;/*整体变为可点击区域，而不只是字*/
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
비고:
①ul에 여백을 설정할 수 있지만 여백:100px 자동으로 설정하면 ul은 설정할 수 없습니다. 중앙에 위치 ②ul이 차지하는 높이는 0이다. ③ li의 너비를 설정하고 너비를 자유롭게 조정할 수 있습니다.
IVli 사이에 공백이 생기도록 li에 여백을 설정할 수 있습니다.
⑤ 전체 영역을 클릭할 수 있도록 표시:블록을 설정할 수 있습니다.
⑥링크의 크기를 동일하게 하려면 display:inline;
li 대신 float를 사용하여 display:inline-block을 설정해야 합니다. ; <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style-type:none;
margin:100px;
text-align:center;
font-size:14px;
}
li{
display:inline-block;/*改动的地方*/
width:80px;
padding:10px;
background-color:#ff9137;
}
a:link,a:visited,a:hover,a:active{
color:#fff;
text-decoration:none;
}
a{
display:block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
①ul에 대해 여백:100px 자동을 설정합니다. ul을 왼쪽과 오른쪽에 중앙에 배치할 수 있습니다. ② li에 여백이 없더라도 각 li 사이에는 여전히 공백이 있습니다.
3 전체 영역을 클릭할 수 있도록 표시:블록을 설정할 수 있습니다.
html과 css를 사용해 세로 네비게이션 바 만들기<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;}
li { background: #ddd url(fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid #fff;
border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #aaa;}
</style>
<body>
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
</body>
</html>
인라인 목록:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style type="text/css">
body{margin:50px;}
ul{list-style:none; margin:0; padding:0;}
li{display:inline;}
</style>
<body>
<div>
<ul>
<li>奇才</li>
<li>村村</li>
<li>天干</li>
<li>才工</li>
<li>雪原</li>
</ul>
</div>
</body>
</html>
