<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>电影排行榜-乔越博客</title> <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<style> *{ margin: 0; padding: 0; } .box{ width: 300px; height: 450px; margin: 50px auto; border: 1px solid #000; } .box>h1{ font-size: 20px; line-height: 35px; color: deeppink; padding-left: 10px; border-bottom: 1px dashed #ccc ; } ul>li{ list-style: none; padding: 5px 10px; border-bottom: 1px dashed #ccc ;
} ul>li:nth-child(-n+3) span{ background: deeppink; } ul>li>span{ display: inline-block; width: 20px; height: 20px; margin-right: 10px; background: #ccc; text-align: center; line-height: 20px;
} .content{ overflow: hidden; display: none; } .content>img{ width: 80px; height: 120px; float: left; margin-top:5px ; } .content>p{ width: 180px; height: 120px; float: right; font-size: 15px; } .curren .content{ display: block; } </style> <script> $(function(){ $("li").hover(function(){ $(this).addClass("curren"); },function(){ $(this).removeClass("curren"); }) })
</script> </head> <body> <div class="box"> <h1>电影排行榜-乔越博客</h1> <ul> <li><span>1</span>电影名称 <div class="content"> <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""> <p>兰斯与沃尔特,前者是超级炫酷又迷人的间谍,后者负责发明兰斯使用的各种炫酷小道具。危难当头,他们必须团结一致才能拯救世界。</p> </div> </li> <li><span>2</span>电影名称 <div class="content"> <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""> <p>兰斯与沃尔特,前者是超级炫酷又迷人的间谍,后者负责发明兰斯使用的各种炫酷小道具。危难当头,他们必须团结一致才能拯救世界。</p> </div></li> <li><span>3</span>电影名称 <div class="content"> <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""> <p>兰斯与沃尔特,前者是超级炫酷又迷人的间谍,后者负责发明兰斯使用的各种炫酷小道具。危难当头,他们必须团结一致才能拯救世界。</p> </div></li> <li><span>4</span>电影名称 <div class="content"> <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""> <p>兰斯与沃尔特,前者是超级炫酷又迷人的间谍,后者负责发明兰斯使用的各种炫酷小道具。危难当头,他们必须团结一致才能拯救世界。</p> </div></li> <li><span>5</span>电影名称 <div class="content"> <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""> <p>兰斯与沃尔特,前者是超级炫酷又迷人的间谍,后者负责发明兰斯使用的各种炫酷小道具。危难当头,他们必须团结一致才能拯救世界。</p> </div></li> <li><span>6</span>电影名称 <div class="content"> <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""> <p>兰斯与沃尔特,前者是超级炫酷又迷人的间谍,后者负责发明兰斯使用的各种炫酷小道具。危难当头,他们必须团结一致才能拯救世界。</p> </div></li> <li><span>7</span>电影名称 <div class="content"> <img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577340942.jpg" alt=""> <p>兰斯与沃尔特,前者是超级炫酷又迷人的间谍,后者负责发明兰斯使用的各种炫酷小道具。危难当头,他们必须团结一致才能拯救世界。</p> </div></li> </ul> </div> </body> </html>
|