요즘 웹표준 공부중인데 자주 가는 사이트가 있습니다.
내용예시가 너무 잘되어있어서 제사이트에서 잠시 가져왔습니다.
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;
}
'All About the Design' 카테고리의 다른 글
| 하루에 눈떠서 보게되는 사이트는 어디가될것인가 (0) | 2007/10/24 |
|---|---|
| 옛 추억을.. windows 변천사 영상 (0) | 2007/10/23 |
| CSS Tab 작업예시 (0) | 2007/10/23 |
| Creative Arts (0) | 2007/10/23 |
| C.Arts에서 공개되고 있는 멋진 웹사이트들 (0) | 2007/10/22 |
| Adobe Media Player 나왔다고 합니다. (0) | 2007/10/18 |
댓글을 달아 주세요