html如下：
<section id="play">
<h1>全网热播视频</h1>
<ul>
<li><img src="images/flv01.jpg">
<p>昊花梦</p><span>1</span>
</li>
<li><img src="images/flv02.jpg">
<p>好先生</p><span>2</span>
</li>
<li>
<ol>
<li><span>3</span>三八线<p>加入看单</p>
</li>
<li><span>4</span>吉详天宝<p>加入看单</p>
</li>
<li><span>5</span>亲爱的翻译官<p>加入看单</p>
</li>
<li><span>6</span>仙剑云之凡<p>加入看单</p>
</li>
<li><span>7</span>权力的游戏第五季<p>加入看单</p>
</li>
<li><span>8</span>琅琊榜<p>加入看单</p>
</li>
<li><span>9</span>那年青春我们正好<p>加入看单</p>
</li>
<li><span>10</span>乡村受情8（上）<p>加入看单</p>
</li>
</ol>
</li>
</ul>
</section>
css如下：
*{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
ul,ol,li{list-style: none;}
#play{margin: 0 auto; width:680px; overflow: hidden;}
#play h1{line-height: 40px; font-size: 22px;}
#play ul>li{
float: left;
width: 220px;
height: 308px;
overflow: hidden;
position: relative;
}
#play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
#play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
#play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
#play ol{padding-top: 13px; padding-right: 5px;}
#play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
#play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}
jq如下
<script>
$('ol').css({ 'margin-left': '10px' })
$('ol').css({ 'background': '#f0f0f0' })
$('ol li span:lt(3)').css({ 'background': '#f0a30f' })
$('ol li span:gt(2)').css({ 'background': '#a4a3a3' })
$('ol li:lt(4)').css({ background: 'url(./images/orange.jpg) no-repeat right -4px' })
$('ol li:gt(3)').css({ background: 'url(./images/green.jpg) no-repeat right -4px' })
$('ol li:eq(1)').css({ background: 'url(./images/green.jpg) no-repeat right -4px ' })
$('ol li').mouseover(function () {
$(this).find('p').css('display', 'block')
})
$('ol li').mouseout(function () {
$(this).find('p').css('display', 'none')
})
</script>
