Web story/Html

탭목록 최소이미지 간단작업

JKJ1004 2008. 5. 7. 19:54

만만하게 볼 작업만은 아니네요^^;;

이미지를 변경하시거나 소스를 수정해서 직접 만들어 보세요

모두 고마우이..ㅎㅎ

<style type="text/css">
 h3 {
  display:none;
 }
 .floor { 
  background:url("img/com_bg01.gif") left top no-repeat;
  width:702px;
  height:70px;
  padding:6px 0 0 80px;
  margin:0;
  list-style-type:none; */  li 앞의 ● 들을 없앱니다. */
 }
 .floor li{
  float:left;  /* li가 옆으로 쭉 붙습니다.. display:inline; 써놓고 계속 고민T.T ie에선 먹지만.. ff, opera 에선 inline이 안먹네요... ul이 block요소라 그렇디다..ㅎㅎ  float:left;를  써 주어야 모두 만족시킵니다. */
  width:81px;
  text-align:center;
  margin:0 0 0 5px;
 }
 .floor li a {
  color:#666;
  font:bold 12px Dotum;
  width:81px;
  height:22px;
  padding:5px 0px 0px 0px;
  text-decoration:none;
  display:block; /* ie에선 안써도 제대로 보이지만... ff, opera에선 block 써주어야 영역이 제대로 표출됩니다..  이거 빼고 테스트 해보시길..ㅎㅎ */
 }
 .floor li a:hover {
  color:#fff;
  background:url("img/com_bg_num.gif") left top no-repeat; /* 마우스 갖다대면 배경으로 나옵니다. */
  font:bold 12px Dotum;
  width:81px;
  height:22px;
  padding:5px 0px 0px 0px;
 }
 .floor li a.aaa {
  color:#fff !important;
  background:url("img/com_bg_num.gif") left top no-repeat; /* 선택된 페이지 */
  width:81px;

 }
</style>


<h3>층별 안내</h3>
<ul class="floor">
 <li><a href="#" class="aaa">B1</a></li>
 <li><a href="#">1F</a></li>
 <li><a href="#">2F</a></li>
 <li><a href="#">3F</a></li>
 <li><a href="#">4F</a></li>
 <li><a href="#">5F</a></li>
 <li><a href="#">6F</a></li>
</ul>


잠깐의 틈을 타..

작업하던 중 응용해서 만들어 봤어요... 아웅~ 신나!

지식이 기술을 낳습니다... 보다 업그레이드 해서 작업해보세요 ㅎㅎ


디따조아, 디스타일의 도움을 받아.. 여러가지 사실을 캐치.... 뜻깊은 하루 되었습니다..

작업 후 style은 css문서로 빼셔야 겠죠..ㅎㅎ

출처 : 하코사 나나님

반응형