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>