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

느낌좋은날

· 18년 전 · 조회 2495 2495 · 댓글 5 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개

천상재회

번호	제목	글쓴이	날짜	조회
5752	구글 맞춤검색 설정 방법, google custom search #개발자 #javascript	위토즈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	463
5751	php in_array 사용법 배열값 확인하기 [1] #개발자 #php	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	498
5750	ob_start callback에 대한 설명 #개발자 #php	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	313
5749	call_user_func 함수 재정의 #개발자 #php	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	375
5748	1000만건 게시판에 도전합니다. 두번째 [7] #개발자 #mysql	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	778
5747	ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. [1] #퍼블리셔 #기타	바른통남 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	557
5746	Join 을 이용한 delete #개발자 #mysql	브이룩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	279
5745	정규식 (Regular Expression Functions) 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	314
5744	Apache 설치후 httpd.conf 설정 #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	321
5743	미리 정의된 변수들 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	264
5742	array_rand 관련 입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	249
5741	1000만건 게시판에 도전합니다. 첫번째 [3] #개발자 #mysql	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	612
5740	select 해서 바로 insert하기 #개발자 #mysql	브이룩 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	292
5739	필드 내용에서 특정문자열을 기준으로 문자열 자르기 #개발자 #mysql	띠아블 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	292
5738	초간단 모바일인식 리다이렉트 스크립트 소스 [1] #디자이너	프로그램은어려워 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	907
5737	PHP최근메뉴얼(도움말)파일입니다 [2] #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	474
5736	시스템 정보를 알아볼 수 있는 방법입니다. #개발자 #php	혀니천사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	375
5735	number_format 시 빈값 예외처리 [1] #개발자 #php	김득신 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	384
5734	motiongrapic google play store logo intro 모션그래픽 구글 플레이스토어 인트로 #디자이너	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	586
5733	motiongrapic text underline 모션그래픽소스 텍스트에 밑줄긋기 #디자이너	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	528
5732	포토샵 photoshop 설정 - preferences #디자이너	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	934
5731	Could not reliably determine the server's fully qualified domain name #개발자 #웹서버	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	288
5730	텔레그램 푸쉬 봇 [10] #개발자 #php	foxrain 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	1268
5729	짧은 주소 만들기, htaccess RewriteRule 리다이렉션 #개발자 #os	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	527
5728	파일분할 분할압축 해제 #개발자 #os	잘살아보자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	10년 전	339

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

링크

댓글 작성

댓글 5개

게시판 목록

팁게시판

구글 맞춤검색 설정 방법, google custom search

php in_array 사용법 배열값 확인하기 [1]

ob_start callback에 대한 설명

call_user_func 함수 재정의

1000만건 게시판에 도전합니다. 두번째 [7]

ie 와 크롬 폰트 부분해결할 수 있는건지좀 알려주시면 감사드립니다. [1]

Join 을 이용한 delete

정규식 (Regular Expression Functions) 입니다.

Apache 설치후 httpd.conf 설정

미리 정의된 변수들 입니다.

array_rand 관련 입니다.

1000만건 게시판에 도전합니다. 첫번째 [3]

select 해서 바로 insert하기

필드 내용에서 특정문자열을 기준으로 문자열 자르기

초간단 모바일인식 리다이렉트 스크립트 소스 [1]

PHP최근메뉴얼(도움말)파일입니다 [2]

시스템 정보를 알아볼 수 있는 방법입니다.

number_format 시 빈값 예외처리 [1]

motiongrapic google play store logo intro 모션그래픽 구글 플레이스토어 인트로

motiongrapic text underline 모션그래픽소스 텍스트에 밑줄긋기

포토샵 photoshop 설정 - preferences

Could not reliably determine the server's fully qualified domain name

텔레그램 푸쉬 봇 [10]

짧은 주소 만들기, htaccess RewriteRule 리다이렉션

파일분할 분할압축 해제