Web程序设计-实验01 HTML与CSS基础

news2024/11/28 2:44:32

【实验主题】

影视详情页设计

【实验任务】

1、浏览并分析多个影视详情页面（详见参考资源，建议自行搜索更多影视网站）的主要元素构成和版面设计，借鉴并构思预期效果。

2、新建 index.html文件，合理运用HTML标记编写影视详情页面。

1）页面至少包含影视名称、海报、导演主演类型年份等基本信息、剧情介绍、观影的超链接（注意，不是视频本身）等。

2）欢迎自行设计添加更多页面元素，建议底部增加评论区——包含若干条影评和一个填写影评的表单。

3）不必考虑页面整体布局，即不需要设计页眉、导航、边栏和页脚。

3、新建 style.css 文件，运用 CSS语言对影视详情页图文排版。

1）网页中至少运用CSS的文本、文字、背景、浮动等样式属性和超链接伪类。

2）合理设计配色方案，合理选择背景图片。

【效果图】

有GPT帮助的成分

 

 

【index.html 文件】 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>星际穿越</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="container">
			<div class="movie-details">
				<div class="poster">
					<img src="./image/poster.jpg" alt="电影海报">
				</div>
				<div class="content">
					<h1 class="title">星际穿越 Interstellar (2014)</h1>
					<div class="info">
						<p class="rating">评分：9.4</p>
						<p class="director">导演：<a href="https://movie.douban.com/celebrity/1054524/">克里斯托弗·诺兰</a></p>
						<p class="actors">主演：<a href="https://movie.douban.com/celebrity/1040511/">马修·麦康纳</a> / <a
								href="https://movie.douban.com/celebrity/1048027/">安妮·海瑟薇</a> /
							<a href="https://movie.douban.com/celebrity/1000225/">杰西卡·查斯坦</a> / <a
								href="https://movie.douban.com/celebrity/1267954/">麦肯吉·弗依</a> / <a
								href="https://movie.douban.com/celebrity/1022593/">卡西·阿弗莱克</a> / <a
								href="https://movie.douban.com/celebrity/1054509/">迈克尔·凯恩</a> / <a
								href="https://movie.douban.com/celebrity/1054443/">马特·达蒙</a>
							/ <a href="https://movie.douban.com/celebrity/1325862/">提莫西·查拉梅</a> /
							<a href="https://movie.douban.com/celebrity/1036407/">艾伦·伯斯汀</a> / <a
								href="https://movie.douban.com/celebrity/1027824/">约翰·利思戈</a>
						</p>
						<p class="genre">类型： 剧情 / 科幻 / 冒险</p>
						<p class="duration">时长：169分钟</p>
						<button style="font-size: 20px" type="button">
							<az href="https://v.youku.com/v_show/id_XODkzNzA4ODM2.html?lang=%E8%8B%B1%E8%AF%AD&spm=a2hje.13141534.1_4.d_1_1&scm=20140719.apircmd.239009.video_XODkzNzA4ODM2"
								target="_blank">立即观看</a>
						</button>
					</div>
				</div>
			</div>
			<div class="description">
				<h2>电影描述</h2>
				<p>近未来的地球黄沙遍野，小麦、秋葵等基础农作物相继因枯萎病灭绝，人类不再像从前那样仰望星空，放纵想象力和灵感的迸发，而是每日在沙尘暴的肆虐下倒数着所剩不多的光景。在家务农的前NASA宇航员库珀（马修·麦康纳
					Matthew McConaughey 饰）接连在女儿墨菲（麦肯吉·弗依 Mackenzie Foy
					饰）的书房发现奇怪的重力场现象，随即得知在某个未知区域内前NASA成员仍秘密进行一个拯救人类的计划。多年以前土星附近出现神秘虫洞，NASA借机将数名宇航员派遣到遥远的星系寻找适合居住的星球。在布兰德教授（迈克尔·凯恩
					Michael Caine 饰）的劝说下，库珀忍痛告别了女儿，和其他三名专家教授女儿艾米莉亚·布兰德（安妮·海瑟薇 Anne Hathaway 饰）、罗米利（大卫·吉雅西 David Gyasi
					饰）、多伊尔（韦斯·本特利 Wes Bentley 饰）搭乘宇宙飞船前往目前已知的最有希望的三颗星球考察。</p>
				<p>他们穿越遥远的星系银河，感受了一小时七年光阴的沧海桑田，窥见了未知星球和黑洞的壮伟与神秘。在浩瀚宇宙的绝望而孤独角落，总有一份超越了时空的笃定情怀将他们紧紧相连……</p>
			</div>
			<div class="description">
				<h2>演职表</h2>
			</div>
			<div class="gallery">
				<div class="profile">
					<a href="https://movie.douban.com/celebrity/1054524/">
						<img src="./image/person1.jpg" alt="Person 1">
						<h5>克里斯托弗·诺兰</h5>
						<p>导演</p>
					</a>

				</div>
				<div class="profile">
					<a href="https://movie.douban.com/celebrity/1040511/">
						<img src="./image/person2.jpg" alt="Person 2">
						<h5>马修·麦康纳</h5>
						<p>饰 库珀 Cooper</p>
					</a>
				</div>
				<div class="profile">
					<a href="https://movie.douban.com/celebrity/1048027/">
						<img src="./image/person3.jpg" alt="Person 3">
						<h5>安妮·海瑟薇</h5>
						<p>饰 布兰德 Brand</p>
					</a>
				</div>
				<div class="profile">
					<a href="https://movie.douban.com/celebrity/1000225/">
						<img src="./image/person4.jpg" alt="Person 4">
						<h5>杰西卡·查斯坦</h5>
						<p>饰 墨菲(成年) Murph</p>
					</a>
				</div>
				<div class="profile">
					<a href="https://movie.douban.com/celebrity/1267954/">
						<img src="./image/person5.jpg" alt="Person 5">
						<h5>麦肯吉·弗依</h5>
						<p>饰 墨菲(10岁)</p>
					</a>
				</div>
				<div class="profile">
					<a href="https://movie.douban.com/celebrity/1022593/">
						<img src="./image/person6.jpg" alt="Person 6">
						<h5>卡西·阿弗莱克</h5>
						<p>饰 汤姆(成年)</p>
					</a>
				</div>
			</div>
			<h2>影视评论区</h2>

			<!-- 影评展示部分 -->
			<div id="reviews">
				<div class="review">
					<p class="rating">评分：5星</p>
					<p>这部电影真的很棒，故事讲述了希望和自由的力量。</p>
				</div>
				<div class="review">
					<p class="rating">评分：4星</p>
					<p>非常有创意的电影，让人深思。</p>
				</div>
				<!-- 更多影评 -->
			</div>

			<!-- 影评提交表单 -->
			<form action="/submit_review" method="post">

				<label for="rating">评分：</label>
				<select id="rating" name="rating">
					<option value="5">5星</option>
					<option value="4">4星</option>
					<option value="3">3星</option>
					<option value="2">2星</option>
					<option value="1">1星</option>
				</select>

				<label for="review">影评：</label>
				<textarea id="review" name="review" rows="4" required></textarea>

				<input type="submit" value="提交影评">
			</form>

		</div>
	</body>
</html>

【style.css 文件】

.container {
	width: 800px;
	margin: 0 auto;
	padding: 20px;
	background-color: #f2f2f2;
	font-family: Arial, Helvetica, sans-serif;
	
}

.movie-details {
	padding: 20px;
	display: flex;
}

.poster {
	flex: 0 0 200px;
	margin-right: 20px;
}

.poster img {
	width: 100%;
	height: auto;
}

.content {
	flex: 1;
}

.title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
}

.info {
	margin-top: 20px;
}

.info p {
	margin-bottom: 5px;
}

.rating {
	font-weight: bold;
}

.genre,
.duration {
	font-style: italic;
}

.info a {
	text-decoration: none;
	color: black;
}
.info a:hover {
	color: rgb(170, 170, 255);
}

.description {
	margin-top: 20px;
}

.description h2 {
	font-size: 20px;
	font-weight: bold;
}

.description p {
	text-indent: 2em;
	line-height: 25px;
	margin-top: 10px;
	font-size: 16px;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 20px;
	padding: 20px;
}

.profile {
	text-align: center;
}

.profile img {
	width: 100%;
	height: auto;
	/* border-radius: 50%; */
	/* Commented out to make the images rectangular */
}

.profile h3 {
	margin: 10px 0;
}

.profile p {
	font-size: 0.9em;
	color: #555;
}

button {
	background-color: rgb(179, 255, 182);
	border: none;
}

h2 {
	color: rgb(0, 119, 34);
}

.profile a {
	text-decoration: none;
	color: rgb(102, 102, 153)
}

.review {
	border-bottom: 1px solid #ccc;
	padding: 20px;
}

.review:last-child {
	border-bottom: none;
}

.rating {
	color: #f5a623;
}

form {
	margin-top: 20px;
}

input[type="text"],
textarea {
	width: 100%;
	margin-bottom: 10px;
	padding: 10px;
}

input[type="submit"] {
	background-color: #007bff;
	color: white;
	padding: 10px 20px;
	border: none;
	cursor: pointer;
}

input[type="submit"]:hover {
	background-color: #0056b3;
}

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

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

相关文章

基于GSP工具箱的NILM算法matlab仿真

基于GSP工具箱的NILM算法matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于GSP工具箱的NILM算法matlab仿真。GSP是图形信号处理的缩写&#xff0c;GSP非常适合对未知数据进行分类&#xff0c;尤其是当训练数据非常短时。GSPBox的基本理论是谱图论和…
阅读更多...
SEDEX验厂是什么？

SEDEX验厂是什么？

SEDEX验厂是一种审核流程&#xff0c;其主要目的是评估工厂在劳工标准、环境管理、健康与安全以及管理体系等方面的合规性。以下是关于SEDEX验厂的一些关键信息&#xff1a; SEDEX验厂审核标准主要包括以下几个方面&#xff1a; 劳工标准和劳动法规&#xff1a;工厂必须遵守当…
阅读更多...
Redis中的集群(七)

Redis中的集群(七)

集群 ASK错误 ASKING命令 ASKING命令唯一要做的就是打开发送该命令的客户端的REDIS_ASKING标识&#xff0c;以下是该命令的伪代码实现: def ASKING(): # 打开标识 client.flags | REDIS_ASKING# 向客户端返回OK回复 reply("OK")在一般情况下&#xff0c;如果客户…
阅读更多...
谷歌官方力作——CodeGemma代码语言模型

谷歌官方力作——CodeGemma代码语言模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
开发日志2024-04-11

开发日志2024-04-11

开发日志2024/04/11 1、会员/普通用户预约完成后&#xff0c;技师对应的积分添加预约完成的项目价格添加到统计表的业绩字段中&#xff0c;同时对应的服务次数字段1 实现代码&#xff1a; 前端 shHandler(){this.$confirm(确定操作?, "提示", {confirmButtonText…
阅读更多...
基于模型预测算法的含储能微网双层能量管理模型

基于模型预测算法的含储能微网双层能量管理模型

基于模型预测算法的含储能微网双层能量管理模型 文章目录 基于模型预测算法的含储能微网双层能量管理模型一、项目介绍二、源程序下载 一、项目介绍 代码主要做的是一个微网双层优化调度模型&#xff0c;微网聚合单元包括风电、光伏、储能以及超级电容器&#xff0c;在微网的运…
阅读更多...
ELFK （Filebeat+ELK）日志分析系统

ELFK （Filebeat+ELK）日志分析系统

一. 相关介绍 Filebeat&#xff1a;轻量级的开源日志文件数据搜集器。通常在需要采集数据的客户端安装 Filebeat&#xff0c;并指定目录与日志格式&#xff0c;Filebeat 就能快速收集数据&#xff0c;并发送给 logstash 进或是直接发给 Elasticsearch 存储&#xff0c;性能上相…
阅读更多...
Maven、redis、javaJDK环境配置及安装

Maven、redis、javaJDK环境配置及安装

一、Maven下载配置 Maven下载地址 下载完成完成配置环境变量 新建系统变量 MAVEN_HOME 地址 设置MAVEN… mvn -v 检测成功 二 、redis安装 下载地址 在安装目录cmd输入redis-server --version检测版本号 三、JAVA配置 设置JAVA… 测试
阅读更多...
【Vue3语法单文件——自用】

【Vue3语法单文件——自用】

1. Vue3基础语法 <script setup> import { ref,computed } from vue// 定义响应式的变量 const count ref(0) const author ref({name: John Doe,books: [Vue 2 - Advanced Guide,Vue 3 - Basic Guide,Vue 4 - The Mystery] }) //定义props const props defineProps(…
阅读更多...
贪心算法|56.合并区间

贪心算法|56.合并区间

力扣题目链接 class Solution { public:vector<vector<int>> merge(vector<vector<int>>& intervals) {vector<vector<int>> result;if (intervals.size() 0) return result; // 区间集合为空直接返回// 排序的参数使用了lambda表达…
阅读更多...
Mongodb前后端整合篇

Mongodb前后端整合篇

一、前端篇 1.1mongoose介绍 Mongoose 是一个对象文档模型库&#xff0c;官网 http://www.mongoosejs.net/ 方便使用代码操作 mongodb 数据库pnpm i mongoose5.13.15 1.2初步使用 import mongoose from mongoose; //设置 strictQuery 为 true mongoose.set(strictQuery, true…
阅读更多...
ubuntu或类Debian获取某些包的离线版本-包括依赖（还有一些意想不到的用途，哈哈）

ubuntu或类Debian获取某些包的离线版本-包括依赖（还有一些意想不到的用途，哈哈）

前言 偶尔能碰到很特殊的情况。网址白名单&#xff0c;纯内网&#xff0c;超多依赖及一些很难描述的场景。 比如一些少见的发行版缺少某些包。这时候可以找一台类似的系统环境来下载离线包及 其依赖包&#xff0c;然后转移到内网进行安装。如果是网址白名单&#xff0c;或者纯内…
阅读更多...
为什么需要网络切片？

为什么需要网络切片？

网络切片是电信领域的一个突破性概念&#xff0c;它允许将物理网络基础设施划分为多个虚拟网络&#xff0c;称为切片。每个切片作为一个独立的网络运行&#xff0c;拥有自己的专用资源和定制的特性&#xff0c;满足不同应用、行业或用户的特定需求。 将网络切片视为在共享物理…
阅读更多...
计算机网络——交换机和路由器

计算机网络——交换机和路由器

目录 前言 引言 交换机是用来做什么的&#xff1f; 与路由器有什么区别&#xff1f; 网关 子网掩码 网关、路由 前言 本博客是博主用于复习计算机网络的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 这篇博客是在B站掌芝士zzs这个UP主的视频的总结&am…
阅读更多...
【论文阅读】Digging Into Self-Supervised Monocular Depth Estimation

【论文阅读】Digging Into Self-Supervised Monocular Depth Estimation

论文&#xff1a;https://arxiv.org/pdf/1806.01260.pdf 代码&#xff1a;https://github.com/nianticlabs/monodepth2 Q: 这篇论文试图解决什么问题&#xff1f; A: 这篇论文试图解决的问题是如何提高仅使用单目图像进行深度估计的性能。具体来说&#xff0c;它关注的是如何…
阅读更多...
[大模型]Qwen1.5-7B-Chat-GPTQ-Int4 部署环境

[大模型]Qwen1.5-7B-Chat-GPTQ-Int4 部署环境

Qwen1.5-7B-Chat-GPTQ-Int4 部署环境 说明 Qwen1.5-72b 版本有BF16、INT8、INT4三个版本&#xff0c;三个版本性能接近。由于BF16版本需要144GB的显存&#xff0c;让普通用户忘却止步&#xff0c;而INT4版本只需要48GB即可推理&#xff0c;给普通用户本地化部署创造了机会。&…
阅读更多...
Linux 函数学习 poll

Linux 函数学习 poll

1、Linux poll 函数 int poll(struct pollfd *fds, nfds_t nfds, int timeout); fds&#xff1a; 需要轮询的fd集合 nfds&#xff1a;需要轮询的fds数量 timeout&#xff1a;超时时间 返回值&#xff1a;0 超时&#xff0c;<0 发生异常&#xff0c;> 0 存在数据变化 …
阅读更多...
函数、指针和数组的相互运用（C语言）

函数、指针和数组的相互运用（C语言）

1、函数指针数组 含义&#xff1a;数组的每个元素都是函数指针类型.eg&#xff1a; &#xff08;此代码链接&#xff1a;http://t.csdnimg.cn/ClJmb.也可以在我发布博客中找到&#xff09; 2、指向函数指针数组的指针 1、引入 3、回调函数 1、含义&#xff1a;就是一个通过…
阅读更多...
【嵌入式之中断】

【嵌入式之中断】

Cortex-M4集成了嵌套式矢量型中断控制器(Nested Vectored Interrupt Controller (NVIC))来实现高效的异常和中断处理。NVIC实现了低延迟的异常和中断处理&#xff0c;以及电源管理控制。它和内核是紧密耦合的。 凡是打断程序顺序执行的事件都称为异常&#xff08;exception&am…
阅读更多...
uniapp h5项目实现多选按钮/多选标签/多选框

uniapp h5项目实现多选按钮/多选标签/多选框

需求&#xff1a;实现简单多选功能&#xff0c;遍历数据&#xff0c;添加样式 1.效果图 2.以下代码粘贴到代码中&#xff0c;可直接运行&#xff0c;html代码 <view class"page index"><view class"list-box"><view v-for"(item,in…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023