웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
테이블에 dot 효과를 주자~~~~~~~~~~~~~~~~~~~~
2003.04.08 23:06
http://www.loveisfeel.net/test.htm아래 링크에서 확인 하실 수 있습니다.
http://www.loveisfeel.net/test.htm
이미지로 하는것 보단 상당히 요용합니다.
디자이너 로서, 다양한 디자인을 용이 하게 합니다.
쓸때 없는 테그의 당비를 줄일 수 있습니다.
table , tr, td 하다 못해 링크에도 적용할 수 있습니다.
<style type="text/css">
.love_line{ border-bottom: 1px dotted #B6B6B6; }
.love_line1{ border-bottom: 10px dotted #B6B6B6; }
.love_line3{ border-top: 10px dashed #E4E4E4; }
.love_line2{ border-top: 1px dashed #E4E4E4; }
.love_line4{ border-left: 8px dashed #E4E4E4; border-top: 8px dashed #E4E4E4; padding-top: 5px; }
.love_line2 a:hover {
border-bottom: 1px dashed red;
color: red;
text-decoration: none;
}
</style>
.love_line{ border-bottom: 1px dotted #B6B6B6; }
.love_line1{ border-bottom: 10px dotted #B6B6B6; }
.love_line3{ border-top: 10px dashed #E4E4E4; }
.love_line2{ border-top: 1px dashed #E4E4E4; }
.love_line4{ border-left: 8px dashed #E4E4E4; border-top: 8px dashed #E4E4E4; padding-top: 5px; }
.love_line2 a:hover {
border-bottom: 1px dashed red;
color: red;
text-decoration: none;
<table width="100%" border="0" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#FFFFFF" class="love_line"> love_line dotted 효과를 주었습니다.</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="love_line1"> love_line1 dotted 효과를
주었습니다.</td>
</tr>
<tr class="padding">
</tr>
<tr class="padding">
<td bgcolor="#FFFFFF" class="love_line2">love_line2 dashed 효과를
주었습니다.링크에 마우스를 대면!?</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="love_line3"> love_line3 dashed 효과를
주었습니다. </td>
</tr>
</table>
http://www.loveisfeel.net/test.htm
이미지로 하는것 보단 상당히 요용합니다.
디자이너 로서, 다양한 디자인을 용이 하게 합니다.
쓸때 없는 테그의 당비를 줄일 수 있습니다.
table , tr, td 하다 못해 링크에도 적용할 수 있습니다.
<style type="text/css">
.love_line{ border-bottom: 1px dotted #B6B6B6; }
.love_line1{ border-bottom: 10px dotted #B6B6B6; }
.love_line3{ border-top: 10px dashed #E4E4E4; }
.love_line2{ border-top: 1px dashed #E4E4E4; }
.love_line4{ border-left: 8px dashed #E4E4E4; border-top: 8px dashed #E4E4E4; padding-top: 5px; }
.love_line2 a:hover {
border-bottom: 1px dashed red;
color: red;
text-decoration: none;
}
</style>
.love_line{ border-bottom: 1px dotted #B6B6B6; }
.love_line1{ border-bottom: 10px dotted #B6B6B6; }
.love_line3{ border-top: 10px dashed #E4E4E4; }
.love_line2{ border-top: 1px dashed #E4E4E4; }
.love_line4{ border-left: 8px dashed #E4E4E4; border-top: 8px dashed #E4E4E4; padding-top: 5px; }
.love_line2 a:hover {
border-bottom: 1px dashed red;
color: red;
text-decoration: none;
<table width="100%" border="0" cellpadding="5" cellspacing="5">
<tr>
<td bgcolor="#FFFFFF" class="love_line"> love_line dotted 효과를 주었습니다.</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="love_line1"> love_line1 dotted 효과를
주었습니다.</td>
</tr>
<tr class="padding">
</tr>
<tr class="padding">
<td bgcolor="#FFFFFF" class="love_line2">love_line2 dashed 효과를
주었습니다.링크에 마우스를 대면!?</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="love_line3"> love_line3 dashed 효과를
주었습니다. </td>
</tr>
</table>
댓글 5
-
niistyle
2003.04.09 22:15
굿잡요~ ^^ -
고냉이 콱!
2003.04.13 11:50
아주 괜찮은 소스네요^^ -
피스♬
2003.05.09 12:44
오오- 미리보기도 있군요- 추천 누르고 갑니다^ ^ -
김용식
2003.06.29 03:59
.DottedBorder_bottom {border-bottom: 1px dotted #999999; }
.DottedBorder_top {border-top: 1px dotted #999999; }
.DottedBorder_left {border-left: 1px dotted #999999; }
.DottedBorder_right {border-right: 1px dotted #999999; }
<태그 ... class='DottedBorder_bottom + DottedBorder_left' >
혹시나 하고 이렇게 해보니 클래스 효과가 더해지네요.. 신기하여라 '-' -
∠ 이건몇도게? :)
2003.10.03 17:01
tag1004.net 소스를 그대로 가져오신거 같군요. 출처표시를 해 주셨으면 합니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
self.close 묻지 않고 닫기 [6] | REAL | 2003.04.09 |
테이블에 dot 효과를 주자~~~~~~~~~~~~~~~~~~~~ [5] | 조일현 | 2003.04.08 |
스스로 사라지는 웹페이지 만들기 [3] | 최재철 | 2003.04.08 |
노프레임홈페이지 디비기 4 - 쌍벽 [36] | 리디 | 2003.04.08 |
HTML 기본 구성 ( HTML 왕초보만 보세혀.. ) [7] | kkaza™ | 2003.04.05 |
홈페이지의 위아래를 바꾸어 보자! [10] | 세죠위그이 | 2003.04.01 |
노프레임홈페이지 디비기 3 - 경로 [42] | 리디 | 2003.03.31 |
쭘's식 홈페이지 만들기 No.2 - 예제 미리보기 포함 [14] | 쭘's | 2003.03.30 |
노프레임홈페이지 디비기 2 - 헤더와 풋터 [57] | 리디 | 2003.03.26 |
펼침 목록 메뉴 만들기! (나모) - 쭘's [8] | 쭘's | 2003.03.25 |
노프레임홈페이지 디비기 1 - 계층 [16] | 리디 | 2003.03.25 |
HTML의 정의 [8] | 이태운 | 2003.03.23 |
쭘's 식 쉽게 홈페이지 만들기 [15] | 쭘's | 2003.03.17 |
캐시 사용하지 않기 [5] | FriZeX*-_-* | 2003.03.17 |
[HTML 초보자] 열거목록에 대한 스타일정의 네번째 마지막 | ZipShin | 2003.03.17 |
[나모] CSS 만들기 III | 쭘's | 2003.03.12 |
[나모] CSS 만들기 II | 쭘's | 2003.03.12 |
[나모] CSS 만들기 I | 쭘's | 2003.03.12 |
[나모] 책갈피 만들기 [5] | 쭘's | 2003.03.12 |
[HTML 초보자] 열거목록에 대한 스타일정의 세번째 | ZipShin | 2003.03.12 |