글
Html 이미지 없는 라운드 테이블 만들기
<html>
<head>
<title>title</title>
</head>
<style type="text/css">
.rtop, .rbottom { display : block; }
.rtop *, .rbottom * {
display : block;
height : 1px;
overflow : hidden;
background : #ccc;
}
.r1{ margin : 0 5px; } .r3{ margin : 0 2px; }
.r2{ margin : 0 3px; } .r4{ margin : 0 1px; height : 2px; }
.box { background : #ccc; padding : 5px 10px; font-size : 12px; }
</style>
<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"> 이미지 X 라운딩 표현 </div>
<b class="rbottom">
<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
</b>
</div>
</body>
</html>
// 라운드 테이블 선
.rtop, .rbottom{ display ; block; }
.rtop *, .rbottom * { display : block; height : 1px; overflow : hidden; }
.r1 { margin : 0 5px; background : #ccc; }
.r2 { margin : 0 3px; border-left : 2px solid #ccc; border-right : 2px solid #ccc; }
.r3 { margin : 0 2px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; }
.r4 { margin : 0 1px; height : 2px; border-left : 1px solid #ccc; border-right : 1px solid #ccc; }
.box { margin : 0; padding : 5px 10px; border-left : #ccc solid 1px; border-right : #ccc solid 1px; font-size : 12px; }
'H > Html' 카테고리의 다른 글
| parent.location 해당 a name 으로 이동 (0) | 2014.03.19 |
|---|---|
| meta 태그, base 태그, map 태그, fieldset 태그 (0) | 2014.03.18 |
| Tab키 이동순서 정하기 (0) | 2014.03.18 |
| URL 최대길이 (0) | 2012.03.22 |
| css로 수직 가운데정렬 4가지 방법 (0) | 2012.03.11 |
