HTML第6章上机练习5(制作爱奇艺视频播放列表) 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         * {
 8             padding: 0px;
 9             margin: 0px;
10         }
11 
12         .title {
13             width: 1000px;
14             margin: auto;
15         }
16 
17         li {
18             list-style: none;
19             display: inline-block;
20             padding: 10px;
21             margin: 5px;
22         }
23 
24         h3 {
25             font-size: 18px;
26             line-height: 40px;
27         }
28 
29         img {
30             border-radius: 10px;
31         }
32 
33         ul li:hover {
34             box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.2);
35             border-radius: 10px;
36         }
37 
38         /*以下属性自行设置的 题目无要求*/
39         p:nth-child(2) {
40             color: grey;
41             font-weight: bolder;
42         }
43 
44         p:nth-child(3) {
45             color: #9b2d30;
46         }
47 
48         p:nth-child(4) {
49             color: #06329b;
50         }
51 
52     </style>
53 </head>
54 <body>
55 <div class="title">
56     <h3>热播</h3>
57     <ul>
58         <li>
59             <img src="../img/img1.png" alt="">
60             <p>神武赵子龙</p>
61             <p>怒，林更新不抱网红抱美女</p>
62             <p>点击次数：242445次</p>
63         </li>
64         <li>
65             <img src="../img/img2.png" alt="">
66             <p>旋风十一人</p>
67             <p>胡歌变教练在撩前女友</p>
68             <p>点击次数：242445次</p>
69         </li>
70         <li>
71             <img src="../img/img3.png" alt="">
72             <p>太阳的后裔</p>
73             <p>宋慧乔吃嫩草</p>
74             <p>点击次数：242445次</p>
75         </li>
76         <li>
77             <img src="../img/img4.png" alt="">
78             <p>山海经之赤影传说</p>
79             <p>娜扎张翰再度联手</p>
80             <p>点击次数：242445次</p>
81         </li>
82     </ul>
83 </div>
84 </body>
85 </html>

 

posted @ 2021-01-20 09:36  残冰辉  阅读(1403)  评论(0)    收藏  举报