Daum UIDev Guideline

CSS List

번호있는(ordered) 정보 : Rank List

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;}

맨위로