制作电影影评网

最新推荐文章于 2023-03-08 00:01:40 发布

已转行@

最新推荐文章于 2023-03-08 00:01:40 发布

阅读量3.8k

点赞数 3

分类专栏：从零学习HTML5 文章标签： html5

原文链接：https://www.ptpress.com.cn

版权

从零学习HTML5 专栏收录该内容

57 篇文章 12 订阅

订阅专栏

本章前面讲解了HTML5新增的结构元素、分组元素、页面交互元素、文本层次语义元素及常用的标准属性等内容。本节将结合前面所学知识点制作一个“电影影评网”，默认效果图如下：

当点击最下面的“动作电影”时，会显示动作电影的下拉菜单，如下图：（再次点击，将下拉菜单收缩）

动作电影

同时，当点击“科幻电影”时，会显示科幻电影的下拉菜单，如下图：（再次点击，将下拉菜单收缩）

科幻电影

废话少说，上代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>电影影评网</title>
</head>
<body>
<!-- header begin(头部信息) -->
<header>
	<h2 align="center">电影影评网</h2>
	<p align="center">
		<img src="images/44.jpg">
	</p>
</header>
<!-- header end -->
<!-- nav begin（导航链接） -->
<nav>
	<p align="center">
		<img src="images/nav1.jpg" >
		<img src="images/nav2.jpg" >
		<img src="images/nav3.jpg" >
		<img src="images/nav4.jpg" >
		<img src="images/nav5.jpg" >
	</p>
</nav>
<!-- nav end -->
<!-- article begin（文章内容区域） -->
<article>
	<details>
		<summary><img src="images/111.png" ></summary>
		<ul contenteditable="true">
			<li>
				<figcaption>《敢死队》</figcaption>
				<p>今年看了全天唯一一场原声的<mark>《敢死队》</mark>。有好事者统计，这群肌肉大叔的年龄加起来是439岁，平均年龄超过了50岁，其中岁数最大的<mark>史泰龙</mark>64岁，岁数最小的<mark>杰森•斯坦森</mark>也有38岁，甚称老男人团。一帮纯爷们排出的电影，当然是没有什么剧情，从头劲爆到尾。旁边有个陌生的软妹睡死过去。全场的男性都异常亢奋。廉颇老矣，尚能饭否。当然是宝刀未老了。<mark>史泰龙</mark>全程曾哥附……</p>
				<img src="images/444.jpg" >
			</li>
			<li></li>
			<li>
				大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
			</li>
			<li>
				媒体评分：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
			</li>
			<li>
				网站评分：<meter value="40" min="0" max="100" low="60" high="80" title="40分" optimum="100">40</meter>
			</li>
		</ul>
		<hr size="3" color="#ccc">
		<ul contenteditable="true">
			<li>
				<figcaption>《赤焰战场》</figcaption>			
			<p>
				这部电影的最大意义在于一群廉颇老矣的明星向观众做了一个集体性的道别。他们以后或许还会各自为战地奋斗在
                荧屏之上，但如此集中地出现在一部电影中就显得几乎不再可能。<mark>布鲁斯•威利斯</mark>已经56岁，<mark>海伦•米伦</mark>66岁，<mark>约翰•马尔科维奇</mark>58岁，<mark>摩根•弗里曼</mark>已经74岁，<mark>布莱恩•考克斯</mark>65岁。这些年纪已经超过或者年近花甲的曾经叱咤荧屏的人物正在渐斩地逝去，如同那一抹灿丽的……
			</p>
				<img src="images/555.jpg">
			</li>
			<li></li>
			<li>
				大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
			</li>
			<li>
				媒体评分：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
			</li>
			<li>
				网站评分：<meter value="40" min="0" max="100" low="60" high="80" title="40分" optimum="100">40</meter>
			</li>
		</ul>
	</details>
	<details>
		<summary><img src="images/222.png"></summary>
		<ul contenteditable="true">
			<li>
				<figcaption>《雷神》</figcaption>
				<p>自<mark>《钢铁侠》</mark>开始，全球最负盛名的<mark>惊奇漫画电影公司</mark>走上了不断致力于在特效技术
                上开拓创新的发展道路。本着以集合旗下所有英雄漫画形象，打造一个“惊奇电影宇宙”的核心发展观，不断推出艺术造诣低下，剧情肤浅，但场景华丽、极致炫目的“超级英雄”大片。<mark> 《雷神》</mark>也是如此。尽管常被影评人抨击为“没脑子的超级英雄群”，却没人能阻止好莱坞愈加明显……
				</p>
				<img src="images/666.jpg">
			</li>
			<li></li>
			<li>
				大众评分：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter>
			</li>
			<li>
				媒体评分：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
			</li>
			<li>
				网站评分：<meter value="40" min="0" max="100" low="60" high="80" title="40分" optimum="100">40</meter>
			</li>
		</ul>
		<hr size="3" color="#ccc">
	</details>
</article>
<!-- article end -->
</body>
</html>

截止到这里，本章的阶段案例制作完成。希望各位能够运用所学知识实现一些简单的页面效果，能够加深对各元素的理解，为后面章节的学习打下扎实的基础。

声明：“来自于网络，如果侵犯著作权，请联系删除”

已转行@

关注

3
点赞
踩
33

收藏

觉得还不错? 一键收藏
2
评论
制作电影影评网

本章前面讲解了HTML5新增的结构元素、分组元素、页面交互元素、文本层次语义元素及常用的标准属性等内容。本节将结合前面所学知识点制作一个“电影影评网”，默认效果图如下：当点击最下面的“动作电影”时，会显示动作电影的下拉菜单，如下图：（再次点击，将下拉菜单收缩）同时，当点击“科幻电影”时，会显示科幻电影的下拉菜单，如下图：（再次点击，将下拉菜单收缩）废话少说，上代码：<!DOCTYPE html><html><head> <meta charset
复制链接

扫一扫