网页对比较热门的电影进行评价和分析,具备热门电影展示,电影剧照展示、剧情简介,以及电影评分等功能,应能较直观反映出每部电影的质量好坏。本影评网页对一些动作电影和科幻电影进行影评分析,并且实现了点击“动作电影”和“科幻电影”时,下拉展示功能。
详细代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影影评网</title>
</head>
<body>
<h1 style="text-align: center;">电影影评网</h1>
<div style="text-align:center">
<img src="images/1.jpg">
</div>
<div style="text-align:center;">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<ul>
<li>
<details>
<summary><img src="images/11.png"></summary>
<p>《敢死队》<br>
其貌不扬的退伍老兵巴尼·罗斯(西尔维斯特·史泰龙 Sylvester Stallone 饰)生活在城市的某个角落,事实上他却是一支特种兵的领袖,
其麾下云集了李(杰森·斯坦森 Jason Statham 饰)、杨(李连杰 Jet Li 饰)等一众高手。正所谓艺高人胆大,只要酬金给足,再危险的
任务也敢接。这天,来自中情局的教堂先生(布鲁斯·威利斯 Bruce Willis 饰)联系到巴尼,雇用他们前往位于南美的比莱纳岛,铲除与美
国政府作对的独裁将军加尔萨(David Zayas 饰)。<br>
由于任务艰险,巴尼和李先行探路,发现加尔萨与前中情局官员詹姆斯·门罗相互勾结,残酷压榨比莱纳岛的人民。不久巴尼和他的战友赶赴小
岛,而更大的挑战正等待着这群骁勇的战士们……</p>
<ul>
<img src="images/12.jpg">
<li>豆瓣评分:<meter value="65" min="0" max="100" low="60" high="80" optimum="50"></meter></li>
<li>媒体评分:<meter value="80" min="0" max="100" low="40" high="80" optimum="80"></meter></li>
<li>网站评分:<meter value="40" min="0" max="100" low="60" high="80" optimum="100"></meter></li>
</ul>
</details>
</li>
<li>
<details>
<summary><img src="images/21.png"></summary>
<p>《赤焰战场》<br>
前特工人员弗兰克·摩西斯(布鲁斯·威利斯 Bruce Willis 饰)早年和同伴们金戈铁马,经历大风大浪,如今早已各自
闲赋家中,过着优哉游哉的安逸生活。然而这份退休后的平静突然被打破,在圣诞前夜,一群全副武装的不速之客闯入弗
兰克的家中,对其痛下杀手。原来,作为资深探员,弗兰克和他的同伴知道太多关于政府和军方的秘密,他们理所当然成
为被抹杀的对象。不甘将命运交诸他人之手,弗兰克找到了乔·麦瑟森(摩根·弗里曼 Morgan Freeman 饰)、马文·博格斯
(约翰•马尔科维奇 John Malkovich 饰)和维多利娅(海伦·米伦 Helen Mirren 饰)等当年的好搭档,决心展开一场绝
地大反击……<br>
本片根据华伦·埃利斯(Warren Ellis)和库里·汉默(Cully Hamner)的漫画改编。</p>
<ul>
<img src="images/22.jpg">
<li>豆瓣评分:<meter value="65" min="0" max="100" low="60" high="80" optimum="50"></meter></li>
<li>媒体评分:<meter value="80" min="0" max="100" low="40" high="80" optimum="80"></meter></li>
<li>网站评分:<meter value="40" min="0" max="100" low="60" high="80" optimum="100"></meter></li>
</ul>
</details>
</li>
</ul>
</body>
</html>
运行效果: