master

分支 (1)

管理

管理

master

my-hua
/
旅梦4-2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./旅梦4-2.css">
    <title>index</title>
</head>
<body>
    <div class="movie">
        <header>
            电影
        </header>
        <div class="movie-info">
            <div class="movie-info-img">
                <img src="https://p0.ssl.img.360kuai.com/t0114be9083dd8d5a94.jpg" width="100">
                <img class="播放" src="./img/24gf-playCircle.png">
            </div>
            <div class="movie-info-desc">
                <h1>侏罗纪世界3</h1>
                <p class="en-name">Jurassic&nbsp;World:Dominion</p>
                <div class="type-time">
                    <div class="type">
                        <span>动作</span>
                        <span>冒险</span>
                        <span>科幻</span>
                        <em>IMAX 3D</em>
                        <em>IMAX 2D</em>
                    </div>
                    <p class="time">
                        2022.06.10中国大陆上映 147分钟
                    </p>
                </div>
                <div class="watch">
                    <div class="want">
                        <img src="./img/aixin.png" a>
                        <span>想看</span>
                    </div>
                    <div class="done">
                        <img src="./img/xingxing.png">
                        <span>看过</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="movie-rate">
            <div class="movie-rate-wrap">
                <div class="rate-top">
                    <div class="title">
                        <img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/logo-new.png">
                        <span>猫眼购票评分</span>
                    </div>
                    <div class="nums">
                        1516156想看 1116165看过<i class="right-arrow"></i>
                    </div>
                </div>
                <div class="rate-bottom">
                    <div class="rate-slider">
                        <div class="score">
                            <div class="num">
                                8.0
                            </div>
                            <div class="people">
                                3,4567人评
                            </div>
                        </div>
                        <div class="slider">
                            <div class="stars-percent-bar">
                                <div class="stars"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"></div>
                                <div class="bar">
                                    <div class="percent" style="width: 45%;"></div>
                                </div>
                            </div>
                            <div class="stars-percent-bar">
                                <div class="stars"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ></div>
                                <div class="bar">
                                    <div class="percent" style="width:35%;"></div>
                                </div></div>

                            <div class="stars-percent-bar">
                                <div class="stars"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ></div>
                                <div class="bar">
                                    <div class="percent" style="width: 25%;"></div>
                                </div>
                            </div>
                            <div class="stars-percent-bar">
                                <div class="stars"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ></div>
                                <div class="bar">
                                    <div class="percent" style="width: 15%;"></div>
                                </div>
                            </div>
                            <div class="stars-percent-bar">
                                <div class="stars"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/white-star.png"><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ><img src="https://s0.meituan.net/bs/myfe/canary/file/asgard/images/movie/grey-star.png" ></div>
                                <div class="bar">
                                    <div class="percent" style="width: 5%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rate-list">
                        <div class="rate-list-left">
                            <p class="paiming">TOP</p>
                            <p class="diyi">1</p>
                        </div>
                        <div class="rate-list-right">
                            <p class="rate-list-right-top">2022年24周</p>
                            <p class="rate-list-right-bottom">中国大陆票房榜</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>