태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

탭 방식으로 html에 옷을 입혀주는 css

오픈소스SW 2008. 2. 2. 19:56 Posted by 오픈비 chaeya
http://clagnut.com/sandbox/csstabs/?writingtext=csstabs

The HTML:

<ul id="globalnav">
<li><a href="#">Home</a></li>
<li><a href="#" class="here">About</a>
<ul>
<li><a href="#">Vision</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Culture</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#" class="here">History</a></li>
<li><a href="#">Sponsorship</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Proof</a></li>
<li><a href="#">Process</a></li>
<li><a href="#">Expertise</a></li>
<li><a href="#">Help</a></li>
</ul>


The CSS:

/*globalnav*/

#globalnav {
position:relative;
float:left;
width:100%;
padding:0 0 1.75em 1em;
margin:0;
list-style:none;
line-height:1em;
}

#globalnav LI {
float:left;
margin:0;
padding:0;
}

#globalnav A {
display:block;
color:#444;
text-decoration:none;
font-weight:bold;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
}

#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
background:#bbb;
}

#globalnav A.here:link,
#globalnav A.here:visited {
position:relative;
z-index:102;
}

/*subnav*/

#globalnav UL {
position:absolute;
left:0;
top:1.5em;
float:left;
background:#bbb;
width:100%;
margin:0;
padding:0.25em 0.25em 0.25em 1em;
list-style:none;
border-top:1px solid #fff;
}

#globalnav UL LI {
float:left;
display:block;
margin-top:1px;
}

#globalnav UL A {
background:#bbb;
color:#fff;
display:inline;
margin:0;
padding:0 1em;
border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
color:#444;
}

TAG

댓글을 달아 주세요