테스트 사이트 - 개발 중인 베타 버전입니다
SIR

이미지 없는 라운드테이블 만들기 ^^;

느낌좋은날
프로필 보기이 회원 글보기
 · 18년 전 · 2490 · 5

링크

http://www.html.it/articoli/nifty/index.html (221)
이미지 없이 스타일쉬트로만 만들어 봅니다...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 박스 표현하기!</title>
<style type="text/css">
.rtop, .rbottom{display:block}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background:#CCCCCC}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
.box { background:#CCCCCC; padding:5px 10px; font-size:12px; font-size:12px}
</style>
</head>

<body>

<div id="container">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">이미지 없이 라운딩 박스 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>

</body>
</html>





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 보더 표현하기!</title>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC;}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
.box { margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; font-size:12px}
</style>
</head>

<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">이미지 없이 라운딩 보더 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</body>
</html>





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>이미지 없이 라운딩 박스 + 보더 표현하기!</title>
<style>
.rtop, .rbottom{display:block;}
.rtop *, .rbottom *{display:block; height:1px; overflow:hidden;}
.r1{margin:0 5px; background:#CCCCCC}
.r2{margin:0 3px; border-left:2px solid #CCCCCC; border-right:2px solid #CCCCCC; background:#EEEEEE}
.r3{margin:0 2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.r4{margin:0 1px; height:2px; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; background:#EEEEEE}
.box{ margin:0; padding:5px 10px; border-left:#CCCCCC solid 1px; border-right:#CCCCCC solid 1px; background:#EEEEEE; font-size:12px}
</style>
</head>

<body>
<div id="container" style="background: #fff">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<div class="box">이미지 없이 라운딩 박스 + 보더 표현하기!</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</body>
</html>

출처-phpschool + http://www.html.it/articoli/nifty/index.html<div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 5개

천상재회
프로필 보기이 회원 글보기
 18년 전
이 좋은 것을.....

감사합니다....

제 홈에 언능 가져다가 해 볼렵니다...^^
느낌좋은날
프로필 보기이 회원 글보기
 18년 전
저도 저 곳 게시판 보다 소스를 넣어서 봤는데 좋더라구요 얼른 업어가세요 ^^;
열정
프로필 보기이 회원 글보기
 18년 전
테스트해본결과.....넘좋군요...감사합니다...^^
뮤죤
프로필 보기이 회원 글보기
 18년 전
너무 좋음. ^^ 고맙습니다.
swinter
프로필 보기이 회원 글보기
 17년 전
감사합니다.

게시글 목록

번호 제목
12307
JavaScript 테이블 각 row 마우스오버시 색깔바꾸기 입니다.
12306
JavaScript png 24비트 투명처리하기 입니다.
12305
JavaScript full-down메뉴 자바스크립트 입니다.
12304
JavaScript iframe사용시 높이 자동 조정하기 입니다.
12303
JavaScript 계산기
12302
JavaScript 숫자를 한글로 변환하기 입니다.
12301
JavaScript 아이프레임 자동으로 늘어나는 자바 스크립트 입니다.
12300
JavaScript 끊기지 않는 배너 롤링 입니다.
12299
기타 랜섬에 당한 화일 복구
12298
JavaScript id값 변수명으로 치환 예제 자바스크립트 입니다.
12297
JavaScript 상태바의 링크 주소 감추기 입니다.
12296
JavaScript 가짜 카운터 달기 입니다.
12295
JavaScript 홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려주기 입니다.
12294
JavaScript prompt 와 alert 응용 자바스크립트 예제 입니다.
12293
JavaScript prompt 와 alert 간단한 자바스크립트 예제 입니다.
12292
jQuery 간단한 탭 제이쿼리
12291
jQuery 간단한 셀렉트 드롭다운 제이쿼리
12290
JavaScript 문서내 이미지갯수 출력하기 입니다.
12289
JavaScript 내용 복사해서 붙어넣기 하면 출처 따라오는 자바스크립트입니다.
12288
JavaScript 팝업창 지정한 시간대에 예약 열기 입니다.
12287
JavaScript 접속때마다 음악 다르게 나오기 입니다.
12286
JavaScript 자동 스크롤 메뉴 관련 입니다.
12285
JavaScript 이 브라우저로 몇페이지나 보았나 확인하기 입니다.
12284
JavaScript 사용자 브라우저의 펄러그인 목록 출력하기 입니다.
12283
JavaScript 상태표시줄 제어 + 간단한 복사 제어 하기 입니다.
이전 다음
전체 목록