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

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

느낌좋은날
프로필 보기이 회원 글보기
 · 18년 전 · 2491 · 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년 전
감사합니다.

게시글 목록

번호 제목
12245
PHP php 함수검색기 입니다.
12244
PHP php로 동영상파일 영상정보 가져오기 입니다.
12243
PHP fwrite() 함수 관련 입니다.
12241
PHP php 로 ssh2 원격접속 명령실행하기 입니다. 1
12239
PHP 모바일로 접속하는지 웹으로 접속하는지 체크하기 입니다. 1
12238
PHP 모바일 OS에서 자바스크립트 select() 구현하기 입니다.
12237
Mobile 모바일웹에서 현재위치의 좌표 가져오기
12233
JavaScript alert 창 디자인하기 3
12232
JavaScript 자동완성 자바스크립트
12230
PHP 주소로 구글 좌표 구하기 1
355
고급스러운 그라데이션 4
12227
PHP php에서 ssh2로 서버간 파일 복사하기 입니다. 2
12226
PHP euc-kr페이지에서 AJAX연동시 한글 깨짐 현상 해결법 입니다.
12225
PHP js와 php를 배열로 연결하기 입니다.
353
국내 폰트저작권 총정리. 1
12221
PHP vi 정리 입니다. 3
12220
PHP 디비에서 특정문자를 변경 하는 방법 입니다.
12219
PHP 다른 url 의 읽어서 값만 변수에 저장
12218
PHP 검색사이트 긁어오기 입니다.
12217
PHP bresenham 알고리즘을 이용한 직선, 원, 타원 그리기 입니다.
12216
PHP 숫자 입력 유효성 체크 하기 입니다.
12215
PHP get 변수에서 원하는 값만 바꾸기 입니다.
12214
PHP php 기본 실행 시간이 초과 됐을때 에러 해결법 입니다.
12213
PHP $PHP_SELF 가 안될때 해결법 입니다.
12212
PHP phpMyAdmin 하나로 서버내 전체사용자가 사용하기 입니다.
이전 다음
전체 목록