movie.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>正在热映--猫眼电影</title>
    9.     <link rel="stylesheet" href="css/reset.css">
    10.     <link rel="stylesheet" href="css/movie.css">
    11.     <link rel="stylesheet" href="css/common.css">
    12. </head>
    14. <body>
    15.     <div class="main">
    16.         <!-- 菜单 -->
    17.         <nav class="nav">
    18.             <a href="" class="select">正在热映</a>
    19.             <a href="">即将上映</a>
    20.             <a href="">经典影片</a>
    21.         </nav>
    23.         <div class="container">
    24.             <div class="choose-area">
    25.                 <div class="choose-item clearfix">
    26.                     <div class="left">类型:</div>
    27.                     <div class="right">
    28.                         <ul class="clearfix">
    29.                             <li class="select"><a href="">全部</a></li>
    30.                             <li><a href="">Consequuntur.</a></li>
    31.                             <li><a href="">Aperiam!</a></li>
    32.                             <li><a href="">Non?</a></li>
    33.                             <li><a href="">Officia.</a></li>
    34.                             <li><a href="">Ut.</a></li>
    35.                             <li><a href="">Reiciendis?</a></li>
    36.                             <li><a href="">Velit?</a></li>
    37.                             <li><a href="">Asperiores.</a></li>
    38.                             <li><a href="">Velit?</a></li>
    39.                             <li><a href="">Laudantium.</a></li>
    40.                             <li><a href="">Incidunt!</a></li>
    41.                             <li><a href="">Impedit?</a></li>
    42.                             <li><a href="">Ipsam?</a></li>
    43.                             <li><a href="">Suscipit!</a></li>
    44.                             <li><a href="">Perspiciatis!</a></li>
    45.                             <li><a href="">Doloribus.</a></li>
    46.                             <li><a href="">Molestiae!</a></li>
    47.                             <li><a href="">Eos.</a></li>
    48.                             <li><a href="">Perferendis?</a></li>
    49.                         </ul>
    50.                     </div>
    51.                 </div>
    52.                 <div class="choose-item clearfix">
    53.                     <div class="left">区域:</div>
    54.                     <div class="right">
    55.                         <ul class="clearfix">
    56.                             <li><a href="">全部</a></li>
    57.                             <li><a href="">Consequuntur.</a></li>
    58.                             <li><a href="">Aperiam!</a></li>
    59.                             <li><a href="">Non?</a></li>
    60.                             <li><a href="">Officia.</a></li>
    61.                             <li><a href="">Ut.</a></li>
    62.                             <li><a href="">Reiciendis?</a></li>
    63.                             <li><a href="">Velit?</a></li>
    64.                             <li><a href="">Asperiores.</a></li>
    65.                             <li><a href="">Velit?</a></li>
    66.                             <li><a href="">Laudantium.</a></li>
    67.                             <li><a href="">Incidunt!</a></li>
    68.                             <li><a href="">Impedit?</a></li>
    69.                             <li><a href="">Ipsam?</a></li>
    70.                             <li><a href="">Suscipit!</a></li>
    71.                             <li><a href="">Perspiciatis!</a></li>
    72.                             <li><a href="">Doloribus.</a></li>
    73.                             <li><a href="">Molestiae!</a></li>
    74.                             <li><a href="">Eos.</a></li>
    75.                             <li><a href="">Perferendis?</a></li>
    76.                         </ul>
    77.                     </div>
    78.                 </div>
    79.                 <div class="choose-item clearfix no-line">
    80.                     <div class="left">年代:</div>
    81.                     <div class="right">
    82.                         <ul class="clearfix">
    83.                             <li><a href="">全部</a></li>
    84.                             <li><a href="">Consequuntur.</a></li>
    85.                             <li><a href="">Aperiam!</a></li>
    86.                             <li><a href="">Non?</a></li>
    87.                             <li><a href="">Officia.</a></li>
    88.                             <li><a href="">Ut.</a></li>
    89.                             <li><a href="">Reiciendis?</a></li>
    90.                             <li><a href="">Velit?</a></li>
    91.                             <li><a href="">Asperiores.</a></li>
    92.                             <li><a href="">Velit?</a></li>
    93.                             <li><a href="">Laudantium.</a></li>
    94.                             <li><a href="">Incidunt!</a></li>
    95.                             <li><a href="">Impedit?</a></li>
    96.                             <li><a href="">Ipsam?</a></li>
    97.                             <li><a href="">Suscipit!</a></li>
    98.                             <li><a href="">Perspiciatis!</a></li>
    99.                             <li><a href="">Doloribus.</a></li>
    100.                             <li><a href="">Molestiae!</a></li>
    101.                             <li><a href="">Eos.</a></li>
    102.                             <li><a href="">Perferendis?</a></li>
    103.                         </ul>
    104.                     </div>
    105.                 </div>
    106.             </div>
    108.             <div class="movies clearfix">
    109.                 <div class="movie-item">
    110.                     <div class="poster">
    111.                         <a href="">
    112.                             <img src="./img/2.jpg" alt="" class="img1">
    113.                         </a>
    114.                     </div>
    115.                     <div class="name">
    116.                         <a href="">
    117.                             你的婚礼
    118.                         </a>
    119.                     </div>
    120.                     <div class="score">
    121.                         9.2
    122.                     </div>
    123.                 </div>
    124.                 <div class="movie-item">
    125.                     <div class="poster">
    126.                         <a href="">
    127.                             <img src="./img/2.jpg" alt="" class="img1" class="img1">
    128.                         </a>
    129.                     </div>
    130.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    131.                     <div class="score">9.4</div>
    132.                 </div>
    133.                 <div class="movie-item">
    134.                     <div class="poster">
    135.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    136.                     </div>
    137.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    138.                     <div class="score">9.4</div>
    139.                 </div>
    140.                 <div class="movie-item">
    141.                     <div class="poster">
    142.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    143.                     </div>
    144.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    145.                     <div class="score">9.4</div>
    146.                 </div>
    147.                 <div class="movie-item">
    148.                     <div class="poster">
    149.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    150.                     </div>
    151.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    152.                     <div class="score">9.4</div>
    153.                 </div>
    154.                 <div class="movie-item">
    155.                     <div class="poster">
    156.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    157.                     </div>
    158.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    159.                     <div class="score">9.4</div>
    160.                 </div>
    161.                 <div class="movie-item">
    162.                     <div class="poster">
    163.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    164.                     </div>
    165.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    166.                     <div class="score">9.4</div>
    167.                 </div>
    168.                 <div class="movie-item">
    169.                     <div class="poster">
    170.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    171.                     </div>
    172.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    173.                     <div class="score">9.4</div>
    174.                 </div>
    175.                 <div class="movie-item">
    176.                     <div class="poster">
    177.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    178.                     </div>
    179.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    180.                     <div class="score">9.4</div>
    181.                 </div>
    182.                 <div class="movie-item">
    183.                     <div class="poster">
    184.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    185.                     </div>
    186.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    187.                     <div class="score">9.4</div>
    188.                 </div>
    189.                 <div class="movie-item">
    190.                     <div class="poster">
    191.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    192.                     </div>
    193.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    194.                     <div class="score">9.4</div>
    195.                 </div>
    196.                 <div class="movie-item">
    197.                     <div class="poster">
    198.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    199.                     </div>
    200.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    201.                     <div class="score">9.4</div>
    202.                 </div>
    203.                 <div class="movie-item">
    204.                     <div class="poster">
    205.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    206.                     </div>
    207.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    208.                     <div class="score">9.4</div>
    209.                 </div>
    210.                 <div class="movie-item">
    211.                     <div class="poster">
    212.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    213.                     </div>
    214.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    215.                     <div class="score">9.4</div>
    216.                 </div>
    217.                 <div class="movie-item">
    218.                     <div class="poster">
    219.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    220.                     </div>
    221.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    222.                     <div class="score">9.4</div>
    223.                 </div>
    224.                 <div class="movie-item">
    225.                     <div class="poster">
    226.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    227.                     </div>
    228.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    229.                     <div class="score">9.4</div>
    230.                 </div>
    231.                 <div class="movie-item">
    232.                     <div class="poster">
    233.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    234.                     </div>
    235.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    236.                     <div class="score">9.4</div>
    237.                 </div>
    238.                 <div class="movie-item">
    239.                     <div class="poster">
    240.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    241.                     </div>
    242.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    243.                     <div class="score">9.4</div>
    244.                 </div>
    245.                 <div class="movie-item">
    246.                     <div class="poster">
    247.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    248.                     </div>
    249.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    250.                     <div class="score">9.4</div>
    251.                 </div>
    252.                 <div class="movie-item">
    253.                     <div class="poster">
    254.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    255.                     </div>
    256.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    257.                     <div class="score">9.4</div>
    258.                 </div>
    259.                 <div class="movie-item">
    260.                     <div class="poster">
    261.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    262.                     </div>
    263.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    264.                     <div class="score">9.4</div>
    265.                 </div>
    266.                 <div class="movie-item">
    267.                     <div class="poster">
    268.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    269.                     </div>
    270.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    271.                     <div class="score">9.4</div>
    272.                 </div>
    273.                 <div class="movie-item">
    274.                     <div class="poster">
    275.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    276.                     </div>
    277.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    278.                     <div class="score">9.4</div>
    279.                 </div>
    280.                 <div class="movie-item">
    281.                     <div class="poster">
    282.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    283.                     </div>
    284.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    285.                     <div class="score">9.4</div>
    286.                 </div>
    287.                 <div class="movie-item">
    288.                     <div class="poster">
    289.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    290.                     </div>
    291.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    292.                     <div class="score">9.4</div>
    293.                 </div>
    294.                 <div class="movie-item">
    295.                     <div class="poster">
    296.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    297.                     </div>
    298.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    299.                     <div class="score">9.4</div>
    300.                 </div>
    301.                 <div class="movie-item">
    302.                     <div class="poster">
    303.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    304.                     </div>
    305.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    306.                     <div class="score">9.4</div>
    307.                 </div>
    308.                 <div class="movie-item">
    309.                     <div class="poster">
    310.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    311.                     </div>
    312.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    313.                     <div class="score">9.4</div>
    314.                 </div>
    315.                 <div class="movie-item">
    316.                     <div class="poster">
    317.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    318.                     </div>
    319.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    320.                     <div class="score">9.4</div>
    321.                 </div>
    322.                 <div class="movie-item">
    323.                     <div class="poster">
    324.                         <a href=""><img src="./img/2.jpg" alt="" class="img1"></a>
    325.                     </div>
    326.                     <div class="name"><a href="">复仇者联盟4:终局之战</a></div>
    327.                     <div class="score">9.4</div>
    328.                 </div>
    329.             </div>
    331.             <div class="pager">
    332.                 <a href="">上一页</a>
    333.                 <a href="">1</a>
    334.                 <a href="">2</a>
    335.                 <a href="" class="select">3</a>
    336.                 <a href="">4</a>
    337.                 <a href="">5</a>
    338.                 <a href="">6</a>
    339.                 <a href="">7</a>
    340.                 <a href="">8</a>
    341.                 <a href="">9</a>
    342.                 <a href="">10</a>
    343.                 <a href="">下一页</a>
    344.             </div>
    345.         </div>
    346.     </div>
    347. </body>
    349. </html>

    movie.css

    1. body {
    2.     color: #333;
    3. }
    5. .clearfix::after {
    6.     content: "";
    7.     display: block;
    8.     clear: both;
    9. }
    11. .main {
    12.     line-height: 1.5;
    13. }
    15. .main .nav {
    16.     height: 60px;
    17.     background: #47464a;
    18.     color: #999;
    19.     text-align: center;
    20.     line-height: 60px;
    21. }
    23. .main .nav a {
    24.     margin: 0 38px;
    25. }
    27. .main .nav a:hover {
    28.     color: #fff;
    29. }
    31. .main .nav a.select {
    32.     color: #ef4238;
    33. }
    35. .main .container {
    36.     width: 1120px;
    37.     margin: 0 auto;
    38. }
    40. .main .container .choose-area {
    41.     border: 1px solid #e5e5e5;
    42.     margin: 40px 0;
    43.     font-size: 14px;
    44.     line-height: 30px;
    45.     padding: 0 30px;
    46. }
    48. .main .container .choose-area .choose-item {
    49.     margin: 1em 0;
    50.     border-bottom: 1px dotted #e5e5e5;
    51. }
    53. .main .container .choose-area .choose-item.no-line {
    54.     border: none;
    55. }
    57. .main .container .choose-area .choose-item .left {
    58.     float: left;
    59.     color: #999;
    60. }
    62. .main .container .choose-area .choose-item .right {
    63.     float: left;
    64.     width: 1020px;
    65. }
    67. .main .container .choose-area .choose-item .right li {
    68.     float: left;
    69.     margin: 0 9px;
    70.     padding: 0 6px;
    71. }
    73. .main .container .choose-area .choose-item .right li:hover {
    74.     color: #ef4238;
    75. }
    77. .main .container .choose-area .choose-item .right li.select {
    78.     background: #ef4238;
    79.     color: #fff;
    80.     /* CSS3 圆角边框 */
    81.     border-radius: 12px;
    82. }
    84. .main .container .movies .movie-item {
    85.     float: left;
    86.     width: 160px;
    87.     margin: 10px 30px 10px 0;
    88. }
    90. .main .container .movies .movie-item:nth-child(6n) {
    91.     margin-right: 0;
    92. }
    94. .main .container .movies .movie-item .poster img {
    95.     width: 160px;
    96.     height: 220px;
    97. }
    99. .main .container .movies .movie-item .name {
    100.     white-space: nowrap;
    101.     overflow: hidden;
    102.     text-overflow: ellipsis;
    103.     padding: 0 2px;
    104.     text-align: center;
    105. }
    107. .main .container .movies .movie-item .score {
    108.     white-space: nowrap;
    109.     color: #ffb400;
    110.     text-align: center;
    111.     line-height: 2.5;
    112.     font-style: italic;
    113.     font-size: 20px;
    114. }
    116. .main .container .movies .movie-item .score::first-letter {
    117.     font-size: 1.5em;
    118. }

    comm.css

    1. /* 多页面的通用样式 */
    3. .pager {
    4.     margin: 2em 0;
    5.     text-align: center;
    6.     /* margin: 25px 25px; */
    7. }
    9. .pager a {
    10.     border: 1px solid #d8d8d8;
    11.     padding: 5px 10px;
    12.     margin: 10px 5px;
    13. }
    15. .pager a:hover {
    16.     border-color: #ef4238;
    17. }
    19. .pager a.select {
    20.     background: #ef4238;
    21.     color: #fff;
    22.     border: none;
    23. }

    reset.css

    1. /* http://meyerweb.com/eric/tools/css/reset/ 
    2.    v2.0 | 20110126
    3.    License: none (public domain)
    4. */
    6. html,
    7. body,
    8. div,
    9. span,
    10. applet,
    11. object,
    12. iframe,
    13. h1,
    14. h2,
    15. h3,
    16. h4,
    17. h5,
    18. h6,
    19. p,
    20. blockquote,
    21. pre,
    22. a,
    23. abbr,
    24. acronym,
    25. address,
    26. big,
    27. cite,
    28. code,
    29. del,
    30. dfn,
    31. em,
    32. img,
    33. ins,
    34. kbd,
    35. q,
    36. s,
    37. samp,
    38. small,
    39. strike,
    40. strong,
    41. sub,
    42. sup,
    43. tt,
    44. var,
    45. b,
    46. u,
    47. i,
    48. center,
    49. dl,
    50. dt,
    51. dd,
    52. ol,
    53. ul,
    54. li,
    55. fieldset,
    56. form,
    57. label,
    58. legend,
    59. table,
    60. caption,
    61. tbody,
    62. tfoot,
    63. thead,
    64. tr,
    65. th,
    66. td,
    67. article,
    68. aside,
    69. canvas,
    70. details,
    71. embed,
    72. figure,
    73. figcaption,
    74. footer,
    75. header,
    76. hgroup,
    77. menu,
    78. nav,
    79. output,
    80. ruby,
    81. section,
    82. summary,
    83. time,
    84. mark,
    85. audio,
    86. video {
    87.     margin: 0;
    88.     padding: 0;
    89.     border: 0;
    90.     font-size: 100%;
    91.     font: inherit;
    92.     vertical-align: baseline;
    93. }
    96. /* HTML5 display-role reset for older browsers */
    98. article,
    99. aside,
    100. details,
    101. figcaption,
    102. figure,
    103. footer,
    104. header,
    105. hgroup,
    106. menu,
    107. nav,
    108. section {
    109.     display: block;
    110. }
    112. body {
    113.     line-height: 1;
    114. }
    116. ol,
    117. ul {
    118.     list-style: none;
    119. }
    121. blockquote,
    122. q {
    123.     quotes: none;
    124. }
    126. blockquote:before,
    127. blockquote:after,
    128. q:before,
    129. q:after {
    130.     content: '';
    131.     content: none;
    132. }
    134. table {
    135.     border-collapse: collapse;
    136.     border-spacing: 0;
    137. }
    139. a {
    140.     text-decoration: none;
    141.     color: inherit;
    142. }

    效果:
    2021-4-17[CSS-浮动练习] - 图1