웹마스터 팁
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 소스를 그대로 가져오신거 같군요. 출처표시를 해 주셨으면 합니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
세계인구와 한국인구 구하기 애플릿 소스 [3] | TimeMode | 2003.05.19 |
동영상이 로딩될때까지 이미지 보여주기 [8] | ZipShin | 2003.05.19 |
더블클릭으로 웹문서 새로고침 하기 [3] | RedEye | 2003.05.09 |
HTML 암호화시킨것 풀어주는소스(암호화도가능) [11] | 호호짱 | 2003.05.06 |
label태그 아십니까? [6] | ZipShin | 2003.04.27 |
이미지 테두리에 점선 두르기 [6] | ZipShin | 2003.04.15 |
textarea 세로 글쓰기 [1] | ZipShin | 2003.04.15 |
textbox의 값을 오른쪽부터 채우기. [1] | RedEye | 2003.04.12 |
새창뜨는 링크 누를때 스크롤바 고정시키기 [8] | REAL | 2003.04.09 |
이미지 링크로 사용하다가 짤렸을때 대체 이미지 [6] | REAL | 2003.04.09 |
링크 클릭시 사운드 효과 [3] | REAL | 2003.04.09 |
[re] 링크 클릭시 사운드 효과 [헤헤~ 더 간단하게] [5] | RedEye | 2003.04.13 |
self.close 묻지 않고 닫기 [6] | REAL | 2003.04.09 |
테이블에 dot 효과를 주자~~~~~~~~~~~~~~~~~~~~ [5] | 조일현 | 2003.04.08 |
스스로 사라지는 웹페이지 만들기 [3] | 최재철 | 2003.04.08 |
HTML 기본 구성 ( HTML 왕초보만 보세혀.. ) [7] | kkaza™ | 2003.04.05 |
홈페이지의 위아래를 바꾸어 보자! [10] | 세죠위그이 | 2003.04.01 |
HTML의 정의 [8] | 이태운 | 2003.03.23 |
캐시 사용하지 않기 [5] | FriZeX*-_-* | 2003.03.17 |
[HTML 초보자] 열거목록에 대한 스타일정의 네번째 마지막 | ZipShin | 2003.03.17 |