건

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

· 2006-11-25 (토) 08:56:02 · 3727 · 5
이미지 없이 스타일쉬트로만 만들어 봅니다...

<!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개

이 좋은 것을.....

감사합니다....

제 홈에 언능 가져다가 해 볼렵니다...^^
저도 저 곳 게시판 보다 소스를 넣어서 봤는데 좋더라구요 얼른 업어가세요 ^^;
테스트해본결과.....넘좋군요...감사합니다...^^
너무 좋음. ^^ 고맙습니다.
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
06-11-28 조회 4,148
06-11-28 조회 6,435
06-11-27 조회 3,657
06-11-27 조회 4,570
06-11-27 조회 5,471
06-11-25 조회 3,728
06-11-24 조회 3,685
06-11-22 조회 5,361
06-11-21 조회 3,978
06-11-18 조회 4,200
06-11-15 조회 3,417
06-11-15 조회 3,445
06-11-11 조회 3,170
06-11-10 조회 4,561
06-11-04 조회 3,295
06-10-29 조회 3,948
06-10-29 조회 2,957
06-10-24 조회 6,479
06-10-17 조회 4,789
06-10-17 조회 5,519
06-10-16 조회 4,271
06-10-16 조회 3,696
06-10-15 조회 5,084
06-10-13 조회 3,815
06-10-13 조회 4,182
06-10-13 조회 4,137
06-10-12 조회 5,332
06-10-12 조회 4,305
06-10-12 조회 4,252
06-10-12 조회 4,813
06-10-10 조회 4,138
06-10-10 조회 3,381
06-10-10 조회 3,429
06-10-10 조회 3,363
06-10-09 조회 3,991
06-10-04 조회 3,741
06-10-02 조회 4,525
06-10-01 조회 4,440
06-09-29 조회 3,015
06-09-29 조회 3,929
06-09-27 조회 9,023
06-09-27 조회 3,671
06-09-26 조회 4,328
06-09-26 조회 4,035
06-09-26 조회 4,180
06-09-26 조회 3,354
06-09-26 조회 3,611
06-09-26 조회 5,328
06-09-26 조회 3,446
06-09-26 조회 5,440
06-09-26 조회 3,565
06-09-26 조회 3,261
06-09-26 조회 3,491
06-09-26 조회 3,053
06-09-26 조회 3,624
06-09-26 조회 3,405
06-09-26 조회 4,315
06-09-26 조회 3,007
06-09-26 조회 4,709
06-09-25 조회 3,923
06-09-25 조회 4,658
06-09-25 조회 4,610
06-09-25 조회 4,358
06-09-25 조회 6,618
06-09-23 조회 3,316
06-09-23 조회 3,408
06-09-23 조회 3,457
06-09-23 조회 4,537
06-09-22 조회 4,946
06-09-22 조회 4,887
06-09-22 조회 3,510
06-09-22 조회 3,663
06-09-22 조회 3,875
06-09-22 조회 4,296
06-09-22 조회 3,744
06-09-22 조회 3,878
06-09-22 조회 3,700
06-09-22 조회 3,487
06-09-22 조회 4,516
06-09-22 조회 4,533
06-09-22 조회 4,224
06-09-21 조회 6,028
06-09-21 조회 3,824
06-09-21 조회 4,547
06-09-21 조회 4,288
06-09-21 조회 3,210
06-09-21 조회 4,300
06-09-21 조회 2,957
06-09-21 조회 3,432
06-09-21 조회 3,509
06-09-21 조회 5,167
06-09-21 조회 4,300
06-09-21 조회 4,256
06-09-21 조회 3,697
06-09-21 조회 3,168
06-09-21 조회 2,694
06-09-21 조회 3,593
06-09-21 조회 3,434
06-09-21 조회 2,889
06-09-21 조회 2,919