34-电影排行榜上（布局界面）

最新推荐文章于 2023-04-23 09:12:32 发布

杨亚仑

最新推荐文章于 2023-04-23 09:12:32 发布

阅读量882

点赞数 1

分类专栏： jQuery入门练习

本文链接：https://blog.csdn.net/yangyalun/article/details/83352258

版权

jQuery入门练习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>34-电影排行榜上（布局界面）</title>
</head>
<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: 1px dashed  #ccc;
    }
    ul>li{
        list-style:none;
        padding: 5px 10px;
        border: 1px dashed  #ccc;
    }
    ul>li:nth-child(-n+3) span{
        background: deeppink;
    }
    ul>li>span{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #ccc;
        text-align: center;
        line-height: 20px;
        margin-right: 10px;
    }
    .count{
        overflow: hidden;
        margin-top: 5px;
    }
    .count>img{
        width: 80px;
        height: 120px;
        float: left;
    }
    .count>p{
        width: 180px;
        height: 120px;
        float: right;
        font-size: 12px;
        line-height:20px ;
    }
</style>
<body>
<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li><span>1</span>电影名称
        <div class="count">
            <img src="images/zl.png">
            <p>《战狼Ⅱ》是吴京执导的动作军事电影，由吴京、弗兰克·格里罗、吴刚、张翰、卢靖姗、淳于珊珊、
                丁海峰等主演。该片于2017年7月27日在中国内地上映 。该片讲述了脱下军装的冷锋被卷入了一场非洲
                国家的叛乱，本来能够安全撤离的他无法忘记军人的职责，重回战场展开救援的故事。2017年12月，该片
                获得2017中国-东盟电影节最佳影片奖，在第二届澳门国际影展上获得亚洲人气电影大奖 。
            </p>
        </div>
        </li>
        <li><span>2</span>电影名称</li>
        <li><span>3</span>电影名称</li>
        <li><span>4</span>电影名称</li>
        <li><span>5</span>电影名称</li>
        <li><span>6</span>电影名称</li>

    </ul>
</div>
</body>
</html>

杨亚仑

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
34-电影排行榜上（布局界面）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;34-电影排行榜上（布局界面）&lt;/title&gt;&lt;/head&gt;&lt;style&gt; *
复制链接

扫一扫

专栏目录