<!DOCTYPE html>
<html>
<head lang="en">
? ? <meta charset="UTF-8">
? ? <title>全網(wǎng)熱播視頻</title>
? ? <link rel="stylesheet" href="css/play.css">
? ? <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
? ? <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<section id="play">
? ? <h1>全網(wǎng)熱播視頻</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>權(quán)力的游戲第五季<p>加入看單</p></li>
? ? ? ? ? ? ? ? <li><span>8</span>瑯琊榜<p>加入看單</p></li>
? ? ? ? ? ? ? ? <li><span>9</span>那年青春我們正好<p>加入看單</p></li>
? ? ? ? ? ? ? ? <li><span>10</span>鄉(xiāng)村受情8（上）<p>加入看單</p></li>
? ? ? ? ? ? </ol>
? ? ? ? </li>
? ? </ul>
</section>
</body>
</html>
*{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;}
jQuery
// JavaScript Document
$(document).ready(function() {
? ? $("#play ul>li:not(li:last)").css({
"padding-right":"10px"
});
$("#play ul>li:last").css({
"background-color":"#f0f0f0"
});
$("#play ul>li>span").css({
"background-color":"#f0a30f"
});
$("#play ol>li>span:not(:first)").css({
"background-color":"#a4a3a3"
});
$("#play ol>li>span:first").css({
"background-color":"#f0a30f"
});
$("#play ol>li:lt(5)").css({
"background-image":"url(images/orange.jpg)",
"background-repeat":"no-repeat",
"background-position":"right -4px"
});
$("#play ol>li:eq(1)").css({
"background-image":"url(images/green.jpg)",
"background-repeat":"no-repeat",
"background-position":"right -4px"
});
$("#play ol>li:gt(4)").css({
"background-image":"url(images/green.jpg)",
"background-repeat":"no-repeat",
"background-position":"right -4px"
});
? ? $("#play ol>li").mouseover(function(){
$(this).children("p").show();
});
$("#play ol>li").mouseout(function(){
$(this).children("p").hide();
});
});
