Daum
Front End 개발가이드
기본 가이드
-
개발 정책
-
업무 프로세스
-
외주 가이드
-
이벤트 가이드
HTML 가이드
CSS 가이드
공통템플릿
-
레이아웃
-
기본table
-
기본list
-
로그인
-
미니다음
-
GNB
-
Paging
-
Copyright
-
DM(발송메일)
-
에러페이지
-
popup
-
서제스트
-
검색스페셜
-
검색창
CSS List
번호없는(unordered) 정보.
번호있는(ordered) 정보.
정의(definition).
번호있는(ordered) 정보 : Rank List
Markup
CSS
PreView
Markup source
<div class="rankListArea_basic"> <h3><a href="#" title="랭크 리스트 제목">랭크 리스트 제목</a></h3> <ol> <li class="num1"><a href="#">쿤타 앤 뉴올리언 ..</a></li> <li class="num2"><a href="#">상욱선수(엠게임)</a></li> <li class="num3"><a href="#">김정훈 궁을 위..</a></li> <li class="num4"><a href="#">통기타 동영좌CD- 차차..</a></li> <li class="num5"><a href="#">녹음실에서 빠른MR..</a></li> <li class="num6"><a href="#">예쁜 다솔이의 탄생</a></li> <li class="num7"><a href="#">사랑합니다..영윈히...</a></li> <li class="num8"><a href="#">(광주)젠틀맨비뇨기과</a></li> <li class="num9"><a href="#"><작심삼일></a></li> <li class="num10"><a href="#">태극체육관(익산)</a></li> </ol> <a href="#" title="랭크 리스트 더보기" class="more">랭크 리스트 더보기</a> </div> <div class="rankListArea_diff"> <h3><a href="#" title="Diff 랭크 리스트 제목">Diff 랭크 리스트 제목</a></h3> <ol> <li class="keep"> <font><em>=</em> 0 </font> <a href="#" class="num1">프리</a> <span class="hotall"><em> 전체 동영상수: </em>2,151 개</span> </li> <li class="up"> <font><em>+</em> 3 </font> <a href="#" class="num2">동해팔팔산악회</a> <span class="hotall"><em> 전체 동영상수: </em>53 개</span> </li> <li class="down"> <font><em>-</em> 1 </font> <a href="#" class="num3">하루 행복</a> <span class="hotall"><em> 전체 동영상수: </em>157 개</span> </li> <li class="down"> <font><em>-</em> 1 </font> <a href="#" class="num4">재승사랑방(载承爱之家 </a> <span class="hotwow"><em> 와우수: </em>428</span> </li> <li class="up"> <font><em>+</em>35</font> <a href="#" class="num5">개똥벌레</a> <span class="hotwow"><em> 와우수: </em> 50</span> </li> <li class="down"> <font><em>-</em> 1 </font> <a href="#" class="num6">개똥벌레</a> <span class="hotwow"><em> 와우수: </em>542</span> </li> </ol> <a href="#" title="Diff 랭크 리스트 더보기" class="more">Diff 랭크 리스트 더보기</a> </div>
CSS source
@import "base.css"; #wrap {float:left;width:250px;background-color:#eee;text-align:left;} .more {position:absolute;top:13px;right:8px;background:url(http://image.hanmail.net/hanmail/s_img/keron/i_more.gif) no-repeat;width:25px;height:8px;display:block;text-indent:-100em;overflow:hidden;padding:0;font-size:1px;line-height:0%;text-decoration:none;} /* ordered List */ .num1 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_01.gif) no-repeat;} .num2 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_02.gif) no-repeat;} .num3 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_03.gif) no-repeat;} .num4 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_04.gif) no-repeat;} .num5 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_05.gif) no-repeat;} .num6 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_06.gif) no-repeat;} .num7 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_07.gif) no-repeat;} .num8 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_08.gif) no-repeat;} .num9 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_09.gif) no-repeat;} .num10 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_10.gif) no-repeat;} .num11 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_11.gif) no-repeat;} .num12 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_12.gif) no-repeat;} .num13 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_13.gif) no-repeat;} .num14 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_14.gif) no-repeat;} .num15 {background:url(http://image.hanmail.net/hanmail/s_img/keron/n_15.gif) no-repeat;} .up {background:url(http://image.hanmail.net/hanmail/s_img/keron/i_up.gif) no-repeat;} .down {background:url(http://image.hanmail.net/hanmail/s_img/keron/i_down.gif) no-repeat;} .up font {color:#ff5f00;} .down font {color:#777;} .keep font,.keep {color:#fff;} .rankListArea_basic {position:relative;} .rankListArea_basic h3 {padding:0;margin:0;height:30px;} .rankListArea_basic h3 a {position:relative;top:9px;left:0px;display:block;padding:1px 0 0 10px;font-size:13px;color:#000;letter-spacing:-1px;} .rankListArea_basic ol {background-color:#fff;margin:0 5px;padding:7px 0;} .rankListArea_basic ol li {padding:3px 0 3px 24px;background-position:7px 3px;} .rankListArea_basic ol li a {color:#333;} .rankListArea_diff {position:relative;background-color:#fff;margin-top:5px;} .rankListArea_diff h3 {padding:0;margin:0;height:30px;border-bottom:1px solid #eee;} .rankListArea_diff h3 a {position:relative;top:9px;left:0px;display:block;padding:1px 0 0 10px;font-size:13px;color:#000;letter-spacing:-1px;} .rankListArea_diff ol {padding:7px 0;margin:0 5px;} .rankListArea_diff li {clear:left;padding:0 0 0 10px;height:20px;background-position:1px 3px;} .rankListArea_diff li font {float:left;display:block;width:18px;font-size:9px;font-family:verdana;letter-spacing:-1px;} .rankListArea_diff li a {float:left;display:block;padding-left:16px;color:#333;} .rankListArea_diff li .hotall {float:right;font-size:11px;color:#666;} .rankListArea_diff li .hotwow {float:right;padding:2px 0 1px 19px;background:url(http://image.hanmail.net/hanmail/s_img/keron/i_best.gif) -1px top no-repeat;font-size:11px;color:#ff5f00;} .rankListArea_diff em {display:none;}
맨위로
Copyright (c)
Daum Front End Technology Center.
All rights reserved.