커뮤니케이션하는 감정은행

요즘 웹표준 공부중인데 자주 가는 사이트가 있습니다.
내용예시가 너무 잘되어있어서 제사이트에서 잠시 가져왔습니다.
css 공부하시는 분들 참고해보세요
정말 깔끔하게 잘해놨더군요

이분사이트가면 좋은 예시들과 블로그제작등이 많습니다.^^

댓글을 영어로 달고 가져오기는 했는데..
아무래도 문법이..OTL
수정도 안되는군욧!!!!

출처-http://www.dezinerfolio.com
CSS Tabs based menu systems are really improving instead of all the classic button based navigation. This small tutorial will help you create a image based liquid tab using CSS and xHTML.

Yes… there are lot other ways getting this done… but for those who are new, this could sure help.

We just tried representing this whole process in a 3D view… not sure if we have messed it up but sure you will understand as you go on below (don’t forget the DEMO).

We are just adding a SPAN tag into the standard xHTML based navigation + a few CSS Attributes to them.

The CSS:

ul li{

float:left;
padding:0 5px;
list-style:none;

}

ul li a{

background:url(/* LEFT IMAGE */) no-repeat left top;
height:45px;
display:block;
float:left;
padding-left:20px;
text-decoration:none;
color:#000;

}

ul li a span{

background:url(/* RIGHT IMAGE */) no-repeat right top;
display:block;
padding:15px 20px 0 0;
display:block;
height:30px;
float:left;

}

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.