无尽的控件-列表排名(行号)样式

排行样式 就是前3名 是一个样式 其他 是一个样式 先看效果图

就是这个样子啦 看代码吧

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>列表排名</title>
    <style type="text/css">
    *{font-size:12px;list-style:none}
    ul{padding:0 0;margin-left:10px;margin-top:0px}
    li{float:left;width:170px;padding:0 0;margin:0 0;line-height:23px} 
    .em      {width:16px;height:15px;background:url('Images/split_v3.1.png') no-repeat -207px -127px;float:left;text-align:center;line-height:15px;font-family:Arial;color:#fff;font-size:10px;margin-right:9px;_display:inline;margin-top:2px}
    .emTop3 {width:16px;height:15px;background:url('Images/split_v3.1.png') no-repeat -207px -100px;float:left;text-align:center;line-height:15px;font-family:Arial;color:#fff;font-size:10px;margin-right:9px;_display:inline;margin-top:2px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
     
     <fieldset style="width:180px">
        <legend>
            <fieldset>考试排行榜</fieldset>
        </legend>
         <ul>
         <asp:Repeater runat="server" ID="p1">
             <ItemTemplate>
                <li><span class='<%#Container.ItemIndex<3?"emTop3":"em" %>'><%#Container.ItemIndex+1 %></span> <%#Eval("name")%></li>
             </ItemTemplate>
         </asp:Repeater>
          </ul>
     </fieldset>
    </form>
</body>
</html>

样式 图片都在里面啦  后台就是一个绑定

 

点击下载

posted @ 2012-04-27 19:11  by_封爱  阅读(711)  评论(0)    收藏  举报