탭메뉴만들기(background-position 이용) > html

요런탭메뉴를 만들어 보기

이미지준비

 

마크업

1. 구조는 ul로 작성한다.

2. li는 a로 감싸고 ul과 li에 calss를 준다.

(class이름은 3가지 메뉴를 구별하는 이름 tab1, tab2, tab3과 선택된상태를 구별하는 이름 on 2가지를 준다)

<ul class="tab">
<li class="tab1 on"><a href="#none">전체</a></li>
<li class="tab2"><a href="#none">신입</a></li>
<li class="tab3"><a href="#none">경력</a></li>
</ul> 

css

1.ul에는 전체 탭의 가로값, 하단2px선을 준다.
.tab{width:760px;height:37px;border-bottom:2px solid #f97b0b}

5. float을 해지한다.

.tab{*zoom:1;}
.tab:after{display:block;content:'';clear:both;}

 

플롯해지는 http://blog.naver.com/qqprriy/60173043984 에 내용이 더 있음

출처 : http://blog.naver.com/qqprriy/60171817104