[HTML] 탭유형

ie7, ie8, ie9, ie10, 크롬, 사파리, 오페라, 파이어폭스

탭유형 TYPE 1

• 2010’s
• 2000’s
• 1990’s
• 1980’s
• 1970’s~1930’s

• 객실1
• 객실2
• 객실3
• 객실4
• 객실5

	

		

			
2010’s
			
2000’s
			
1990’s
			
1980’s
			
1970’s~1930’s
		
	

/* big */
.sub_tab ul{*zoom:1;}
.sub_tab ul:after{content:""; display:block; clear:both;}
.sub_tab ul{margin-bottom:10px;}
.sub_tab ul li{float:left;}
.sub_tab ul li a{display:block; padding:8px 24px 9px; margin-right:4px; border:1px solid #666; font-weight:bold; font-size:16px; outline:none; text-decoration:none;}
.sub_tab.anchor ul li a:hover{background:#222; color:#fff;}
.sub_tab ul li.on a{padding:9px 25px 10px; border:none; background:#444; color:#fff;}
/* small */
.sub_tab.sm ul li a{padding:3px 13px 6px; margin-bottom:4px; font-weight:normal; border-color:#333; font-size:12px; color:#333;}
.sub_tab.sm ul li.on a{padding:4px 14px 7px; background:#333; color:#fff;}

탭유형 TYPE 2

• 객실형
• 식음형
• 식음형
• 식음형
• 식음형

• 객실형
• 식음형
• 식음형
• 식음형
• 식음형

	

		
객실형
		
식음형
		
식음형
		
식음형
		
식음형
	

/* sub_tab_lineStyle */
.sub_tab2 ul{*zoom:1;}
.sub_tab2 ul:after{content:""; display:block; clear:both;}
.sub_tab2 ul{border-bottom:1px solid #666; margin-bottom:10px;}
.sub_tab2 ul li{float:left;}
.sub_tab2 ul li a{position:relative; display:block; padding:8px 18px 10px 19px; text-decoration:none;  /* padding:8px 24px 10px; 2013-12-31 이유미 오페라에서 깨짐  */ border-right:1px solid #ccc; border-top:1px solid #ccc; background:#fff; text-align:center; font-size:16px; font-weight:bold; color:#999; outline:none;}
.sub_tab2 ul li:first-child a{border-left:1px solid #ccc;}
.sub_tab2 ul li.on a{color:#222; border:1px solid #666; border-bottom:none; margin-bottom:-1px; padding-bottom:11px;}
/* small */
.sub_tab2.sm ul{border-color:#ccc;}
.sub_tab2.sm ul li a{color:#999; padding:6px 13px 7px; font-weight:normal; font-size:12px;}
.sub_tab2.sm ul li.on{margin-top:-1px; font-size:16px;}
.sub_tab2.sm ul li.on a{background:#666; color:#fff; margin-top:1px; padding-bottom:8px;}