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

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

文章目录

  • 一、作品介绍
  • 二、作品演示
  • 三、代码目录
  • 四、网站代码
    • 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.想要获取本文源码,点击前往吧

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2024年G3锅炉水处理证考试题库及G3锅炉水处理试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年G3锅炉水处理证考试题库及G3锅炉水处理试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证考试大纲随机…

咖啡机器人如何精准控制液位流量

在如今快节奏的生活中&#xff0c;精确控制液位流量的需求愈发迫切&#xff0c;特别是在咖啡机器人等精密设备中。为了满足这一需求&#xff0c;工程师们不断研发出各种先进的技术&#xff0c;以确保液体流量的精准控制。其中&#xff0c;霍尔式流量计和光电式流量计就是两种常…

如何用Postman做接口自动化测试?5个步骤带你轻松实现!

什么是自动化测试 把人对软件的测试行为转化为由机器执行测试行为的一种实践。例如GUI自动化测试&#xff0c;模拟人去操作软件界面&#xff0c;把人从简单重复的劳动中解放出来本质是用代码去测试另一段代码&#xff0c;属于一种软件开发工作&#xff0c;已经开发完成的用例还…

基于函数计算部署GPT-Sovits语音生成模型实现AI克隆声音

GPT-Sovits是一个热门的文本生成语音的大模型&#xff0c;只需要少量样本的声音数据源&#xff0c;就可以实现高度相似的仿真效果。通过函数计算部署GPT-Sovits模型&#xff0c;您无需关心GPU服务器维护和环境配置&#xff0c;即可快速部署和体验模型&#xff0c;同时&#xff…

基于ensp的园区网络搭建综合实验

核心技术介绍 1、虚拟局域网&#xff08;VLAN&#xff09; 2、链路聚合&#xff08;E-trunk&#xff09; 3、多生成树协议&#xff08;MSTP&#xff09; 4、VLANIF三层逻辑接口 5、虚拟路由冗余协议&#xff08;VRRP&#xff09; 6、开放式最短路径优先&#xff08;OSPF&…

【C++历练之路】C++11中的列表初始化声明新方法深入标准模板库的变革

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 目录 1. C11简介 2. 统一的列表初始化 2.1 &#xff5b;&#xff5d;初始化 2.2 std::initializer_list 3. 声明 3.1 auto 3.2 decltype 4.STL中一些变化 1. C11简介 在2003年C标准委员会曾经提交了一份技术勘误…

响应式流规范解析

在互联网应用构建过程中&#xff0c;我们知道可以采用异步非阻塞的编程模型来提高服务的响应能力。而为了实现异步非阻塞&#xff0c;我们可以引入数据流&#xff0c;并对数据的流量进行控制。我们来考虑一个场景&#xff0c;如果数据消费的速度跟不上数据发出的速度&#xff0…

腺苷调节合成高密度脂蛋白用于三阴性乳腺癌的化学免疫治疗

引用信息 文 章&#xff1a;Adenosine-modulating synthetic high-density lipoprotein for chemoimmunotherapy of triple-negative breast cancer 期 刊&#xff1a;Journal of Controlled Release&#xff08;影响因子&#xff1a;10.8&#xff09; 发表时间&am…

webgl_effects_stereo

ThreeJS 官方案例学习&#xff08;webgl_effects_stereo&#xff09; 1.效果图 2.源码 <template><div><div id"container"></div></div> </template> <script> import * as THREE from three; // 导入控制器 import { …

【乐吾乐2D可视化组态编辑器】实时数据,数据绑定

什么是绑定变量&#xff1f; 绑定变量是指把图元的一个属性与设备数据点关联的一个过程。【注意】只是建立一个数据模型的关联&#xff0c;数据源后面设置。 乐吾乐2D可视化组态编辑器地址&#xff1a;https://2d.le5le.com/ 为什么不直接设置数据源&#xff1f; 方便批量…

AWS-生产级微服务部署架构分享

使用AWS搭建云上应用 名词解释 AWS ECR&#xff1a;AWS ECR 容器存储库&#xff0c;按项目名创建容器仓库&#xff0c;一个项目对应一个仓库&#xff0c;目前是由Jenkins构建镜像远程push到AWS ECR。 **AWS ECS&#xff1a;Amazon Elastic Container Service (ECS) &#xf…

物理安全防护如何创新强化信息安全体系?

物理安全防护是信息安全体系的重要组成部分&#xff0c;它通过保护实体设施、设备和介质等&#xff0c;防止未授权访问、破坏、盗窃等行为&#xff0c;从而为信息系统提供基础的安全保障。要创新强化信息安全体系中的物理安全防护&#xff0c;可以从以下几个方面着手&#xff1…

AI查重与降重:科研人员的新型助手

论文写作低效&#xff1f;试试这四款AI论文工具和降重技术&#xff01;-笔灵 副本 在科研领域&#xff0c;AI写作工具如同新一代的科研利器&#xff0c;它们能够极大提高文献查阅、思路整理和表达优化的效率&#xff0c;本质上促进了科研工作的进步。AI写作工具不仅快速获取并…

k8s AIOps

k8s AIOps 主要介绍下k8sgpt 官站 github 介绍 k8sgpt 是一个用于扫描Kubernetes集群、诊断和分级问题的工具。它以简单的英语呈现问题&#xff0c;并将站点可靠性工程&#xff08;SRE&#xff09;的经验编码到其分析器中。通过AI丰富问题的解释&#xff0c;k8sgpt帮助提取最…

面试题react03

React事件机制&#xff1a; React的事件机制可以分为两个部分&#xff1a;事件的触发和事件的处理。事件的触发&#xff1a;在React中&#xff0c;事件可以通过用户与组件进行交互而触发&#xff0c;如点击、鼠标移动、键盘输入等。当用户与组件进行交互时&#xff0c;浏览器会…

mysql 8 linux7,8安装教程

选择自己对应的linux版本 cat /etc/os-release //查看自己linux系统版本 1.mysql下载地址 MySQL :: Download MySQL Community Server (Archived Versions) 拉到下面找到 选择自己linux指定的版本&#xff0c;否则会很麻烦 cat /etc/os-release //查看系统版本 2.查…

为什么给网站安装SSL证书之后还是有被提示不安全?

分为两种情况一种是安装了付费证书之后还是显示无效&#xff0c;另一种是安装了免费SSL证书的。 付费SSL证书&#xff1a;直接找厂商帮助解决遇到的问题&#xff0c;一般都是有专业的客服来对接这些的。 免费SSL证书&#xff1a;出现这种情况的原因会有很多。因为免费SSL证书的…

代码随想录-二叉树 | 101对称二叉树

代码随想录-二叉树 | 101对称二叉树 LeetCode 101-对称二叉树解题思路代码难点总结 LeetCode 101-对称二叉树 题目链接 代码随想录 题目描述 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 解题思路 判断&#xff1a; 同时遍历并比较根节点的左、右子树。…

服务器数据恢复—强制上线raid5阵列离线硬盘导致raid不可用的数据恢复案例

服务器数据恢复环境&#xff1a; 某品牌2850服务器中有一组由6块SCSI硬盘组建的raid5磁盘阵列&#xff0c;linux操作系统ext3文件系统。 服务器故障&#xff1a; 服务器运行过程中突然瘫痪。服务器管理员检查阵列后发现raid5阵列中有两块硬盘离线&#xff0c;将其中一块硬盘进行…

3、前端本地环境搭建

前端本地环境搭建 安装node [node下载地址] https://nodejs.org/en/download/prebuilt-installer 选择LTS的版本进行下载 下载后直接双击点击&#xff0c;选择自己想要安装到的目录一直点下一步即可&#xff08;建议不要安装到c盘&#xff09; 安装完成后配置环境变量&am…