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

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

느낌좋은날
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 18년 전 · 2492 · 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년 전
너무 좋음. ^^ 고맙습니다.

게시글 목록

번호 제목
12181
PHP 타도메인간 쿠키 공유하기 입니다
12180
PHP apache mod_rewrite 설치시 팁 입니다
12179
PHP 본문에 주민등록번호가 포함되면 경고 알려주기 입니다.
348
색상코드를 뽑아내는 프로그램입니다 유용합니다. 1
12178
PHP 입력내용중의 일부만 보여주고 x 표시 할때 입니다.
12177
PHP php환경 변수 출력 입니다.
12176
PHP PHP팁 (보안 등) 입니다.
12175
PHP 문자열 자르는 함수 입니다.
12174
PHP 게시판에서 컨텐츠중 이미지 사이즈를 조정 입니다.
12173
PHP 파일 업로드 시 html에서 용량 제어하기 입니다.
12161
정규표현식 파싱 예제입니다. 11
12160
웹서버 리눅스 특정 명령어 실행 권한 주기
12159
jQuery Simple Carousel (Sliding Banner)
12158
jQuery CSS3 - transition, transform을 이용한 element effect!
12157
PHP 비 전문가를 위한 XMLHttpRequest 활용 소개 입니다.
12156
PHP 디렉토리내의 모든 원소의 소유권, 그룹, 퍼미션 정보 가져와서 저장하기 입니다.
12155
PHP httpd.conf 파일 완벽 가이드 입니다.
12154
JavaScript 지난 시간 경과시간 페이스북 sns 처럼 보여주기 javascript 버전
12151
PHP [Instagram] 해시태그 검색 이미지 얻어오는 방법 2
12150
PHP php환경맞춤 부분 입니다.
12149
PHP 프레임 새로고침할 때 페이지 유지하기 입니다.
12148
PHP 접속자의 브라우져와 OS정보를 알려주는 함수 입니다.
12147
PHP 웹호스팅해서 사용시 fopen을 사용하지 못할 경우 해결법입니다.
12146
PHP zend 설치하기 (php.ini) 에서 안보일때 해결법 입니다.
12144
PHP 아파치 무단링크 막기 입니다. 1
이전 다음
전체 목록