만만하게 볼 작업만은 아니네요^^;;
이미지를 변경하시거나 소스를 수정해서 직접 만들어 보세요
모두 고마우이..ㅎㅎ
<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문서로 빼셔야 겠죠..ㅎㅎ
출처 : 하코사 나나님
'Web story > Html' 카테고리의 다른 글
link와 @import 방식의 사용 (0) | 2008.07.29 |
---|---|
파일객체의 찾아보기 버튼을 이미지로 (0) | 2008.07.23 |
LABEL태그를 이용해 보세요 (0) | 2008.05.07 |
a 태그의 사용성과 접근성. (0) | 2008.05.07 |
DTD에 따른 FIELDSET & LEGEND 요소 사용법. (0) | 2008.05.07 |