HTML静态网页成品作业(HTML+CSS)—— 电影泰坦尼克号介绍网页(4个页面)

news2024/11/26 19:29:45

🎉不定期分享源码,关注不丢失哦

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • HTML部分代码
  • 五、源码获取


一、作品介绍

🏷️本套采用HTML+CSS,未使用Javacsript代码,共有4个页面

二、作品演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>泰坦尼克号</title>
	<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
	
	<div id="con">
		<ul id="nav">
			<a href="index.html">首页</a>
			<a href="juqing.html">剧情简介</a>
			<a href="juese.html">角色介绍</a>
			<a href="pingjia.html">影片评价</a>
		</ul>
		
		
		<div id="ban">
			<img src="./images/banner.jpg" alt="">
		</div>
		
		<div id="main">
			<div class="tit">基本信息</div>
			<p class="text">《泰坦尼克号》是美国二十世纪福克斯电影公司、派拉蒙影业公司出品爱情片,由詹姆斯·卡梅隆执导,莱昂纳多·迪卡普里奥、凯特·温斯莱特领衔主演。该片于19971219日在美国上映,199843日在中国内地上映。影片以1912年泰坦尼克号在其处女航时触礁冰山而沉没的事件为背景,讲述了处于不同阶层的两个人穷画家杰克和贵族女露丝抛弃世俗的偏见坠入爱河,最终杰克把生存的机会让给了露丝的感人故事。该片于2012410日以3D版在中国内地重映,202343日以25周年纪念版在中国内地重映 。</p>
			
			<div class="tit">精彩剧照</div>
			<div id="tuji">
				<img src="./images/jz1.jpeg" alt="">
				<img src="./images/jz2.jpeg" alt="">
				<img src="./images/jz3.jpg" alt="">
				<img src="./images/jz4.jpeg" alt="">
				<img src="./images/jz5.png" alt="">
				<img src="./images/jz6.jpeg" alt="">
				<img src="./images/jz7.jpeg" alt="">
				<img src="./images/jz8.jpeg" alt="">
				<img src="./images/jz9.jpeg" alt="">
			</div>
		</div>
		<div id="foot">泰坦尼克号</div>
	</div>
		
	
	
</body>
</html>

五、源码获取

🥇 ~ 关注我,点赞博文~ 每天带你涨知识!
🎁1.看到这里了就[点赞+好评+收藏]三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。
💙2.想要获取本文源码,点击前往吧

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1816597.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

译译交友项目介绍

一、 项目背景 随着社会的进步&#xff0c;英语作为一种国际语言&#xff0c;很多人都在学习英语&#xff0c;然而现在很多人都会因为学习英语而烦恼&#xff0c;有时还会因为是一个人学习而感到枯燥。面对情绪的低落&#xff0c;往往会使学习更困难。因此&#xff0c;我打造了…

Protected and unprotected Meilisearch projects(/health)

Elasticsearch 做为老牌搜索引擎&#xff0c;功能基本满足&#xff0c;但复杂&#xff0c;重量级&#xff0c;适合大数据量。 MeiliSearch 设计目标针对数据在 500GB 左右的搜索需求&#xff0c;极快&#xff0c;单文件&#xff0c;超轻量。 所以&#xff0c;对于中小型项目来说…

Qt 实战(4)信号与槽 | 4.1、信号与槽机制

文章目录 一、信号与槽机制1、基本概念2、信号与槽函数连接2.1、connect宏实现信号与槽连接2.2、Qt5新connect函数2.3、使用函数指针2.4、使用lambda表达式2.5、使用Qt Creator添加信号的槽函数 3、结论 前言&#xff1a; Qt信号与槽机制是一种用于处理对象间通信的强大机制&am…

2003远程桌面端口修改,Windows Server 2003远程桌面端口修改的专业操作指南

在网络安全日益受到重视的今天&#xff0c;修改Windows Server 2003远程桌面的默认端口已成为提高服务器安全性的常规操作。默认情况下&#xff0c;远程桌面使用的端口为3389&#xff0c;这一广为人知的端口号常常成为黑客攻击的目标。因此&#xff0c;通过修改远程桌面端口&am…

代码随想录-二叉树 | 111 二叉树的最小深度

代码随想录-二叉树 | 111 二叉树的最小深度 LeetCode 111 二叉树的最小深度解题思路代码难点总结 LeetCode 111 二叉树的最小深度 题目链接 代码随想录 题目描述 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说…

地推数据不再迷茫,Xinstall助你一臂之力!

在移动互联网时代&#xff0c;地推作为一种传统的推广方式&#xff0c;仍然占据着举足轻重的地位。然而&#xff0c;地推过程中产生的数据却常常让推广者感到头疼。数据分散、难以追踪、分析困难……这些问题不仅耗费了推广者大量的时间和精力&#xff0c;更可能导致决策失误&a…

vue30:v-model语法糖的本质

在Vue.js框架中&#xff0c;v-model 是一个指令&#xff0c;用于在表单输入和应用状态之间创建双向数据绑定。它本质上是语法糖&#xff0c;意味着它提供了一种更简洁的方式来编写代码&#xff0c;而不需要显式地编写额外的代码。 具体来说&#xff0c;v-model 背后实际上是由…

LeetCode | 20.有效的括号

这道题就是栈这种数据结构的应用&#xff0c;当我们遇到左括号的时候&#xff0c;比如{,(,[&#xff0c;就压栈&#xff0c;当遇到右括号的时候&#xff0c;比如},),]&#xff0c;就把栈顶元素弹出&#xff0c;如果不匹配&#xff0c;则返回False&#xff0c;当遍历完所有元素后…

技术要转管理吗?PMP证书有用吗?

作为一名80后的IT项目经理&#xff0c;我从大学计算机专业毕业后就一直在.NET开发领域工作&#xff0c;直到获得PMP证书后转型成为项目经理。我的经历或许能为还在犹豫是否要从技术转型到管理岗位的学弟学妹们提供一些参考。 大多数人认为&#xff0c;计算机专业的大学毕业生通…

8.11 矢量图层线要素单一符号使用七(爆炸线)

文章目录 前言爆炸线&#xff08;Lineburst&#xff09;QGis设置线符号为爆炸线&#xff08;Lineburst&#xff09;二次开发代码实现爆炸线&#xff08;Lineburst&#xff09; 总结 前言 本章介绍矢量图层线要素单一符号中爆炸线&#xff08;Lineburst&#xff09;的使用说明&…

【大分享02】数字化转型下政务服务电子文件的规范归档与保存

关注我们 - 数字罗塞塔计划 - 本篇是参加由电子文件管理推进联盟联合数字罗塞塔计划发起的“大分享”活动投稿文章&#xff0c;由北京华电园信息技术有限公司和华迪计算机集团有限公司联合完成&#xff0c;作者&#xff1a;董艳会、高鹏、汪艳。 PART 01 国家政策从机制和流程…

Attention与轻量级ResNet融合,低资源消耗下实现效率和性能完美平衡

注意力机制通过让模型关注图像关键区域提升了识别精度&#xff0c;而轻量级残差网络通过减少参数和计算量&#xff0c;实现了在低资源消耗下的优秀性能。 结合注意力机制与轻量级残差网络&#xff0c;既能让模型能够更高效地关注输入数据中的关键信息&#xff0c;提升模型处理…

一文了解Redis

一.什么是Redis 与MySQL一样&#xff0c;Redis也是客户端服务器结构的程序&#xff0c;是基于内存的键值对存储系统&#xff0c;属于NoSQL的一种。与很多键值对数据库不同的是&#xff0c;Redis 中的值可以是由 string&#xff08;字符串&#xff09;、hash&#xff08;哈希&a…

Debain12 离线安装docker

官网教程&#xff1a;https://docs.docker.com/engine/install/debian/ 步骤 1. 解压 docker-deb.7z 安装包并上传Linux &#xff08;资源在PC端文章顶部&#xff09; 2. 安装 .deb 包 sudo dpkg -i ./containerd.io_<version>_<arch>.deb \./docker-ce_<vers…

AI机器人公众号小程序h5源码开源交付支持二开黑色风格版本

AI机器人系统对接OPENAI&#xff1a;开启智能新纪元 更新全新UI、新增全家桶模块、新增热榜板块、支持语音朗读、支持快速回答、支持AI绘图、支持文字一键生成图、支持导出pdf、支持导出word、支持导出文字、支持快速响应、支持中英翻译、支持markdown &#x1f680;一、引言…

[SWPUCTF 2022 新生赛]ez_1zpop(php反序列化之pop链构造)

[SWPUCTF 2022 新生赛]ez_ez_unserialize <?php class X {public $x __FILE__;function __construct($x){$this->x $x; }function __wakeup(){if ($this->x ! __FILE__) {$this->x __FILE__; }}function __destruct(){highlight_file($this->x);//flag is…

1秒揭秘:APP对接广告联盟,收益翻倍!

在当前数字时代&#xff0c;移动应用&#xff08;APP&#xff09;成为连接用户与服务的重要桥梁。 许多开发者通过开发APP并接入广告联盟&#xff0c;成功实现了收益的快速增长。 然而&#xff0c;对于初学者而言&#xff0c;从零开始开发一款能够有效对接广告联盟的APP&…

怎么学习汇川Codesys PLC教程?

前言 各位好&#xff0c;我在B站和抖音上都有发布视频的&#xff0c;搜索我的名称“阿凡工控分享”即可。在CSDN上发表文章也是想把我的一点见解和经验分享出来&#xff0c;进一步的方便大家进行学习。 我是正文 本文主要也是为了方便大家学习汇川的Codesys PLC而制作的&…

【前端项目笔记】1 登录与登出功能实现

项目笔记 ☆☆代表面试常见题 前后端分离&#xff1a;后端负责写接口&#xff0c;前端负责调接口。 登录/退出功能 登录业务流程 登录页面&#xff1a;用户名密码 调用后台接口进行验证 通过验证&#xff0c;根据后台响应状态跳到项目主页 登录业务相关技术点&#xff1…

5.6 探讨软件系统的三高设计和容错机制设计

一、引言 1. 软件系统的重要性 软件系统的三高性能设计和容错性设计是非常重要的&#xff0c;因为它们直接影响着系统的可用性、可靠性和效率。以下是它们的重要性&#xff1a; 1. 高性能设计&#xff1a;高性能设计意味着系统能够在高负载和大并发情况下仍能保持良好的响应…