| <UL><LI>를 이용한 가로정렬 메뉴 만들기 |
|
|
  |
9년 전
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>CSS를 일렬로 나열하기</title>
<style type="text/css">
/* 기본 설정*/
a{text-decoration:none; color:#000000;}
a:hover{color:#ff0000;}
/* nav tag */
nav ul{padding-top:10px;} /* 상단 여백 10px */
nav ul li {
display:inline; /* 세로나열을 가로나열로 변경 */
border-left:1px solid #999; /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */
font:bold 12px Dotum; /* 폰트 설정 - 12px의 돋움체 굵은 글씨로 표시 */
padding:0 10px; /* 각 메뉴 간격 */
}
nav ul li:first-child{border-left:none;} /* 메뉴 분류중 제일 왼쪽의 "|"는 삭제
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>
</nav>
</body>
</html> |
|
 추천 : 407 |
추천
목록
|
|
