相关文章推荐
魁梧的水煮鱼  ·  java fastJson ...·  2 月前    · 
曾经爱过的领结  ·  c - How to change ...·  1 年前    · 

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

当点击最下面的“动作电影”时,会显示动作电影的下拉菜单,如下图:(再次点击,将下拉菜单收缩)

同时,当点击“科幻电影”时,会显示科幻电影的下拉菜单,如下图:(再次点击,将下拉菜单收缩)

废话少说,上代码:

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

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

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

本章前面讲解了HTML5新增的结构元素、分组元素、页面交互元素、文本层次语义元素及常用的标准属性等内容。本节将结合前面所学知识点制作一个“电影影评网”,默认效果图如下:当点击最下面的“动作电影”时,会显示动作电影的下拉菜单,如下图:(再次点击,将下拉菜单收缩)同时,当点击“科幻电影”时,会显示科幻电影的下拉菜单,如下图:(再次点击,将下拉菜单收缩)废话少说,上代码:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset
HTML5期末大作业:节日站设计——中国传统节日端午节页HTML代码(7页) HTML+CSS+JavaScript 学生DW页设计作业成品 web课程设计页规划与设计 计算机毕设页设计源码 常见页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等页设计题目
HTML5学习之路 首先了解一下HTML的特性: 1.良好的语义特性;增加了各种元素赋予页更好的意义和结构,使文档更加清晰明确,新增的如header,article,nav,main,aside,footer等。 2.强大的绘图功能:HTML5之前的版本没有绘图功能,在页只能显示已有的图片,在HTML5中可以通过CanvansAPI动态绘图,也可以通过SVG绘制可伸缩矢量图形。 3.增加音视频播放和控制功能;新增audio和video元素,可以不依赖插件播放音频和视频。 4.HTML5的数据存储和数据处
HTML5期末大作业:漫站设计——爱影评在线电影(10页面)) 学生动漫页设计模板下载 大学生HTML制作作品 简单漫画页设计成品 dreamweaver学生站模板 常见页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等页设计题目, A+水平作业, 可满足
学习完了HTML5的新标签,然后结合之前的案例做了第一个小案例。自我感觉良好。下面我来展示一下图片 这是我浏览其他站的时候以为发现的新功能可以运行代码,这是运行之后截得图片。自我感觉照片还是蛮高大上的。如果以后博客园也有运行代码的功能就好了。 下面是我的代码: <!DOCTYPE html>
制作电影影评的html5需要遵循一定的步骤和原则。 首先,需要确定站的目标用户群和功能需求,例如是否需要用户注册、发布评论、给电影评分等。然后,设计站的页面布局和视觉风格,包括配色、字体、图标等,保证站的易用性和美观性。 在实现站的过程中,需要使用HTML5的语言和相关技术,例如CSS、JavaScript等,来构建站的基础框架和实现站的交互功能,如下拉菜单、搜索栏、轮播图等。 为了提高站的用户体验和互动性,可以考虑嵌入一些功能组件和插件,例如评论系统、推荐系统、社交分享等,这些组件可以使用开源库或第三方工具来快速实现。 最后,测试站的性能、可用性和安全性,在线上环境发布站。在日常维护过程中,需要及时更新站内容和技术,以保证站的稳定性和用户满意度。 总的来说,制作电影影评的html5需要综合考虑用户需求、设计风格、技术实现和日常维护等因素,才能打造出高质量的电影影评站。